/* HODHOD Home illustration motion — production (transform-only stories) */

.illu-host {
  /* transform-only animations; no layout impact */
}

/* ---------- WORK (~1650ms) — browse projects, select, next forward ---------- */
/* Rest: card-1 front. Sequence: cursor→1 → 1 aside → 2 forward → cursor→2 → pause reset */
@keyframes illu-work-cursor {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 4px); }
  22%, 34% { transform: translate(-16px, 11px); }          /* ~19px toward card-1 */
  48% { transform: translate(-22px, 4px); }                 /* travel toward next */
  58%, 78% { transform: translate(-30px, -4px); }           /* ~16px toward card-2 */
  90% { transform: translate(-8px, 0); }
}

@keyframes illu-work-card-1 {
  0%, 34% { transform: translate(0, 0) scale(1); }
  48%, 78% { transform: translate(-10px, -8px) scale(0.97); } /* ~12.8px aside / back */
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes illu-work-card-2 {
  0%, 34% { transform: translate(0, 0) scale(0.98); }
  48%, 78% { transform: translate(11px, 9px) scale(1); } /* ~14px next project forward */
  100% { transform: translate(0, 0) scale(0.98); }
}

@keyframes illu-work-card-3 {
  0%, 50% { transform: translate(0, 0) scale(0.97); }
  65%, 78% { transform: translate(5px, -4px) scale(0.98); } /* hint available */
  100% { transform: translate(0, 0) scale(0.97); }
}

@keyframes illu-work-action-1 {
  0%, 18%, 100% { transform: scale(1); }
  24%, 34% { transform: scale(1.08); }
  42% { transform: scale(1); }
}

@keyframes illu-work-action-2 {
  0%, 52%, 100% { transform: scale(1); }
  60%, 74% { transform: scale(1.1); }
  86% { transform: scale(1); }
}

.illu-playing #work-cursor,
.frame--work.illu-playing #work-cursor,
.hx-illu--work.illu-playing #work-cursor {
  animation: illu-work-cursor 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #work-card-1,
.frame--work.illu-playing #work-card-1,
.hx-illu--work.illu-playing #work-card-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-work-card-1 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #work-card-2,
.frame--work.illu-playing #work-card-2,
.hx-illu--work.illu-playing #work-card-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-work-card-2 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #work-card-3,
.frame--work.illu-playing #work-card-3,
.hx-illu--work.illu-playing #work-card-3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-work-card-3 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #work-action-1,
.frame--work.illu-playing #work-action-1,
.hx-illu--work.illu-playing #work-action-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-work-action-1 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #work-action-2,
.frame--work.illu-playing #work-action-2,
.hx-illu--work.illu-playing #work-action-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-work-action-2 1650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Rest depth: inactive slightly smaller; active at 1 */
.frame--work #work-card-2,
.hx-illu--work #work-card-2 {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.98);
}

.frame--work #work-card-3,
.hx-illu--work #work-card-3 {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.97);
}

/* ---------- ABOUT (~1200ms) — explore then focus ---------- */
@keyframes illu-about-opt1 {
  0%, 100% { transform: translate(0, 0); }
  18%, 48% { transform: translate(12px, -12px); }
  78% { transform: translate(0, 0); }
}

@keyframes illu-about-opt2 {
  0%, 100% { transform: translate(0, 0); }
  18%, 48% { transform: translate(14px, 2px); }
  78% { transform: translate(0, 0); }
}

@keyframes illu-about-opt3 {
  0%, 100% { transform: translate(0, 0); }
  18%, 48% { transform: translate(-12px, 14px); }
  78% { transform: translate(0, 0); }
}

/* Selected option: spreads out, then settles inward */
@keyframes illu-about-opt4 {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-12px, -12px); }
  34%, 58% { transform: translate(-5px, -5px); }
  82% { transform: translate(0, 0); }
}

@keyframes illu-about-node {
  0%, 22%, 100% { transform: scale(1); }
  38% { transform: scale(1.08); }
  52% { transform: scale(1); }
}

@keyframes illu-about-path {
  0%, 100% {
    stroke: #F39A62;
    stroke-opacity: 0.85;
    stroke-width: 3px;
  }
  18%, 58% {
    stroke: #EA6D1E;
    stroke-opacity: 1;
    stroke-width: 4px;
  }
  82% {
    stroke: #F39A62;
    stroke-opacity: 0.85;
    stroke-width: 3px;
  }
}

@keyframes illu-about-accent {
  0%, 100% { fill: #F39A62; }
  18%, 58% { fill: #EA6D1E; }
  82% { fill: #F39A62; }
}

.illu-playing #about-option-1,
.frame--about.illu-playing #about-option-1,
.hx-illu--about.illu-playing #about-option-1 {
  animation: illu-about-opt1 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #about-option-2,
.frame--about.illu-playing #about-option-2,
.hx-illu--about.illu-playing #about-option-2 {
  animation: illu-about-opt2 1200ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both;
}

.illu-playing #about-option-3,
.frame--about.illu-playing #about-option-3,
.hx-illu--about.illu-playing #about-option-3 {
  animation: illu-about-opt3 1200ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

.illu-playing #about-option-4,
.frame--about.illu-playing #about-option-4,
.hx-illu--about.illu-playing #about-option-4 {
  animation: illu-about-opt4 1200ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
}

.illu-playing #about-node,
.frame--about.illu-playing #about-node,
.hx-illu--about.illu-playing #about-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-about-node 1200ms ease-out both;
}

.illu-playing #about-path-4,
.frame--about.illu-playing #about-path-4,
.hx-illu--about.illu-playing #about-path-4 {
  animation: illu-about-path 1200ms ease both;
}

.illu-playing #about-option-4 rect:nth-of-type(2),
.frame--about.illu-playing #about-option-4 rect:nth-of-type(2),
.hx-illu--about.illu-playing #about-option-4 rect:nth-of-type(2) {
  animation: illu-about-accent 1200ms ease both;
}

/* ---------- STRENGTHS (~1250ms) — brick travels and snaps ---------- */
@keyframes illu-strengths-snap {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-4.7px, 4.9px); }
  38%, 60% { transform: translate(-16.7px, 17.6px); }
  84% { transform: translate(0, 0); }
}

@keyframes illu-strengths-settle {
  0%, 100% { transform: translateY(0); }
  38%, 60% { transform: translateY(2px); }
  84% { transform: translateY(0); }
}

.illu-playing #piece-snap,
.frame--strengths.illu-playing #piece-snap,
.hx-illu--strengths.illu-playing #piece-snap {
  animation: illu-strengths-snap 1250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #strengths-structure,
.frame--strengths.illu-playing #strengths-structure,
.hx-illu--strengths.illu-playing #strengths-structure {
  animation: illu-strengths-settle 1250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- CONTACT (~1150ms) — letter travels to receiver ---------- */
@keyframes illu-contact-letter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(4px, -4px) rotate(2deg); }
  36%, 58% { transform: translate(22px, 14px) rotate(4deg); }
  84% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes illu-contact-receiver {
  0%, 100% { fill: #EA6D1E; }
  36%, 58% { fill: #F39A62; }
  84% { fill: #EA6D1E; }
}

@keyframes illu-contact-sender {
  0%, 100% { fill-opacity: 1; }
  36%, 58% { fill-opacity: 0.5; }
  84% { fill-opacity: 1; }
}

.illu-playing #contact-letter,
.frame--contact.illu-playing #contact-letter,
.hx-illu--contact.illu-playing #contact-letter {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-contact-letter 1150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.illu-playing #contact-receiver-accent,
.frame--contact.illu-playing #contact-receiver-accent,
.hx-illu--contact.illu-playing #contact-receiver-accent {
  animation: illu-contact-receiver 1150ms ease both;
}

.illu-playing #contact-sender-accent,
.frame--contact.illu-playing #contact-sender-accent,
.hx-illu--contact.illu-playing #contact-sender-accent {
  animation: illu-contact-sender 1150ms ease both;
}

/* ---------- CV (~1680ms) — one foundation → two role versions, alternate active ---------- */
@keyframes illu-cv-left {
  0% { transform: translate(22px, 10px); }
  18%, 100% { transform: translate(0, 0); }
}

@keyframes illu-cv-right {
  0% { transform: translate(-22px, 10px); }
  18%, 100% { transform: translate(0, 0); }
}

@keyframes illu-cv-base {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12% { transform: translate(0, 2px) scale(0.98); }
  28%, 88% { transform: translate(0, 0) scale(1); }
}

@keyframes illu-cv-left-accent {
  0%, 22% { fill: #EA6D1E; }
  28%, 48% { fill: #F39A62; }
  56%, 100% { fill: #EA6D1E; }
}

@keyframes illu-cv-right-accent {
  0%, 54% { fill: #0E3A46; }
  60%, 82% { fill: #EA6D1E; }
  90%, 100% { fill: #0E3A46; }
}

@keyframes illu-cv-left-stroke {
  0%, 22% { stroke: rgba(247, 239, 230, 0.18); stroke-width: 2px; }
  28%, 48% { stroke: rgba(234, 109, 30, 0.7); stroke-width: 2.25px; }
  56%, 100% { stroke: rgba(247, 239, 230, 0.18); stroke-width: 2px; }
}

@keyframes illu-cv-right-stroke {
  0%, 54% { stroke: rgba(247, 239, 230, 0.18); stroke-width: 2px; }
  60%, 82% { stroke: rgba(234, 109, 30, 0.7); stroke-width: 2.25px; }
  90%, 100% { stroke: rgba(247, 239, 230, 0.18); stroke-width: 2px; }
}

.hx-illu--cv #cv-left,
.hx-illu--cv #cv-right,
.hx-illu--cv #cv-base {
  transform-box: fill-box;
  transform-origin: center;
}

.hx-illu--cv.illu-playing #cv-left {
  animation: illu-cv-left 1680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hx-illu--cv.illu-playing #cv-right {
  animation: illu-cv-right 1680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hx-illu--cv.illu-playing #cv-base {
  animation: illu-cv-base 1680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hx-illu--cv.illu-playing #cv-left-accent {
  animation: illu-cv-left-accent 1680ms ease both;
}

.hx-illu--cv.illu-playing #cv-right-accent {
  animation: illu-cv-right-accent 1680ms ease both;
}

.hx-illu--cv.illu-playing #cv-left > rect:first-of-type {
  animation: illu-cv-left-stroke 1680ms ease both;
}

.hx-illu--cv.illu-playing #cv-right > rect:first-of-type {
  animation: illu-cv-right-stroke 1680ms ease both;
}

/* Mobile: slightly shorter travel, same stories */
@media (max-width: 768px) {
  @keyframes illu-work-cursor {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5px, 3px); }
    22%, 34% { transform: translate(-13px, 9px); }
    48% { transform: translate(-18px, 3px); }
    58%, 78% { transform: translate(-26px, -5px); }
    90% { transform: translate(-6px, 0); }
  }

  @keyframes illu-work-card-1 {
    0%, 34% { transform: translate(0, 0) scale(1); }
    48%, 78% { transform: translate(-9px, -8px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
  }

  @keyframes illu-work-card-2 {
    0%, 34% { transform: translate(0, 0) scale(0.98); }
    48%, 78% { transform: translate(11px, 9px) scale(1); }
    100% { transform: translate(0, 0) scale(0.98); }
  }

  @keyframes illu-work-card-3 {
    0%, 50% { transform: translate(0, 0) scale(0.97); }
    65%, 78% { transform: translate(4px, -3px) scale(0.98); }
    100% { transform: translate(0, 0) scale(0.97); }
  }

  @keyframes illu-about-opt1 {
    0%, 100% { transform: translate(0, 0); }
    18%, 48% { transform: translate(9px, -9px); }
    78% { transform: translate(0, 0); }
  }

  @keyframes illu-about-opt2 {
    0%, 100% { transform: translate(0, 0); }
    18%, 48% { transform: translate(11px, 2px); }
    78% { transform: translate(0, 0); }
  }

  @keyframes illu-about-opt3 {
    0%, 100% { transform: translate(0, 0); }
    18%, 48% { transform: translate(-9px, 11px); }
    78% { transform: translate(0, 0); }
  }

  @keyframes illu-about-opt4 {
    0%, 100% { transform: translate(0, 0); }
    16% { transform: translate(-10px, -10px); }
    34%, 58% { transform: translate(-4px, -4px); }
    82% { transform: translate(0, 0); }
  }

  @keyframes illu-strengths-snap {
    0%, 100% { transform: translate(0, 0); }
    12% { transform: translate(-3.7px, 3.9px); }
    38%, 60% { transform: translate(-12.5px, 13.2px); }
    84% { transform: translate(0, 0); }
  }

  @keyframes illu-contact-letter {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(3px, -3px) rotate(2deg); }
    36%, 58% { transform: translate(16px, 11px) rotate(3deg); }
    84% { transform: translate(0, 0) rotate(0deg); }
  }

  @keyframes illu-cv-left {
    0% { transform: translate(16px, 8px); }
    18%, 100% { transform: translate(0, 0); }
  }

  @keyframes illu-cv-right {
    0% { transform: translate(-16px, 8px); }
    18%, 100% { transform: translate(0, 0); }
  }
}

/* Disable held hover transforms; JS replays the same story */
.illu-motion-ready.frame--work:hover #work-cursor,
.illu-motion-ready.frame--work:focus-visible #work-cursor,
.illu-motion-ready.frame--work:hover #work-card-1,
.illu-motion-ready.frame--work:focus-visible #work-card-1,
.illu-motion-ready.frame--work:hover #work-action-1,
.illu-motion-ready.frame--work:focus-visible #work-action-1,
.illu-motion-ready.frame--work:hover #work-action-2,
.illu-motion-ready.frame--work:focus-visible #work-action-2,
.illu-motion-ready.hx-illu--work:hover #work-cursor,
.illu-motion-ready.hx-illu--work:focus-visible #work-cursor,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-cursor,
.illu-motion-ready.hx-illu--work:hover #work-card-1,
.illu-motion-ready.hx-illu--work:focus-visible #work-card-1,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-card-1,
.illu-motion-ready.hx-illu--work:hover #work-action-1,
.illu-motion-ready.hx-illu--work:focus-visible #work-action-1,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-action-1,
.illu-motion-ready.hx-illu--work:hover #work-action-2,
.illu-motion-ready.hx-illu--work:focus-visible #work-action-2,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-action-2 {
  transform: none;
}

/* Keep rest depth on inactive cards during hover (do not flatten) */
.illu-motion-ready.frame--work:hover #work-card-2,
.illu-motion-ready.frame--work:focus-visible #work-card-2,
.illu-motion-ready.hx-illu--work:hover #work-card-2,
.illu-motion-ready.hx-illu--work:focus-visible #work-card-2,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-card-2 {
  transform: scale(0.98);
}

.illu-motion-ready.frame--work:hover #work-card-3,
.illu-motion-ready.frame--work:focus-visible #work-card-3,
.illu-motion-ready.hx-illu--work:hover #work-card-3,
.illu-motion-ready.hx-illu--work:focus-visible #work-card-3,
.work-preview:hover .illu-motion-ready.hx-illu--work #work-card-3 {
  transform: scale(0.97);
}

.illu-motion-ready.frame--about:hover #about-option-1,
.illu-motion-ready.frame--about:focus-visible #about-option-1,
.illu-motion-ready.frame--about:hover #about-option-2,
.illu-motion-ready.frame--about:focus-visible #about-option-2,
.illu-motion-ready.frame--about:hover #about-option-3,
.illu-motion-ready.frame--about:focus-visible #about-option-3,
.illu-motion-ready.frame--about:hover #about-option-4,
.illu-motion-ready.frame--about:focus-visible #about-option-4,
.illu-motion-ready.hx-illu--about:hover #about-option-1,
.home-about-card:hover .illu-motion-ready.hx-illu--about #about-option-1,
.illu-motion-ready.hx-illu--about:hover #about-option-2,
.home-about-card:hover .illu-motion-ready.hx-illu--about #about-option-2,
.illu-motion-ready.hx-illu--about:hover #about-option-3,
.home-about-card:hover .illu-motion-ready.hx-illu--about #about-option-3,
.illu-motion-ready.hx-illu--about:hover #about-option-4,
.home-about-card:hover .illu-motion-ready.hx-illu--about #about-option-4,
.illu-motion-ready.frame--strengths:hover #piece-snap,
.illu-motion-ready.frame--strengths:focus-visible #piece-snap,
.illu-motion-ready.frame--strengths:hover #strengths-structure,
.illu-motion-ready.frame--strengths:focus-visible #strengths-structure,
.portfolio-strengths-card:hover .illu-motion-ready.hx-illu--strengths #piece-snap,
.portfolio-strengths-card:focus-within .illu-motion-ready.hx-illu--strengths #piece-snap,
.portfolio-strengths-card:hover .illu-motion-ready.hx-illu--strengths #strengths-structure,
.portfolio-strengths-card:focus-within .illu-motion-ready.hx-illu--strengths #strengths-structure,
.illu-motion-ready.frame--contact:hover #contact-letter,
.illu-motion-ready.frame--contact:focus-visible #contact-letter,
.illu-motion-ready.hx-illu--contact:hover #contact-letter,
.illu-motion-ready.hx-illu--contact:focus-visible #contact-letter,
.home-contact-card:hover .illu-motion-ready.hx-illu--contact #contact-letter {
  transform: none;
}


/* ---------- WORK CATEGORY: AI PRODUCTS (~1100ms) ---------- */
@keyframes cat-ai-signal {
  0%, 8%, 100% { transform: translate(0, 0); }
  28%, 38% { transform: translate(60px, -8px); }
  58%, 82% { transform: translate(122px, 0); }
  92% { transform: translate(122px, 0); }
}
@keyframes cat-ai-slot-1 {
  0%, 12%, 100% { fill: #0E3A46; }
  16%, 26% { fill: #EA6D1E; }
  34% { fill: #0E3A46; }
}
@keyframes cat-ai-slot-2 {
  0%, 28%, 100% { fill: #0E3A46; }
  34%, 48% { fill: #EA6D1E; }
  56% { fill: #0E3A46; }
}
@keyframes cat-ai-slot-3 {
  0%, 56%, 100% { fill: #0E3A46; }
  62%, 86% { fill: #EA6D1E; }
  94% { fill: #F39A62; }
}
@keyframes cat-ai-state-2 {
  0%, 24%, 100% { transform: translate(0, 0); }
  34%, 48% { transform: translate(0, -3px); }
  56% { transform: translate(0, 0); }
}
@keyframes cat-ai-state-3 {
  0%, 54%, 100% { transform: translate(0, 0) scale(1); }
  66%, 86% { transform: translate(2px, -2px) scale(1.03); }
  94% { transform: translate(0, 0) scale(1); }
}

.illu-playing #cat-ai-signal,
.hx-illu--cat-ai.illu-playing #cat-ai-signal {
  animation: cat-ai-signal 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-ai-slot-1,
.hx-illu--cat-ai.illu-playing #cat-ai-slot-1 {
  animation: cat-ai-slot-1 1100ms ease both;
}
.illu-playing #cat-ai-slot-2,
.hx-illu--cat-ai.illu-playing #cat-ai-slot-2 {
  animation: cat-ai-slot-2 1100ms ease both;
}
.illu-playing #cat-ai-slot-3,
.hx-illu--cat-ai.illu-playing #cat-ai-slot-3 {
  animation: cat-ai-slot-3 1100ms ease both;
}
.illu-playing #cat-ai-state-2,
.hx-illu--cat-ai.illu-playing #cat-ai-state-2,
.illu-playing #cat-ai-state-3,
.hx-illu--cat-ai.illu-playing #cat-ai-state-3 {
  transform-box: fill-box;
  transform-origin: center;
}
.illu-playing #cat-ai-state-2,
.hx-illu--cat-ai.illu-playing #cat-ai-state-2 {
  animation: cat-ai-state-2 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-ai-state-3,
.hx-illu--cat-ai.illu-playing #cat-ai-state-3 {
  animation: cat-ai-state-3 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- WORK CATEGORY: CONVERSATION / WORKFLOW (~1150ms) ---------- */
@keyframes cat-flow-token {
  0%, 8%, 100% { transform: translate(0, 0); }
  28%, 40% { transform: translate(63px, -4px); }
  60%, 80% { transform: translate(126px, 0); }
  92% { transform: translate(126px, 0); }
}
@keyframes cat-flow-stage-1 {
  0%, 10%, 100% { transform: translate(0, 0); }
  14%, 24% { transform: translate(0, -4px); }
  32% { transform: translate(0, 0); }
}
@keyframes cat-flow-stage-2 {
  0%, 28%, 100% { transform: translate(0, 0); }
  34%, 48% { transform: translate(0, -4px); }
  56% { transform: translate(0, 0); }
}
@keyframes cat-flow-stage-3 {
  0%, 58%, 100% { transform: translate(0, 0); }
  66%, 82% { transform: translate(0, -4px); }
  90% { transform: translate(0, 0); }
}
@keyframes cat-flow-accent-1 {
  0%, 10%, 100% { fill: #0E3A46; }
  14%, 24% { fill: #EA6D1E; }
}
@keyframes cat-flow-accent-2 {
  0%, 28%, 100% { fill: #0E3A46; }
  34%, 48% { fill: #EA6D1E; }
}
@keyframes cat-flow-accent-3 {
  0%, 58%, 100% { fill: #0E3A46; }
  66%, 86% { fill: #EA6D1E; }
}

.illu-playing #cat-flow-token,
.hx-illu--cat-flow.illu-playing #cat-flow-token {
  animation: cat-flow-token 1150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-flow-stage-1,
.illu-playing #cat-flow-stage-2,
.illu-playing #cat-flow-stage-3,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-1,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-2,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-3 {
  transform-box: fill-box;
  transform-origin: center;
}
.illu-playing #cat-flow-stage-1,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-1 {
  animation: cat-flow-stage-1 1150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-flow-stage-2,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-2 {
  animation: cat-flow-stage-2 1150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-flow-stage-3,
.hx-illu--cat-flow.illu-playing #cat-flow-stage-3 {
  animation: cat-flow-stage-3 1150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-flow-accent-1,
.hx-illu--cat-flow.illu-playing #cat-flow-accent-1 {
  animation: cat-flow-accent-1 1150ms ease both;
}
.illu-playing #cat-flow-accent-2,
.hx-illu--cat-flow.illu-playing #cat-flow-accent-2 {
  animation: cat-flow-accent-2 1150ms ease both;
}
.illu-playing #cat-flow-accent-3,
.hx-illu--cat-flow.illu-playing #cat-flow-accent-3 {
  animation: cat-flow-accent-3 1150ms ease both;
}

/* ---------- WORK CATEGORY: STRATEGY / EVALUATION (~1200ms) ---------- */
/* inspect → compare → brief reorder → prioritise → settle */
@keyframes cat-eval-frag-1 {
  0%, 6% { transform: translate(8px, 8px); }
  16%, 22% { transform: translate(20px, 0); }
  30%, 52% { transform: translate(8px, 8px); }
  68%, 100% { transform: translate(0, 0); }
}
@keyframes cat-eval-frag-2 {
  0%, 28% { transform: translate(-6px, 4px); }
  38%, 44% { transform: translate(-18px, 10px); }
  52%, 58% { transform: translate(-6px, 4px); }
  64% { transform: translate(4px, 14px); }
  78%, 100% { transform: translate(0, 0); }
}
@keyframes cat-eval-frag-3 {
  0%, 58% { transform: translate(10px, -6px); }
  64% { transform: translate(-4px, -16px); }
  78%, 100% { transform: translate(0, 0); }
}
@keyframes cat-eval-marker {
  0%, 8% { transform: translate(0, 42px); }
  18%, 26% { transform: translate(0, 0); }
  36%, 48% { transform: translate(0, 42px); }
  58%, 100% { transform: translate(0, 0); }
}
@keyframes cat-eval-dot-1 {
  0%, 56% { fill: #0E3A46; }
  64%, 100% { fill: #EA6D1E; }
}

.illu-playing #cat-eval-marker,
.hx-illu--cat-eval.illu-playing #cat-eval-marker {
  animation: cat-eval-marker 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-eval-frag-1,
.hx-illu--cat-eval.illu-playing #cat-eval-frag-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-eval-frag-1 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-eval-frag-2,
.hx-illu--cat-eval.illu-playing #cat-eval-frag-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-eval-frag-2 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-eval-frag-3,
.hx-illu--cat-eval.illu-playing #cat-eval-frag-3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: cat-eval-frag-3 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.illu-playing #cat-eval-dot-1,
.hx-illu--cat-eval.illu-playing #cat-eval-dot-1 {
  animation: cat-eval-dot-1 1200ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .illu-playing #work-cursor,
  .illu-playing #work-card-1,
  .illu-playing #work-card-2,
  .illu-playing #work-card-3,
  .illu-playing #work-action-1,
  .illu-playing #work-action-2,
  .illu-playing #about-option-1,
  .illu-playing #about-option-2,
  .illu-playing #about-option-3,
  .illu-playing #about-option-4,
  .illu-playing #about-node,
  .illu-playing #about-path-4,
  .illu-playing #about-option-4 rect:nth-of-type(2),
  .illu-playing #piece-snap,
  .illu-playing #strengths-structure,
  .illu-playing #contact-letter,
  .illu-playing #contact-receiver-accent,
  .illu-playing #contact-sender-accent {
    animation: none !important;
  }

  .illu-playing #cv-left,
  .illu-playing #cv-right,
  .illu-playing #cv-base,
  .illu-playing #cv-left-accent,
  .illu-playing #cv-right-accent,
  .illu-playing #cv-left > rect:first-of-type,
  .illu-playing #cv-right > rect:first-of-type {
    animation: none !important;
  }

  .illu-playing #cat-ai-signal,
  .illu-playing #cat-ai-slot-1,
  .illu-playing #cat-ai-slot-2,
  .illu-playing #cat-ai-slot-3,
  .illu-playing #cat-ai-state-2,
  .illu-playing #cat-ai-state-3,
  .illu-playing #cat-flow-token,
  .illu-playing #cat-flow-stage-1,
  .illu-playing #cat-flow-stage-2,
  .illu-playing #cat-flow-stage-3,
  .illu-playing #cat-flow-accent-1,
  .illu-playing #cat-flow-accent-2,
  .illu-playing #cat-flow-accent-3,
  .illu-playing #cat-eval-marker,
  .illu-playing #cat-eval-frag-1,
  .illu-playing #cat-eval-frag-2,
  .illu-playing #cat-eval-frag-3,
  .illu-playing #cat-eval-dot-1 {
    animation: none !important;
  }

  /* Static active project only — subtle control color */
  .frame--work #work-action-1,
  .hx-illu--work #work-action-1 {
    fill: #F39A62;
  }
}