/* kookworkshop-footer 1.0.0 · 21st-port van @kedhareswer/fruit-sticker-footer: de CSS en keyframes uit de bron
   (fsf-rise, fsf-draw, fsf-erase, fsf-dot, fsf-pop, fsf-wig, fsf-slap, fsf-bob, fsf-up, fsf-boing, fsf-hop) met dezelfde
   duur, vertraging en easing, gescoped en met de kleuren uit de --m-*-tokens. */
.msm-kookworkshop-footer {
  --fsf-out: cubic-bezier(.2, .9, .3, 1);
  --fsf-bounce: cubic-bezier(.3, 1.6, .5, 1);
  --fsf-accent: var(--m-primary, #d34d2f);
  --fsf-shade: color-mix(in oklab, var(--m-primary, #d34d2f) 66%, var(--m-ink, #243027));
  --fsf-ink: var(--m-ink, #243027);
  --fsf-muted: var(--m-muted, #667067);
  --fsf-bg: var(--m-bg, #efe8db);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  overflow: clip;
  color: var(--fsf-ink);
  background: var(--fsf-bg);
  font-family: var(--m-font-body, 'Nunito Sans', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.msm-kookworkshop-footer :where(*) { box-sizing: border-box; }
.msm-kookworkshop-footer :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.msm-kookworkshop-footer :where(a) { color: inherit; text-decoration: none; }
.msm-kookworkshop-footer .fsf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msm-kookworkshop-footer .fsf-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: clamp(5rem, 13cqw, 11rem) 4cqw clamp(4rem, 9cqw, 8rem); }
.msm-kookworkshop-footer .fsf-cluster { position: relative; display: flex; flex-direction: column; align-items: center; font-size: min(5.2cqw, 5.75rem); line-height: 1; }
.msm-kookworkshop-footer .fsf-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  margin: 0;
  white-space: nowrap;
  font-family: var(--m-font-display, 'Caprasimo', Georgia, serif);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}
.msm-kookworkshop-footer .fsf-line { display: inline-block; }
.msm-kookworkshop-footer .fsf-ch { display: inline-block; transition: translate .45s var(--fsf-bounce), rotate .45s var(--fsf-bounce); }
.msm-kookworkshop-footer .fsf-ch:hover { translate: 0 -.07em; rotate: -4deg; }
.msm-kookworkshop-footer .fsf-script {
  position: relative;
  display: inline-block;
  height: 1em;
  margin-left: .25em;
  letter-spacing: 0;
  border-radius: .12em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: width .7s var(--fsf-out);
}
.msm-kookworkshop-footer .fsf-script:not(.is-svg) { width: auto; color: var(--fsf-accent); }
.msm-kookworkshop-footer .fsf-script-text { font-style: italic; }
.msm-kookworkshop-footer .fsf-script:focus-visible { outline: .025em solid var(--fsf-accent); outline-offset: .06em; }
.msm-kookworkshop-footer .fsf-script svg { position: absolute; overflow: visible; max-width: none; pointer-events: none; transform-origin: 20% 70%; }
.msm-kookworkshop-footer .fsf-g { transform-box: fill-box; transform-origin: 50% 100%; }
.msm-kookworkshop-footer .fsf-script:hover .fsf-g { animation: fsf-wig .7s ease both; animation-delay: calc(var(--gi) * 55ms); }
.msm-kookworkshop-footer .fsf-p { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.msm-kookworkshop-footer .fsf-m .fsf-p { stroke: var(--fsf-accent); }
.msm-kookworkshop-footer .fsf-s .fsf-p { stroke: var(--fsf-shade); }
.msm-kookworkshop-footer .fsf-h .fsf-p { stroke: #fff; stroke-opacity: .18; }
.msm-kookworkshop-footer .fsf-m .fsf-dot { fill: var(--fsf-accent); }
.msm-kookworkshop-footer .fsf-s .fsf-dot { fill: var(--fsf-shade); }
.msm-kookworkshop-footer .fsf-h .fsf-dot { fill: #fff; fill-opacity: .18; }
.msm-kookworkshop-footer .fsf-dot { transform-box: fill-box; transform-origin: center; }
.msm-kookworkshop-footer .fsf-sub { position: relative; z-index: 2; margin: .5em 0 0; font-size: max(.2em, .9375rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; text-align: center; }
.msm-kookworkshop-footer .fsf-sub span { display: block; }

/* Stickers: buiten (aanwijzer en veer) > in (entree) > bob (rust) > body (papier in --m-surface). */
.msm-kookworkshop-footer .fsf-stk { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); touch-action: none; will-change: transform; }
.msm-kookworkshop-footer .fsf-stk.is-behind { z-index: 1; }
.msm-kookworkshop-footer .fsf-stk.is-top { z-index: 4; }
.msm-kookworkshop-footer .fsf-stk-in,
.msm-kookworkshop-footer .fsf-stk-bob { width: 100%; height: 100%; }
.msm-kookworkshop-footer .fsf-stk-bob { animation: fsf-bob 6s ease-in-out infinite; animation-delay: var(--bd); }
.msm-kookworkshop-footer .fsf-stk.is-drag .fsf-stk-bob { animation-play-state: paused; }
.msm-kookworkshop-footer .fsf-stk-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--m-surface, #fffaf1);
  rotate: var(--r);
  cursor: grab;
  box-shadow: inset 0 0 0 .028em rgba(255, 255, 255, .42), inset 0 -.045em .08em rgba(0, 0, 0, .08), 0 calc(.018em + var(--lift, 0) * .14em) calc(.035em + var(--lift, 0) * .2em) color-mix(in srgb, var(--m-ink, #243027) calc(20% + var(--lift, 0) * 8%), transparent);
}
.msm-kookworkshop-footer .fsf-stk.is-drag .fsf-stk-body { cursor: grabbing; }
.msm-kookworkshop-footer .fsf-stk-body::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 49%, transparent 60%); transform: translateX(-75%); transition: transform .9s var(--fsf-out); pointer-events: none; }
.msm-kookworkshop-footer .fsf-stk-body:hover::after,
.msm-kookworkshop-footer .fsf-stk-body:focus-visible::after,
.msm-kookworkshop-footer .fsf-stk.is-drag .fsf-stk-body::after { transform: translateX(75%); }
.msm-kookworkshop-footer .fsf-stk-body:focus-visible { outline: .025em solid var(--fsf-ink); outline-offset: .05em; }
.msm-kookworkshop-footer .fsf-fruit { position: absolute; left: 50%; top: 50%; width: var(--f); height: var(--f); margin: calc(var(--f) / -2) 0 0 calc(var(--f) / -2); max-width: none; overflow: visible; pointer-events: none; }
/* Vruchten alleen in rood en groen uit het palet; details in --m-surface. */
.msm-kookworkshop-footer .fsf-fruit .ka { fill: var(--m-primary, #d34d2f); }
.msm-kookworkshop-footer .fsf-fruit .kb { fill: color-mix(in srgb, var(--m-primary, #d34d2f) 76%, var(--m-ink, #243027)); }
.msm-kookworkshop-footer .fsf-fruit .kc { fill: var(--m-surface, #fffaf1); }
.msm-kookworkshop-footer .fsf-fruit .ks { fill: var(--m-surface, #fffaf1); opacity: .38; }
.msm-kookworkshop-footer .fsf-fruit .kd { fill: var(--m-accent2, #455047); }
.msm-kookworkshop-footer .fsf-fruit .ke { fill: color-mix(in srgb, var(--m-accent2, #455047) 70%, var(--m-ink, #243027)); }
.msm-kookworkshop-footer .fsf-fruit .kf { fill: color-mix(in srgb, var(--m-accent2, #455047) 62%, var(--m-surface, #fffaf1)); }
.msm-kookworkshop-footer .fsf-fruit .kg { fill: var(--m-ink, #243027); }
.msm-kookworkshop-footer .fsf-fruit .kst { stroke: var(--m-accent2, #455047); stroke-width: 3; stroke-linejoin: round; }
.msm-kookworkshop-footer .fsf-fruit .kl { fill: none; stroke-linecap: round; }
.msm-kookworkshop-footer .fsf-fruit .kl-e { stroke: color-mix(in srgb, var(--m-accent2, #455047) 70%, var(--m-ink, #243027)); }
.msm-kookworkshop-footer .fsf-fruit .kl-c { stroke: var(--m-surface, #fffaf1); }

/* Contact en onderste balk. */
.msm-kookworkshop-footer .fsf-contact { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 2rem; padding: 0 1.5rem clamp(2rem, 4cqw, 3.25rem); font-size: .9375rem; }
.msm-kookworkshop-footer .fsf-mail { position: relative; display: inline-flex; align-items: center; gap: .65em; padding: .55em 1.1em .55em .55em; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--fsf-ink) 16%, transparent); font-weight: 600; transition: background-color .35s, color .35s, border-color .35s, translate .45s var(--fsf-bounce); }
.msm-kookworkshop-footer .fsf-mail:hover,
.msm-kookworkshop-footer .fsf-mail:focus-visible { background: var(--fsf-ink); color: var(--fsf-bg); border-color: var(--fsf-ink); translate: 0 -2px; }
.msm-kookworkshop-footer .fsf-mail:focus-visible { outline: 2px solid var(--fsf-accent); outline-offset: 3px; }
.msm-kookworkshop-footer .fsf-mail-ico { position: relative; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--fsf-accent); color: var(--m-surface, #fffaf1); flex: none; transition: rotate .5s var(--fsf-bounce); }
.msm-kookworkshop-footer .fsf-mail:hover .fsf-mail-ico { rotate: -14deg; }
.msm-kookworkshop-footer .fsf-mail-ico svg { width: 1.05em; height: 1.05em; max-width: none; overflow: visible; }
.msm-kookworkshop-footer .fsf-mail-tag { position: relative; display: inline-grid; font-size: .78em; color: var(--fsf-muted); transition: color .35s; }
.msm-kookworkshop-footer .fsf-mail-tag > span { grid-area: 1 / 1; transition: opacity .3s, translate .45s var(--fsf-bounce); }
.msm-kookworkshop-footer .fsf-mail:hover .fsf-mail-tag { color: inherit; opacity: .7; }
.msm-kookworkshop-footer .fsf-mail-tag .is-done { opacity: 0; translate: 0 .6em; color: var(--fsf-accent); font-weight: 700; }
.msm-kookworkshop-footer .fsf-mail.is-copied .fsf-mail-tag .is-idle { opacity: 0; translate: 0 -.6em; }
.msm-kookworkshop-footer .fsf-mail.is-copied .fsf-mail-tag .is-done { opacity: 1; translate: 0 0; }
.msm-kookworkshop-footer .fsf-mail.is-copied .fsf-mail-ico { animation: fsf-boing .6s var(--fsf-bounce); }
.msm-kookworkshop-footer .fsf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.msm-kookworkshop-footer .fsf-link { position: relative; display: inline-block; padding: .25em 0; color: var(--fsf-muted); font-weight: 600; transition: color .25s; }
.msm-kookworkshop-footer .fsf-link:hover,
.msm-kookworkshop-footer .fsf-link:focus-visible { color: var(--fsf-ink); }
.msm-kookworkshop-footer .fsf-link:focus-visible { outline: 2px solid var(--fsf-accent); outline-offset: 3px; border-radius: 2px; }
.msm-kookworkshop-footer .fsf-link svg { position: absolute; left: 0; bottom: -.2em; width: 100%; height: .42em; max-width: none; overflow: visible; pointer-events: none; }
.msm-kookworkshop-footer .fsf-link path { fill: none; stroke: var(--fsf-accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--fsf-out); }
.msm-kookworkshop-footer .fsf-link:hover path,
.msm-kookworkshop-footer .fsf-link:focus-visible path { stroke-dashoffset: 0; }
/* De zwevende menupil van de kopbalk ligt onderaan: 96 px extra ruimte onder de laatste regel. */
.msm-kookworkshop-footer .fsf-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 clamp(1rem, 4cqw, 3rem); padding: 1.1rem 0 calc(1.4rem + 96px); border-top: 1px solid color-mix(in oklab, var(--fsf-ink) 12%, transparent); font-size: .8125rem; color: var(--fsf-muted); }
.msm-kookworkshop-footer .fsf-bar p { margin: 0; }
.msm-kookworkshop-footer .fsf-bar p + p { margin-top: .25rem; }
.msm-kookworkshop-footer .fsf-top { display: inline-flex; align-items: center; gap: .5em; padding: .3em 0; flex: none; transition: color .25s; }
.msm-kookworkshop-footer .fsf-top:hover,
.msm-kookworkshop-footer .fsf-top:focus-visible { color: var(--fsf-ink); }
.msm-kookworkshop-footer .fsf-top:focus-visible { outline: 2px solid var(--fsf-accent); outline-offset: 3px; border-radius: 2px; }
.msm-kookworkshop-footer .fsf-top i { position: relative; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--fsf-ink) 16%, transparent); overflow: hidden; font-style: normal; }
.msm-kookworkshop-footer .fsf-top svg { width: .9em; height: .9em; max-width: none; }
.msm-kookworkshop-footer .fsf-top:hover svg { animation: fsf-hop .55s var(--fsf-out); }

/* Entree: pas als de footer in beeld is. Alleen verborgen als het script de footer heeft gewapend. */
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-ch,
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-p,
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-dot,
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-stk-in,
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-sub span,
.msm-kookworkshop-footer[data-armed]:not([data-in]) .fsf-rise { opacity: 0; }
.msm-kookworkshop-footer[data-in] .fsf-ch { animation: fsf-rise .9s var(--fsf-out) both; animation-delay: calc(var(--i) * 38ms); }
.msm-kookworkshop-footer[data-in] .fsf-p { animation: fsf-draw var(--dur) cubic-bezier(.45, .05, .4, 1) both; animation-delay: calc(var(--base) + var(--d)); }
.msm-kookworkshop-footer[data-in] .fsf-dot { animation: fsf-dot .45s var(--fsf-bounce) both; animation-delay: calc(var(--base) + var(--d)); }
.msm-kookworkshop-footer[data-in] .fsf-script svg { animation: fsf-pop .6s var(--fsf-bounce) both; animation-delay: calc(var(--base) + var(--total)); }
.msm-kookworkshop-footer .fsf-script[data-out] .fsf-p { animation: fsf-erase .34s cubic-bezier(.55, 0, .8, .2) both; animation-delay: calc(var(--d) * .18); }
.msm-kookworkshop-footer .fsf-script[data-out] .fsf-dot { animation: fsf-undot .25s ease-in both; }
.msm-kookworkshop-footer[data-in] .fsf-stk-in { animation: fsf-slap .75s var(--fsf-out) both; animation-delay: var(--sd); }
.msm-kookworkshop-footer[data-in] .fsf-sub span { animation: fsf-up .8s var(--fsf-out) both; animation-delay: calc(1.05s + var(--i) * 110ms); }
.msm-kookworkshop-footer[data-in] .fsf-rise { animation: fsf-up .8s var(--fsf-out) both; animation-delay: calc(1.4s + var(--i) * 120ms); }
@keyframes fsf-rise { from { opacity: 0; transform: translateY(.55em) rotate(9deg); filter: blur(.04em); } 55% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }
@keyframes fsf-draw { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fsf-erase { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes fsf-dot { from { transform: scale(0); } to { transform: none; } }
@keyframes fsf-undot { to { transform: scale(0); } }
@keyframes fsf-pop { 0%, 100% { transform: none; } 35% { transform: scale(1.05, .93); } 65% { transform: scale(.98, 1.03); } }
@keyframes fsf-wig { 0%, 100% { transform: none; } 30% { transform: translateY(-14px) rotate(-5deg); } 60% { transform: translateY(3px) rotate(2deg); } }
@keyframes fsf-slap { 0% { opacity: 0; transform: translateY(-.5em) scale(1.75) rotate(var(--spin)); } 45% { opacity: 1; } 60% { transform: scale(.9) rotate(0deg); } 80% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes fsf-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-.035em) rotate(1.6deg); } }
@keyframes fsf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fsf-boing { 0% { transform: none; } 35% { transform: scale(1.25) rotate(-12deg); } 70% { transform: scale(.92); } 100% { transform: none; } }
@keyframes fsf-hop { 0% { transform: none; } 45% { transform: translateY(-160%); } 46% { transform: translateY(160%); } 100% { transform: none; } }

@media (min-width: 768px) {
  .msm-kookworkshop-footer { min-height: 90vh; min-height: 90svh; }
}
@container (max-width: 640px) {
  .msm-kookworkshop-footer .fsf-cluster { font-size: 10.4cqw; }
  .msm-kookworkshop-footer .fsf-head { flex-wrap: wrap; justify-content: center; row-gap: .12em; }
  .msm-kookworkshop-footer .fsf-script { margin-left: 0; }
  .msm-kookworkshop-footer .fsf-sub { font-size: .9375rem; text-wrap: balance; }
  /* Op smalle schermen staan de stickers rond de kop in plaats van over de twee regels. */
  .msm-kookworkshop-footer .fsf-cluster > .fsf-stk:nth-child(4) { --x: 7% !important; --y: 4% !important; }
  .msm-kookworkshop-footer .fsf-cluster > .fsf-stk:nth-child(5) { --x: 12% !important; --y: 128% !important; }
  .msm-kookworkshop-footer .fsf-cluster > .fsf-stk:nth-child(6) { --x: 93% !important; --y: 120% !important; }
  .msm-kookworkshop-footer .fsf-stage { padding: 26cqw 4cqw 20cqw; }
  .msm-kookworkshop-footer .fsf-contact { flex-direction: column; gap: 1.1rem; }
  .msm-kookworkshop-footer .fsf-bar { flex-direction: column-reverse; gap: .6rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-kookworkshop-footer *,
  .msm-kookworkshop-footer *::after { animation: none !important; transition: none !important; }
}