/**
 * blink.css — Blink Mascot CSS State Machine (v6, 10-state)
 * Source SVG: blink_default_neutral_sapphire.svg (977×1024 viewBox: 0 0 977 1024)
 * Last revised: 2026-05-17
 *
 * APPROACH: Hybrid SVG + CSS.
 * The SVG is inlined — CSS targets its internal path/circle/rect elements by class.
 * Always use tokens from tokens.css. The only raw values permitted here are
 * #FFFFFF (eye sockets, eyebrows, mouths, lid bars — intentionally pure white).
 *
 * DEPENDENCY: tokens.css must be loaded before this file.
 *
 * USAGE:
 *   <div class="blink" data-state="neutral" data-pose="default">
 *     <!-- inlined SVG content here, including the v6 sub-layer skeleton -->
 *   </div>
 *
 * EXPRESSIONS (data-state values):
 *   neutral | smug | pleased | pleased-waving | surprised | worried |
 *   disappointed | mad | satisfaction | sparkly | deadpan
 *
 * POSES (data-pose values):
 *   default | waving | thinking | arms-up | arms-crossed | pointing | holding
 *
 * v6 LAYER MAP (matches 03A_MASCOT_BLINK.md § 8):
 *   Z2  Body (.blink-body-*, .blink-facet-*)
 *   Z3  Glint texture (.blink-glint)
 *   Z4  Arms (.blink-arms)
 *   Z5  Held item (.blink-held-item)
 *   Z6a Eye sockets (.blink-eye-l, .blink-eye-r) — white
 *   Z6b Pupils (.pupil-l, .pupil-r) — dark, repositioned per state
 *   Z6c Eye highlights (.blink-eye-hi-*) — optional decorative accents
 *   Z6d Lid bars (.eye-lid-l, .eye-lid-r) — visible only for disappointed/mad
 *   Z6e Eyebrows (.brow-l, .brow-r containing 10 .brow-* paths each)
 *   Z7  Mouth (.blink-mouth containing 6 .mouth-* shapes)
 *   Z8  Headwear (.blink-headwear) — seasonal/event only
 */


/* ─────────────────────────────────────────────────────────────
   1. WRAPPER AND SIZING
   ───────────────────────────────────────────────────────────── */

.blink {
  width: 180px;
  aspect-ratio: 977 / 1024;
  position: relative;
  display: inline-block;

  --blink-colour: var(--sapphire);
  --blink-light:  var(--sapphire-tint);
  --blink-dark:   var(--sapphire-shade);

  animation: blink-float 4s var(--ease-floaty) infinite;
}

.blink svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Size variants */
.blink--sm  { width:  80px; --blink-emoji-size: 22px; }
.blink--md  { width: 140px; --blink-emoji-size: 36px; }
.blink--lg  { width: 240px; --blink-emoji-size: 56px; }
.blink--xl  { width: 320px; --blink-emoji-size: 72px; }


/* ─────────────────────────────────────────────────────────────
   2. BODY COLOURS (sapphire default; variants in § 9)
   ───────────────────────────────────────────────────────────── */

.blink-body-main,
.blink-body-edge-l,
.blink-body-edge-tl    { fill: var(--sapphire-shade); transition: fill var(--dur-transition); }

.blink-body-table      { fill: var(--sapphire);       transition: fill var(--dur-transition); }

.blink-body-crown,
.blink-facet-mid-l,
.blink-facet-mid-r     { fill: var(--sapphire-tint);  transition: fill var(--dur-transition); }

.blink-facet-wing-l,
.blink-facet-wing-r,
.blink-facet-low-l,
.blink-facet-low-r,
.blink-facet-centre,
.blink-body-crown-d    { fill: var(--sapphire);       transition: fill var(--dur-transition); }

.blink-body-point      { fill: var(--sapphire); opacity: 0.6; }


/* ─────────────────────────────────────────────────────────────
   3. EYE SOCKETS (Z6a) — white, with per-state transforms
   ───────────────────────────────────────────────────────────── */

.blink-eye-l,
.blink-eye-r {
  fill: #FFFFFF;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--dur-ui) var(--ease-snappy),
    fill var(--dur-ui) var(--ease-snappy),
    clip-path var(--dur-ui) var(--ease-snappy);
}

/* Legacy decorative accents from the older 8-state construction.
   The v6 model uses pupils for eye life, so these are hidden.
   They remain in the SVG for backward compatibility. */
.blink-eye-hi-r1, .blink-eye-hi-r2,
.blink-eye-hi-l1, .blink-eye-hi-l2,
.blink-eye-acc-l { display: none; }


/* ─────────────────────────────────────────────────────────────
   4. PUPILS (Z6b) — dark, repositioned per state
   ───────────────────────────────────────────────────────────── */

.pupil-l,
.pupil-r {
  fill: var(--ink-primary);
  display: none; /* shown by [data-state] selectors below */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-ui) var(--ease-snappy);
}


/* ─────────────────────────────────────────────────────────────
   5. EYEBROWS (Z6e) — white strokes, 10 variants per side
   ───────────────────────────────────────────────────────────── */

.brow-l,
.brow-r {
  display: none; /* whole group hidden by default in neutral state */
}

.brow-l path,
.brow-r path {
  display: none;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 18;
  stroke-linecap: round;
}


/* ─────────────────────────────────────────────────────────────
   6. LID BARS (Z6d) — visible only in disappointed/mad
   ───────────────────────────────────────────────────────────── */

.eye-lid-l,
.eye-lid-r {
  display: none;
  fill: #FFFFFF;
}


/* ─────────────────────────────────────────────────────────────
   7. MOUTH GROUP (Z7) — 6 shapes, one shown per state
   ───────────────────────────────────────────────────────────── */

.blink-mouth { display: block; }

.mouth-smirk,
.mouth-grin,
.mouth-o,
.mouth-flat,
.mouth-frown,
.mouth-small-smile {
  display: none;
  fill: #FFFFFF;
  transition: opacity var(--dur-ui) var(--ease-snappy);
}


/* ─────────────────────────────────────────────────────────────
   8. ARMS / HELD ITEM / AURA — hidden by default
   ───────────────────────────────────────────────────────────── */

.blink-arms      { display: none; }
.blink-held-item { display: none; }
.blink-aura      { display: none; }


/* ═════════════════════════════════════════════════════════════
   9. EXPRESSION STATES (10 total)
   Each state selects: eye-socket transform/clip-path,
   pupil visibility + transform, eyebrow path, mouth path,
   optional lid-bar visibility.
   ═════════════════════════════════════════════════════════════ */

/* ── NEUTRAL — sockets full, centred pupils, no mouth, no brows ── */
[data-state="neutral"] .blink-eye-l,
[data-state="neutral"] .blink-eye-r {
  clip-path: none;
  transform: none;
}
[data-state="neutral"] .pupil-l,
[data-state="neutral"] .pupil-r {
  display: block;
  transform: translate(0, 0);
}

/* ── SMUG — top half clipped, pupils inner-lower, brow asymmetric, smirk ── */
[data-state="smug"] .blink-eye-l,
[data-state="smug"] .blink-eye-r {
  clip-path: inset(46% 0 0 0 round 0 0 50% 50%);
  transform: translateY(10%);
}
[data-state="smug"] .pupil-l { display: block; transform: translate(8px, 6px); }
[data-state="smug"] .pupil-r { display: block; transform: translate(8px, 6px); }
[data-state="smug"] .brow-l,
[data-state="smug"] .brow-r          { display: block; }
[data-state="smug"] .brow-l .brow-smug,
[data-state="smug"] .brow-r .brow-smug { display: block; }
[data-state="smug"] .mouth-smirk     { display: block; }

/* ── PLEASED — wide eyes, pupils low, happy brows, grin ── */
[data-state="pleased"] .blink-eye-l,
[data-state="pleased"] .blink-eye-r {
  clip-path: none;
  transform: scale(1.2);
}
[data-state="pleased"] .pupil-l,
[data-state="pleased"] .pupil-r {
  display: block;
  transform: scale(1.2) translate(0, 2px);
}
[data-state="pleased"] .brow-l,
[data-state="pleased"] .brow-r          { display: block; }
[data-state="pleased"] .brow-l .brow-pleased,
[data-state="pleased"] .brow-r .brow-pleased { display: block; }
[data-state="pleased"] .mouth-grin       { display: block; }

/* ── PLEASED-WAVING — identical to pleased + animated 👋 emoji overlay ── */
[data-state="pleased-waving"] .blink-eye-l,
[data-state="pleased-waving"] .blink-eye-r {
  clip-path: none;
  transform: scale(1.2);
}
[data-state="pleased-waving"] .pupil-l,
[data-state="pleased-waving"] .pupil-r {
  display: block;
  transform: scale(1.2) translate(0, 2px);
}
[data-state="pleased-waving"] .brow-l,
[data-state="pleased-waving"] .brow-r          { display: block; }
[data-state="pleased-waving"] .brow-l .brow-pleased,
[data-state="pleased-waving"] .brow-r .brow-pleased { display: block; }
[data-state="pleased-waving"] .mouth-grin       { display: block; }

.blink[data-state="pleased-waving"] {
  overflow: visible;
}
.blink[data-state="pleased-waving"]::after {
  content: '';
  display: block;
  position: absolute;
  top: 22%;
  left: 0%;
  width: var(--blink-emoji-size, 40px);
  height: var(--blink-emoji-size, 40px);
  background: url('../../assets/blink/hand-wave.svg') center / contain no-repeat;
  pointer-events: none;
  transform-origin: bottom right;
  animation: blink-wave-hand 1s ease-in-out infinite;
}

@keyframes blink-wave-hand {
  0%, 100% { transform: rotate(12deg); }
  50%       { transform: rotate(-16deg); }
}

/* ── SURPRISED — very wide, pupils low, high brows, O mouth ── */
[data-state="surprised"] .blink-eye-l,
[data-state="surprised"] .blink-eye-r {
  clip-path: none;
  transform: scale(1.55);
}
[data-state="surprised"] .pupil-l,
[data-state="surprised"] .pupil-r {
  display: block;
  transform: scale(1.1) translate(0, 8px);
}
[data-state="surprised"] .brow-l,
[data-state="surprised"] .brow-r          { display: block; }
[data-state="surprised"] .brow-l .brow-surprised,
[data-state="surprised"] .brow-r .brow-surprised { display: block; }
[data-state="surprised"] .mouth-o         { display: block; }

/* ── WORRIED — angled inward, pupils up-and-in, inner-corner brows ── */
[data-state="worried"] .blink-eye-l { clip-path: none; transform: rotate(5deg)  scaleY(0.88); }
[data-state="worried"] .blink-eye-r { clip-path: none; transform: rotate(-5deg) scaleY(0.88); }
[data-state="worried"] .pupil-l    { display: block; transform: translate(6px,  -6px); }
[data-state="worried"] .pupil-r    { display: block; transform: translate(-6px, -6px); }
[data-state="worried"] .brow-l,
[data-state="worried"] .brow-r           { display: block; }
[data-state="worried"] .brow-l .brow-worried,
[data-state="worried"] .brow-r .brow-worried { display: block; }

/* ── DISAPPOINTED — heavy lids + lid bars + drooped brows + frown ── */
[data-state="disappointed"] .blink-eye-l,
[data-state="disappointed"] .blink-eye-r {
  clip-path: inset(44% 0 0 0 round 0 0 50% 50%);
  transform: translateY(14%);
}
[data-state="disappointed"] .pupil-l,
[data-state="disappointed"] .pupil-r {
  display: block;
  transform: translate(0, 10px);
}
[data-state="disappointed"] .eye-lid-l,
[data-state="disappointed"] .eye-lid-r    { display: block; }
[data-state="disappointed"] .brow-l,
[data-state="disappointed"] .brow-r       { display: block; }
[data-state="disappointed"] .brow-l .brow-disappointed,
[data-state="disappointed"] .brow-r .brow-disappointed { display: block; }
[data-state="disappointed"] .mouth-frown  { display: block; }

/* ── MAD — squinted (30% clip) + lid bars + inward pupils + V-brows + frown ── */
[data-state="mad"] .blink-eye-l,
[data-state="mad"] .blink-eye-r {
  clip-path: inset(30% 0 0 0 round 0 0 50% 50%);
  transform: translateY(6%);
}
[data-state="mad"] .pupil-l { display: block; transform: translate(10px,  4px); }
[data-state="mad"] .pupil-r { display: block; transform: translate(-10px, 4px); }
[data-state="mad"] .eye-lid-l,
[data-state="mad"] .eye-lid-r          { display: block; }
[data-state="mad"] .brow-l,
[data-state="mad"] .brow-r             { display: block; }
[data-state="mad"] .brow-l .brow-mad,
[data-state="mad"] .brow-r .brow-mad   { display: block; }
[data-state="mad"] .mouth-frown        { display: block; }

/* ── SATISFACTION — lightly lidded + relaxed brows + small smile ── */
[data-state="satisfaction"] .blink-eye-l,
[data-state="satisfaction"] .blink-eye-r {
  clip-path: inset(22% 0 0 0 round 0 0 50% 50%);
  transform: translateY(4%);
}
[data-state="satisfaction"] .pupil-l,
[data-state="satisfaction"] .pupil-r {
  display: block;
  transform: translate(0, 2px);
}
[data-state="satisfaction"] .brow-l,
[data-state="satisfaction"] .brow-r           { display: block; }
[data-state="satisfaction"] .brow-l .brow-satisfaction,
[data-state="satisfaction"] .brow-r .brow-satisfaction { display: block; }
[data-state="satisfaction"] .mouth-small-smile { display: block; }

/* ── SPARKLY — topaz eyes + pupils + happy brows + grin ── */
[data-state="sparkly"] .blink-eye-l,
[data-state="sparkly"] .blink-eye-r {
  clip-path: none;
  transform: scale(1.15);
  fill: var(--topaz);
}
[data-state="sparkly"] .pupil-l,
[data-state="sparkly"] .pupil-r {
  display: block;
  fill: var(--topaz);
}
[data-state="sparkly"] .brow-l,
[data-state="sparkly"] .brow-r           { display: block; }
[data-state="sparkly"] .brow-l .brow-sparkly,
[data-state="sparkly"] .brow-r .brow-sparkly { display: block; }
[data-state="sparkly"] .mouth-grin       { display: block; }

/* ── DEADPAN — neutral eyes, flat brows, flat mouth ── */
[data-state="deadpan"] .blink-eye-l,
[data-state="deadpan"] .blink-eye-r {
  clip-path: none;
  transform: none;
}
[data-state="deadpan"] .pupil-l,
[data-state="deadpan"] .pupil-r {
  display: block;
  transform: translate(0, 0);
}
[data-state="deadpan"] .brow-l,
[data-state="deadpan"] .brow-r           { display: block; }
[data-state="deadpan"] .brow-l .brow-deadpan,
[data-state="deadpan"] .brow-r .brow-deadpan { display: block; }
[data-state="deadpan"] .mouth-flat       { display: block; }


/* ─────────────────────────────────────────────────────────────
   10. POSE SYSTEM
   ───────────────────────────────────────────────────────────── */

[data-pose="waving"]       .blink-arms,
[data-pose="thinking"]     .blink-arms,
[data-pose="arms-up"]      .blink-arms,
[data-pose="arms-crossed"] .blink-arms,
[data-pose="pointing"]     .blink-arms,
[data-pose="holding"]      .blink-arms {
  display: block;
}

[data-pose="holding"] .blink-held-item { display: block; }

[data-pose="waving"] .blink-arm--right {
  transform-box: fill-box;
  transform-origin: top center;
  animation: arm-wave 1.2s var(--ease-bouncy) infinite;
}

[data-pose="arms-up"] .blink-arms {
  animation: arms-celebrate 0.5s var(--ease-bouncy);
}

@keyframes arm-wave {
  0%, 100% { transform: rotate(-35deg); }
  50%       { transform: rotate(-68deg); }
}

@keyframes arms-celebrate {
  0%   { transform: scaleY(0.75); opacity: 0; }
  60%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1);    opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────
   11. IDLE / ENTRANCE / EXIT / REACTION
   ───────────────────────────────────────────────────────────── */

@keyframes blink-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

.blink-eye-l.is-blinking,
.blink-eye-r.is-blinking {
  animation: eye-blink 250ms var(--ease-snappy) forwards;
}

@keyframes eye-blink {
  0%   { transform: scaleY(1); }
  38%  { transform: scaleY(0.04); }
  63%  { transform: scaleY(0.04); }
  100% { transform: scaleY(1); }
}

.blink-glint {
  position: absolute;
  left: 65%;
  top: 20%;
  width: 14%;
  height: 8%;
  background: rgba(255, 255, 255, 0.72);
  clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
  pointer-events: none;
  opacity: 0;
}

.blink-glint.is-glinting {
  animation: facet-glint 400ms var(--ease-snappy) forwards;
}

@keyframes facet-glint {
  0%, 100% { opacity: 0; }
  35%, 65% { opacity: 0.7; }
}

.blink.is-entering {
  animation:
    blink-enter var(--dur-transition) var(--ease-bouncy) forwards,
    blink-float 4s var(--ease-floaty) var(--dur-transition) infinite;
}

@keyframes blink-enter {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.blink.is-exiting {
  animation: blink-exit var(--dur-ui) var(--ease-snappy) forwards;
}

@keyframes blink-exit {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0); opacity: 0; }
}

.blink.is-reacting {
  animation: blink-react var(--dur-transition) var(--ease-bouncy);
}

@keyframes blink-react {
  0%   { transform: scale(1)    translateY(0); }
  40%  { transform: scale(1.14) translateY(-5px); }
  100% { transform: scale(1)    translateY(-3px); }
}


/* ─────────────────────────────────────────────────────────────
   12. COLOUR VARIANTS  [Phase 7 — DEFERRED]
   Only for seasonal/marketing contexts per 03A_MASCOT_BLINK.md.
   ───────────────────────────────────────────────────────────── */

.blink--ruby {
  --blink-colour: var(--ruby);
  --blink-light:  var(--ruby-tint);
  --blink-dark:   var(--ruby-shade);
}
.blink--ruby .blink-body-main,
.blink--ruby .blink-body-edge-l,
.blink--ruby .blink-body-edge-tl  { fill: var(--ruby-shade); }
.blink--ruby .blink-body-table,
.blink--ruby .blink-facet-wing-l,
.blink--ruby .blink-facet-wing-r,
.blink--ruby .blink-facet-low-l,
.blink--ruby .blink-facet-low-r,
.blink--ruby .blink-facet-centre,
.blink--ruby .blink-body-crown-d  { fill: var(--ruby); }
.blink--ruby .blink-body-crown,
.blink--ruby .blink-facet-mid-l,
.blink--ruby .blink-facet-mid-r   { fill: var(--ruby-tint); }

.blink--emerald {
  --blink-colour: var(--emerald);
  --blink-light:  var(--emerald-tint);
  --blink-dark:   var(--emerald-shade);
}
.blink--emerald .blink-body-main,
.blink--emerald .blink-body-edge-l,
.blink--emerald .blink-body-edge-tl  { fill: var(--emerald-shade); }
.blink--emerald .blink-body-table,
.blink--emerald .blink-facet-wing-l,
.blink--emerald .blink-facet-wing-r,
.blink--emerald .blink-facet-low-l,
.blink--emerald .blink-facet-low-r,
.blink--emerald .blink-facet-centre,
.blink--emerald .blink-body-crown-d  { fill: var(--emerald); }
.blink--emerald .blink-body-crown,
.blink--emerald .blink-facet-mid-l,
.blink--emerald .blink-facet-mid-r   { fill: var(--emerald-tint); }

.blink--amethyst {
  --blink-colour: var(--amethyst);
  --blink-light:  var(--amethyst-tint);
  --blink-dark:   var(--amethyst-shade);
}
.blink--amethyst .blink-body-main,
.blink--amethyst .blink-body-edge-l,
.blink--amethyst .blink-body-edge-tl  { fill: var(--amethyst-shade); }
.blink--amethyst .blink-body-table,
.blink--amethyst .blink-facet-wing-l,
.blink--amethyst .blink-facet-wing-r,
.blink--amethyst .blink-facet-low-l,
.blink--amethyst .blink-facet-low-r,
.blink--amethyst .blink-facet-centre,
.blink--amethyst .blink-body-crown-d  { fill: var(--amethyst); }
.blink--amethyst .blink-body-crown,
.blink--amethyst .blink-facet-mid-l,
.blink--amethyst .blink-facet-mid-r   { fill: var(--amethyst-tint); }


/* ─────────────────────────────────────────────────────────────
   13. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .blink,
  .blink.is-entering,
  .blink.is-exiting,
  .blink.is-reacting,
  .blink-eye-l.is-blinking,
  .blink-eye-r.is-blinking,
  .blink-glint.is-glinting,
  .blink-arms,
  [data-pose="waving"] .blink-arm--right,
  [data-pose="arms-up"] .blink-arms,
  .blink[data-state="pleased-waving"]::after {
    animation: none !important;
    transition: none !important;
  }
}