:root.eyes-are-tracking .glyph-pupil {
  animation: none !important;
  transform: translate3d(var(--eye-track-x, 0px), var(--eye-track-y, 0px), 0) !important;
  transition: transform 82ms cubic-bezier(.2, .72, .25, 1);
  will-change: transform;
}
:root.eyes-are-tracking .glyph-catchlight {
  animation: none !important;
  transform: translate3d(var(--eye-track-x, 0px), var(--eye-track-y, 0px), 0) !important;
  transition: transform 82ms cubic-bezier(.2, .72, .25, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
:root.eyes-are-tracking .glyph-pupil {
    transition: none !important;
  }
:root.eyes-are-tracking .glyph-catchlight {
    transition: none !important;
  }
}

/* The hero behaves like a tiny theatrical stage: elastic entrances, broad
   suspended motion, then a stronger reaction when the viewer leans in. */
:root .approved-stage__balloon-arrival {
  animation: balloon-theatrical-arrival 1.35s cubic-bezier(.16, .9, .2, 1.22) .52s both;
}

:root .approved-stage__balloon-float {
  animation: balloon-theatrical-float 2.35s ease-in-out 1.62s infinite both;
}

:root .approved-stage:hover .approved-stage__balloon-float {
  animation: balloon-theatrical-reaction 1.12s cubic-bezier(.2, .82, .24, 1) both;
}

:root .approved-stage__ask {
  animation:
    bubble-theatrical-arrival .72s cubic-bezier(.15, .88, .2, 1.3) .78s both,
    bubble-theatrical-hover 3s ease-in-out 1.5s infinite;
}

:root .approved-stage__aha {
  animation:
    aha-theatrical-arrival .58s cubic-bezier(.12, .9, .18, 1.35) 1.12s both,
    aha-theatrical-pulse 2.25s ease-in-out 1.7s infinite;
}

@keyframes balloon-theatrical-arrival {
  0% { opacity: 0; transform: translateY(118px) scale(.42, 1.28) rotate(9deg); }
  48% { opacity: 1; transform: translateY(-24px) scale(1.12, .88) rotate(-5deg); }
  70% { transform: translateY(10px) scale(.94, 1.07) rotate(2.5deg); }
  86% { transform: translateY(-6px) scale(1.035, .97) rotate(-1.2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes balloon-theatrical-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(-1deg); }
  28% { transform: translate(-8px, -19px) scale(1.035, .97) rotate(-4deg); }
  56% { transform: translate(5px, -8px) scale(.98, 1.025) rotate(2.5deg); }
  78% { transform: translate(9px, -24px) scale(1.025, .98) rotate(4deg); }
}

@keyframes balloon-theatrical-reaction {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(-34px) scale(1.11, .91) rotate(-6deg); }
  58% { transform: translateY(5px) scale(.93, 1.08) rotate(3.5deg); }
  78% { transform: translateY(-12px) scale(1.04, .97) rotate(-2deg); }
}

@keyframes bubble-theatrical-arrival {
  0% { opacity: 0; transform: translateY(42px) rotate(-22deg) scale(.18); }
  58% { opacity: 1; transform: translateY(-12px) rotate(8deg) scale(1.16); }
  78% { transform: translateY(5px) rotate(-7deg) scale(.94); }
  100% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); }
}

@keyframes bubble-theatrical-hover {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  45% { translate: -5px -17px; rotate: -8deg; }
  70% { translate: 5px -8px; rotate: 5deg; }
}

@keyframes aha-theatrical-arrival {
  0% { opacity: 0; transform: translateY(28px) rotate(-22deg) scale(.1); }
  62% { opacity: 1; transform: translateY(-8px) rotate(7deg) scale(1.25); }
  82% { transform: translateY(3px) rotate(-10deg) scale(.92); }
  100% { opacity: 1; transform: translateY(0) rotate(-6deg) scale(1); }
}

@keyframes aha-theatrical-pulse {
  0%, 100% { translate: 0 0; scale: 1; rotate: 0deg; }
  42% { translate: 2px -10px; scale: 1.11 .94; rotate: 5deg; }
  62% { translate: -2px -4px; scale: .96 1.06; rotate: -4deg; }
}

@media (prefers-reduced-motion: reduce) {
:root .approved-stage__balloon-arrival {
    animation: none !important;
    opacity: 1;
    translate: 0;
    rotate: 0deg;
    scale: 1;
  }
:root .approved-stage__balloon-float {
    animation: none !important;
    opacity: 1;
    translate: 0;
    rotate: 0deg;
    scale: 1;
  }
:root .approved-stage__ask {
    animation: none !important;
    opacity: 1;
    translate: 0;
    rotate: 0deg;
    scale: 1;
  }
:root .approved-stage__aha {
    animation: none !important;
    opacity: 1;
    translate: 0;
    rotate: 0deg;
    scale: 1;
  }
}