/* ---------- Impact cards (Figma: Mave 1124:289166, Commenda 1005:578630) ----------
   Each card is placed with its exact Figma transform; its text and
   illustration sit inside it in the card's own (unrotated) coordinates. */
.stage--case .imp-card {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
}
.stage--case .imp-card > .t { position: absolute; }
.imp-card__bg { position: absolute; display: block; pointer-events: none; user-select: none; max-width: none; }
.stage--case .imp-card a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.stage--case .imp-card a:hover { text-underline-offset: 4px; }

/* Commenda: soft rounded cards with a dotted edge */
.imp-card--soft { pointer-events: auto; border-radius: 16px; overflow: hidden; }   /* things that leave the card disappear at its edge */
.imp-ill { position: absolute; left: 21px; top: 21px; width: 100px; height: 100px; overflow: visible; }
.imp-ill * { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---------- Illustrations: one small, gentle motion per deliberate hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* emails: the letters take off one by one and fly out of the card,
     then quietly settle back into the stack */
  .is-play .env { animation: imp-env 1700ms both; animation-delay: calc(var(--i) * 130ms); }
  @keyframes imp-env {
    0%   { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4); }
    12%  { transform: translate(-2px, 2px) rotate(1deg); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
    44%  { transform: translate(110px, -150px) rotate(-16deg); opacity: 1; }
    45%  { transform: translate(110px, -150px) rotate(-16deg); opacity: 0; }
    60%  { transform: translate(0, 10px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
    100% { transform: none; opacity: 1; }
  }

  /* calm: the rings breathe outward, inside first */
  .is-play .ring { animation: imp-ring 900ms ease-in-out both; animation-delay: calc(var(--i) * 55ms); }
  @keyframes imp-ring { 0%, 100% { transform: none; } 45% { transform: scale(1.07); } }

  /* merged: every dot gathers in the middle and becomes one plum dot, then they part again */
  .is-play .dot { animation: imp-dot 1500ms both; animation-delay: calc(var(--i) * 18ms); }
  @keyframes imp-dot {
    0%   { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
    38%  { transform: translate(var(--dx), var(--dy)); opacity: 1; }
    46%  { transform: translate(var(--dx), var(--dy)); opacity: 0; }
    70%  { transform: translate(var(--dx), var(--dy)); opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.3, 0.5, 1); }
    74%  { opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
  .imp-one { opacity: 0; transform: scale(0.4); }
  .is-play .imp-one { animation: imp-one 1500ms both; }
  @keyframes imp-one {
    0%, 36% { opacity: 0; transform: scale(0.4); }
    46%     { opacity: 1; transform: scale(1.15); animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1); }
    52%, 68%{ opacity: 1; transform: scale(1); }
    76%, 100% { opacity: 0; transform: scale(0.4); }
  }

  /* chat: a little typing wave, then the sparks pop */
  .is-play .tdot { animation: imp-type 520ms ease-in-out both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes imp-type { 0%, 100% { transform: none; } 45% { transform: translateY(-2.5px); } }
  .is-play .spark { animation: imp-spark 560ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms both; }
  @keyframes imp-spark { 0%, 100% { transform: none; } 45% { transform: scale(1.25) rotate(-8deg); } }

  /* less waiting: the runner strides forward as the backdrop slides by */
  .is-play .runner { animation: imp-run 760ms cubic-bezier(0.3, 0.7, 0.3, 1) both; }
  @keyframes imp-run { 0%, 100% { transform: none; } 30% { transform: translate(2px, -2px); } 55% { transform: translate(4px, 0); } }
  .is-play .track { animation: imp-track 760ms cubic-bezier(0.3, 0.7, 0.3, 1) both; }
  @keyframes imp-track { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }
}