/* =================================================================
   animations.css — every @keyframes and every `animation:`
   declaration in the project, in one place.

   Components own structure and colour; this file owns motion. That
   split means a redesign can rework the visuals in components.css
   without hunting for keyframes, and the two reduced-motion blocks
   at the bottom can switch all of it off at once.

   One keyframe lives outside this file: `hfall`, the attic heat
   arrows, is injected at runtime from animations.js because it is
   applied inside generated SVG markup.

   Must load AFTER components.css.
   ================================================================= */

/* -----------------------------------------------------------------
   AMBIENT — the sky
   ----------------------------------------------------------------- */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120vw)}}
.sky .c1{animation:drift 46s linear infinite}
.sky .c2{animation:drift 62s linear infinite reverse}

/* -----------------------------------------------------------------
   SCREEN TRANSITIONS
   Children stagger in, capped at the 7th child so long screens don't
   trail on for a second and a half.
   ----------------------------------------------------------------- */
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.screen.on{animation:pop .42s var(--ease)}
.screen.on > *{animation:rise-in .5s var(--ease) both}
.screen.on > *:nth-child(2){animation-delay:.06s}
.screen.on > *:nth-child(3){animation-delay:.12s}
.screen.on > *:nth-child(4){animation-delay:.18s}
.screen.on > *:nth-child(5){animation-delay:.24s}
.screen.on > *:nth-child(6){animation-delay:.3s}
.screen.on > *:nth-child(n+7){animation-delay:.36s}

/* also used by the spot detail panels and the personalize popover */
.spotbody.on{animation:pop .3s ease}
.twpanel.open{animation:pop .3s var(--ease)}

/* -----------------------------------------------------------------
   PROGRESS BAR — the current step breathes
   ----------------------------------------------------------------- */
@keyframes stepglow{0%,100%{box-shadow:0 0 0 0 rgba(242,106,33,.55)}50%{box-shadow:0 0 0 6px rgba(242,106,33,0)}}
#steps .now{animation:stepglow 1.6s ease-in-out infinite}

/* -----------------------------------------------------------------
   HERO — JP floats, hotspots pulse
   ----------------------------------------------------------------- */
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.jphero img{animation:heroFloat 4.5s ease-in-out infinite}

@keyframes mhpulse{0%{opacity:.85;transform:scale(.6)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.mh .mh-spot .ring{animation:mhpulse 2s ease-out infinite;transform-box:fill-box;transform-origin:center}

/* -----------------------------------------------------------------
   JP — idle breathing, the nod on arrival, the ring while talking,
   and the speech bubble pop
   ----------------------------------------------------------------- */
@keyframes jpbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes jpnod{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes jpring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.28)}}
@keyframes jpop{0%{transform:scale(.94);opacity:.4}100%{transform:none;opacity:1}}

img.jp{animation:jpbreathe 3.2s ease-in-out infinite}
img.jp.wave{animation:jpnod 1.8s ease-in-out infinite}
.jpav.talking::after{animation:jpring .9s ease-out 2}
.jpbub.bpop{animation:jpop .32s cubic-bezier(.2,1.2,.4,1)}

/* -----------------------------------------------------------------
   TROUBLE-SPOT PINS
   ----------------------------------------------------------------- */
@keyframes pulse{0%{r:13;opacity:.45}70%{r:26;opacity:0}100%{opacity:0}}
.pin .pulse{animation:pulse 2.1s ease-out infinite}

/* -----------------------------------------------------------------
   BLOW BUTTON — the gust icon shakes while held
   ----------------------------------------------------------------- */
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(2px,-1px) rotate(6deg)}
  75%{transform:translate(-2px,1px) rotate(-6deg)}}
.blowbtn.on .lbl .ic{animation:shake .16s linear infinite}

/* -----------------------------------------------------------------
   SCORE POPS — "+5 R" floating up and fading
   ----------------------------------------------------------------- */
@keyframes rise{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-8px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-62px) scale(1)}}
.pop{animation:rise 1.05s cubic-bezier(.2,.8,.3,1) forwards}

/* -----------------------------------------------------------------
   BUTTON SHINE — the sweep across every primary button
   ----------------------------------------------------------------- */
@keyframes shine{0%,72%{left:-70%}100%{left:130%}}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite}
.btn.ghost::after{display:none}

/* =================================================================
   MOTION OPT-OUTS

   Two independent switches:
     .calm      — the customer chose "Calm" in the personalize panel
     reduce     — their OS asks for reduced motion
   The JS entry points for confetti, pops and number tweens check the
   OS setting too, so nothing is merely hidden — it never starts.
   ================================================================= */
.calm .btn::after{display:none}
.calm .jphero img,.calm img.jp,.calm #steps .now{animation:none !important}
.calm .mh .mh-spot .ring{animation:none;opacity:.5;transform:scale(.8)}

@media (prefers-reduced-motion:reduce){
  .screen.on{animation:none}
  img.jp.wave{animation:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}