/* <site-mascot> (MASCOT-SPEC 3.2, 3.7, 3.8, 3.10, 4.1). A real file, never injected <style> (CSP style-src 'self').
   mascot.js only sets data-* attributes and custom properties (--mk-ar, --mk-breath, --mk-bs, --mk-sway, --mk-gx,
   --mk-gy). transform and opacity only; no blur on video; nothing flashes. The OS reduced-motion setting and the
   Pause control both stop every animation here, CSS as well as video. Move keyframes from WFT stageStyles.ts.
   Defaults only: the rules sit in the sub-layer components.mascot, so a site's own components layer (box sizes in
   .mk-slot, the look of .mk-toggle) wins, while the !important stills below still beat everything. A box width set on
   a parent as --mk-w (the generator's .mk-slot) wins over the tier default --mk-tier-w. */
@layer components.mascot {
  site-mascot {
    --mk-tier-w: clamp(96px, 16vw, 180px);
    --mk-amp: .6;
    --mk-scale: 1;
    display: inline-block;
    position: relative;
    inline-size: calc(var(--mk-w, var(--mk-tier-w)) * var(--mk-scale));
    max-inline-size: 100%;
    aspect-ratio: var(--mk-ar, auto);
    vertical-align: bottom;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  site-mascot[data-tier="hero"] { --mk-tier-w: clamp(120px, 22vw, 260px); --mk-amp: 1; }
  site-mascot[data-tier="face"] { --mk-tier-w: 72px; }
  site-mascot[data-tier="peek"] { --mk-tier-w: 64px; }
  site-mascot[data-size="s"] { --mk-scale: .75; }
  site-mascot[data-size="l"] { --mk-scale: 1.25; }

  site-mascot :is(.mk-sway, .mk-body, .mk-act) { display: block; position: relative; transform-origin: 50% 100%; }
  site-mascot img { display: block; inline-size: 100%; block-size: auto; }
  site-mascot .mk-loop {
    position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
    object-fit: contain; object-position: 50% 100%;
    opacity: 0; clip-path: inset(50%); /* a loop buffering out of sight is never a paint (or LCP) candidate */
    pointer-events: none;
  }
  site-mascot .mk-loop[data-shown] { opacity: 1; clip-path: none; }
  site-mascot[data-loop] .mk-still { visibility: hidden; }
  site-mascot video::-webkit-media-controls,
  site-mascot video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

  /* ambient life: breath on every tier, sway on hero and mid */
  site-mascot[data-motion="lively"] .mk-body { animation: mk-breathe var(--mk-breath, 3.9s) ease-in-out infinite; }
  site-mascot[data-motion="lively"]:is([data-tier="hero"], [data-tier="mid"]) .mk-sway {
    animation: mk-sway var(--mk-sway, 7.2s) ease-in-out infinite alternate;
  }
  site-mascot:is([data-paused], [data-deep], [data-quiet]) .mk-sway,
  site-mascot[data-paused] :is(.mk-body, .mk-act, .mk-fx i) { animation-play-state: paused; }

  /* macro moves (the director) and the cut, each within 1.1 s */
  site-mascot[data-motion="lively"][data-move="cut"] .mk-act { animation: mk-hop 760ms; }
  site-mascot[data-motion="lively"][data-move="hop"] .mk-act { animation: mk-hop 760ms; }
  site-mascot[data-motion="lively"][data-move="nod"] .mk-act { animation: mk-nod 900ms; }
  site-mascot[data-motion="lively"][data-move="tilt-l"] .mk-act { animation: mk-tilt 1100ms; --mk-dir: -1; }
  site-mascot[data-motion="lively"][data-move="tilt-r"] .mk-act { animation: mk-tilt 1100ms; --mk-dir: 1; }
  site-mascot[data-motion="lively"][data-move="stretch"] .mk-act { animation: mk-stretch 1100ms; }
  site-mascot[data-motion="lively"][data-move="dance"] .mk-act { animation: mk-dance 1100ms; }
  site-mascot[data-motion="lively"][data-move="bounce"] .mk-act { animation: mk-bounce 800ms; }
  site-mascot[data-motion="lively"][data-move="wiggle"] .mk-act { animation: mk-wiggle 700ms; }

  /* states: calm cues that also read in the still (3.2) */
  site-mascot[data-state="offline"] .mk-body { opacity: .55; filter: saturate(.4); }
  site-mascot[data-state="rest"] .mk-body { opacity: .88; --mk-breath: 6.2s; }
  site-mascot:is([data-state="warn"], [data-state="guard"], [data-state="error"]) .mk-sway { animation: none; }
  site-mascot[data-motion="lively"][data-state="error"] .mk-sway { animation: mk-concern 1400ms ease-out both; }
  site-mascot[data-motion="lively"][data-state="speak"] .mk-body { animation: mk-say 900ms ease-in-out infinite; }
  site-mascot[data-motion="lively"]:is([data-state="listen"], [data-state="point"], [data-state="guide"]) .mk-sway {
    animation: none;
    transform: translateX(calc(var(--mk-gx, 0) * 3%)) rotate(calc(var(--mk-gx, 0) * 4deg));
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  site-mascot[data-motion="lively"][data-state="notify"] .mk-sway { animation: mk-peek 600ms cubic-bezier(.22, 1, .36, 1) both; }

  /* sparkles for success and celebrate: three, once, never on a child profile (the states are off there) */
  site-mascot .mk-fx { position: absolute; inset: 0; pointer-events: none; }
  site-mascot .mk-fx i {
    position: absolute; inline-size: 12%; aspect-ratio: 1; opacity: 0;
    background: var(--accent, oklch(.88 .19 125));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  }
  site-mascot .mk-fx i:nth-child(1) { inset-block-start: 6%; inset-inline-start: 10%; }
  site-mascot .mk-fx i:nth-child(2) { inset-block-start: 0; inset-inline-end: 12%; animation-delay: 140ms; }
  site-mascot .mk-fx i:nth-child(3) { inset-block-start: 26%; inset-inline-end: 0; animation-delay: 280ms; }
  site-mascot[data-motion="lively"][data-fx="sparkle"] .mk-fx i { animation: mk-sparkle 900ms ease-out both; }
  site-mascot[data-motion="lively"][data-fx="sparkle"] .mk-fx i:nth-child(2) { animation-delay: 140ms; }
  site-mascot[data-motion="lively"][data-fx="sparkle"] .mk-fx i:nth-child(3) { animation-delay: 280ms; }

  /* pointAt: a ring around the target, outside it, never over it */
  [data-mk-ring] {
    outline: 2px solid var(--accent-line, currentColor);
    outline-offset: 6px;
    border-radius: inherit;
  }

  /* still: Pause, Off or the OS setting. No motion of any kind; error keeps a static tilt (3.2 "tilt only") */
  site-mascot[data-motion="still"], site-mascot[data-motion="still"] * { animation: none !important; transition: none !important; }
  site-mascot[data-motion="still"] .mk-loop { display: none !important; }
  site-mascot[data-motion="still"][data-state="error"] .mk-sway { transform: rotate(-3deg); }
  @media (prefers-reduced-motion: reduce) {
    site-mascot, site-mascot *, [data-mk-ring] { animation: none !important; transition: none !important; }
    site-mascot .mk-loop { display: none !important; }
  }

  /* off, overlap, narrow screens: never covers a call to action; never the largest thing at 360 px (3.10) */
  site-mascot[data-off], site-mascot[hidden] { display: none !important; }
  site-mascot:is([data-off], [hidden]) + .mk-toggle { display: none !important; }
  site-mascot[data-overlap] { visibility: hidden; }
  @media (max-width: 479.98px) {
    site-mascot[data-tier="hero"] { --mk-tier-w: 104px; }
    site-mascot[data-tier="mid"] { --mk-tier-w: 84px; }
    site-mascot[data-narrow="hide"], site-mascot[data-narrow="hide"] + .mk-toggle { display: none; }
  }

  /* a placement: the mascot and its Pause control kept together as one item of the page's layout */
  .mk-place { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; inline-size: min-content; max-inline-size: 100%; }
  :is(.mk-place, .mk-slot):has(> site-mascot:is([data-off], [hidden])) { display: none; }

  /* the Pause control and the site-wide group: fixed label, aria-pressed, an aria-hidden icon drawn in CSS */
  :is(.mk-toggle, .mk-control) {
    display: inline-flex; align-items: center; gap: .5em;
    min-block-size: 44px; padding: .35em .85em;
    border: 1px solid var(--line-strong, currentColor); border-radius: 999px;
    background: var(--surface, transparent); color: var(--ink, inherit);
    font: inherit; font-size: .875rem; line-height: 1.2; cursor: pointer;
    inline-size: fit-content; max-inline-size: 100%; justify-self: start; align-self: start;
  }
  .mk-place > .mk-toggle { align-self: center; inline-size: auto; text-align: center; } /* wraps under a small mascot */
  /* the icon: an aria-hidden <span class="mk-toggle-ic">, or drawn by ::before when the button has none.
     Separate rules, so a browser without :has() still draws the span. */
  .mk-toggle-ic {
    flex: none; box-sizing: border-box; display: inline-block;
    inline-size: .72em; block-size: .8em; border-inline: .24em solid currentColor;
  }
  .mk-toggle:not(:has(> .mk-toggle-ic))::before {
    content: ""; flex: none; box-sizing: border-box; display: inline-block;
    inline-size: .72em; block-size: .8em; border-inline: .24em solid currentColor;
  }
  .mk-toggle[aria-pressed="false"] .mk-toggle-ic {
    block-size: 0; inline-size: 0; border-inline-end: 0; border-inline-start: .7em solid currentColor;
    border-block: .42em solid transparent;
  }
  .mk-toggle[aria-pressed="false"]:not(:has(> .mk-toggle-ic))::before {
    block-size: 0; inline-size: 0; border-inline-end: 0; border-inline-start: .7em solid currentColor;
    border-block: .42em solid transparent;
  }
  :is(.mk-toggle, .mk-control):focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }
  :is(.mk-toggle, .mk-control)[aria-disabled="true"] { opacity: .62; cursor: not-allowed; }
  :is(.mk-toggle, .mk-control)[aria-pressed="false"] { color: var(--muted, inherit); }
}

@keyframes mk-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(calc(var(--mk-bs, 1.015) - .005), var(--mk-bs, 1.015)); } }
@keyframes mk-sway {
  from { transform: translateX(calc(-1.2% * var(--mk-amp))) rotate(calc(-.8deg * var(--mk-amp))); }
  to { transform: translateX(calc(1.2% * var(--mk-amp))) rotate(calc(.8deg * var(--mk-amp))); }
}
@keyframes mk-hop {
  0% { transform: none; animation-timing-function: ease-out; }
  14% { transform: scale(calc(1 + .05 * var(--mk-amp)), calc(1 - .07 * var(--mk-amp))); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  34% { transform: translateY(calc(-9% * var(--mk-amp))) scale(calc(1 - .03 * var(--mk-amp)), calc(1 + .05 * var(--mk-amp))); animation-timing-function: ease-out; }
  52% { transform: translateY(calc(-10% * var(--mk-amp))); animation-timing-function: ease-in; }
  66% { transform: translateY(calc(-1% * var(--mk-amp))) scale(.99, 1.02); animation-timing-function: ease-in; }
  72% { transform: scale(calc(1 + .04 * var(--mk-amp)), calc(1 - .05 * var(--mk-amp))); animation-timing-function: ease-out; }
  86% { transform: scale(.99, 1.01); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: none; }
}
@keyframes mk-nod {
  0% { transform: none; animation-timing-function: ease-out; }
  18% { transform: rotate(calc(-1deg * var(--mk-amp))) translateY(calc(-1% * var(--mk-amp))); animation-timing-function: ease-in-out; }
  45% { transform: rotate(calc(3deg * var(--mk-amp))) translateY(calc(1.2% * var(--mk-amp))); animation-timing-function: ease-in-out; }
  70% { transform: rotate(calc(-.6deg * var(--mk-amp))); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: none; }
}
@keyframes mk-tilt {
  0% { transform: none; animation-timing-function: ease-out; }
  15% { transform: rotate(calc(-.8deg * var(--mk-dir) * var(--mk-amp))); animation-timing-function: ease-in-out; }
  50% { transform: rotate(calc(6deg * var(--mk-dir) * var(--mk-amp))) translateX(calc(1% * var(--mk-dir) * var(--mk-amp))); animation-timing-function: ease-in-out; }
  78% { transform: rotate(calc(5deg * var(--mk-dir) * var(--mk-amp))); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: none; }
}
@keyframes mk-stretch {
  0% { transform: none; animation-timing-function: ease-in-out; }
  20% { transform: scale(calc(1 + .03 * var(--mk-amp)), calc(1 - .04 * var(--mk-amp))); animation-timing-function: ease-in-out; }
  55% { transform: scale(calc(1 - .04 * var(--mk-amp)), calc(1 + .06 * var(--mk-amp))); animation-timing-function: ease-in-out; }
  80% { transform: scale(1.01, .99); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: none; }
}
@keyframes mk-dance {
  0%, 100% { transform: none; }
  20% { transform: translateX(calc(-3% * var(--mk-amp))) rotate(calc(-6deg * var(--mk-amp))); }
  45% { transform: translateX(calc(3% * var(--mk-amp))) rotate(calc(6deg * var(--mk-amp))); }
  70% { transform: translateX(calc(-2% * var(--mk-amp))) rotate(calc(-4deg * var(--mk-amp))); }
  88% { transform: translateX(calc(1% * var(--mk-amp))) rotate(calc(2deg * var(--mk-amp))); }
}
@keyframes mk-bounce {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(calc(-5% * var(--mk-amp))); }
  75% { transform: translateY(calc(-3% * var(--mk-amp))); }
}
@keyframes mk-wiggle {
  0%, 100% { transform: none; }
  25% { transform: skewX(calc(-4deg * var(--mk-amp))); }
  50% { transform: skewX(calc(4deg * var(--mk-amp))); }
  75% { transform: skewX(calc(-2deg * var(--mk-amp))); }
}
@keyframes mk-concern { /* the lids drop and the head tilts, held 800 ms, then calm (WFT react.ts) */
  0% { transform: none; }
  25%, 82% { transform: rotate(-4deg) translateY(1%); }
  100% { transform: rotate(-1.5deg); }
}
@keyframes mk-say { 0%, 100% { transform: none; } 45% { transform: rotate(1.5deg) translateY(.8%); } }
@keyframes mk-peek { from { transform: translateY(35%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mk-sparkle {
  0% { transform: scale(0) rotate(-30deg); opacity: 0; }
  40% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(.2) rotate(30deg); opacity: 0; }
}