/* =============================================================================
   SMOOTH MOTION  —  replaces every scroll-scrubbed GSAP tween on the site.

   Why: scrubbed animation recomputes transforms from scrollY on each scroll
   event. Below 60fps that reads as stepping/jitter, which is exactly the
   "glitching" reported on the robot, the paint bursts, the blueprint bars, the
   FAQ cube and the form glare.

   Instead every element animates ONCE from a resting state to a finished state
   when it enters the viewport (a single IntersectionObserver adds .in-view).
   These are plain transform/opacity transitions, so the compositor runs them
   off the main thread at a steady 60fps no matter how heavy the page is, and a
   slow scroll can never desynchronise them.

   Rules kept throughout:
   - transform + opacity only (never width/height/top/left)
   - no permanent will-change (it pins GPU layers; that cost 28 layers before)
   - everything is visible by default; .js-motion is only added once this
     script is confirmed running, so nothing can be stranded invisible
   ========================================================================== */

/* ---------- base: visible unless JS is alive to animate it ---------- */
.js-motion .anim{opacity:0;will-change:transform,opacity}
.js-motion .anim.in-view{opacity:1;will-change:auto}
.anim{transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}

/* rise */
.js-motion .anim-rise{transform:translate3d(0,26px,0)}
.js-motion .anim-rise.in-view{transform:none}
/* settle (small, for mockups) */
.js-motion .anim-settle{transform:translate3d(0,14px,0) scale(.985)}
.js-motion .anim-settle.in-view{transform:none}
/* slide from the right (chat panel docking) */
.js-motion .anim-dock{transform:translate3d(42px,-26px,0) scale(.95)}
.js-motion .anim-dock.in-view{transform:none;transition-duration:.8s}
/* blueprint pieces snapping together */
.js-motion .anim-snap-top{transform:translate3d(0,-46px,0);opacity:0}
.js-motion .anim-snap-front{transform:translate3d(34px,0,0);opacity:0}
.js-motion .anim-snap-wall{transform:translate3d(0,-30px,0);opacity:0}
.js-motion .anim-snap-top.in-view,
.js-motion .anim-snap-front.in-view,
.js-motion .anim-snap-wall.in-view{transform:none;opacity:1}
/* console stack */
.js-motion .anim-stack{transform:translate3d(0,24px,0) rotate(-6deg)}
.js-motion .anim-stack.in-view{transform:translate3d(0,0,0) rotate(-12deg)}
/* staggering: each child a beat later, capped so nothing waits too long */
.js-motion .anim[data-i="1"]{transition-delay:.07s}
.js-motion .anim[data-i="2"]{transition-delay:.14s}
.js-motion .anim[data-i="3"]{transition-delay:.21s}
.js-motion .anim[data-i="4"]{transition-delay:.28s}
.js-motion .anim[data-i="5"]{transition-delay:.35s}

/* ---------- section progress rails ---------- */
.js-motion .section-progress{transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-motion .section-progress.in-view{transform:scaleY(1)}

/* ---------- HERO: shooting stars -------------------------------------------
   Pure CSS loop, top-left -> bottom-right, so they play smoothly on their own
   clock instead of being scrubbed by scroll position.                        */
.shooting-star{
  position:absolute;width:150px;height:2px;border-radius:100%;
  background:linear-gradient(90deg,transparent,#85baff66,#eaf5ff);
  transform:rotate(34deg);transform-origin:right center;
  opacity:0;pointer-events:none;
  animation:shoot 7s cubic-bezier(.3,.1,.5,1) infinite}
.shooting-star::after{content:"";position:absolute;right:0;top:-1px;
  width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px #98c8ff}
.shooting-star:nth-child(1){animation-delay:0s}
.shooting-star:nth-child(2){animation-delay:.9s}
.shooting-star:nth-child(3){animation-delay:1.9s}
.shooting-star:nth-child(4){animation-delay:2.7s}
.shooting-star:nth-child(5){animation-delay:3.6s}
.shooting-star:nth-child(6){animation-delay:4.4s}
.shooting-star:nth-child(7){animation-delay:5.2s}
.shooting-star:nth-child(8){animation-delay:6.1s}
@keyframes shoot{
  0%{opacity:0;transform:rotate(34deg) translate3d(0,0,0)}
  6%{opacity:.95}
  55%{opacity:.75}
  70%{opacity:0;transform:rotate(34deg) translate3d(78vw,0,0)}
  100%{opacity:0;transform:rotate(34deg) translate3d(78vw,0,0)}
}
/* stars pause when the hero scrolls away so they cost nothing off-screen */
.vhero:not(.hero-live) .shooting-star{animation-play-state:paused}

/* ---------- HERO: robot ------------------------------------------------------
   Drifts gently right/down as the hero leaves, but never fades out — it stayed
   solid in the reference and disappearing read as a bug.                      */
.robot-figure{transition:transform 1.2s cubic-bezier(.33,.1,.3,1)}
@media(min-width:761px){
  .vhero.hero-passed .robot-figure{transform:translateX(-50%) translate3d(54px,46px,0) rotate(2deg)}
}

/* ---------- paint bursts behind each product --------------------------------
   Restored: they fade+scale in once when their product scrolls into view, then
   keep a very slow independent drift. Not scroll-linked, so never steps.      */
.signal-bloom{opacity:0;transform:scale(.9) rotate(-10deg);
  transition:opacity 1s ease-out,transform 1.4s cubic-bezier(.22,.61,.36,1)}
.signal-bloom.in-view{opacity:1;transform:scale(1) rotate(0deg)}
.signal-bloom.in-view i{animation:bloom-drift 18s ease-in-out infinite alternate}
.signal-bloom i:nth-child(2){animation-delay:-3.5s}
.signal-bloom i:nth-child(3){animation-delay:-7s}
.signal-bloom i:nth-child(4){animation-delay:-10.5s}
.signal-bloom i:nth-child(5){animation-delay:-14s}
@keyframes bloom-drift{
  from{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.97)}
  to{transform:translate(-50%,-50%) rotate(calc(var(--r,0deg) + 10deg)) scale(1.05)}
}
/* give each splat its own resting angle so they read as separate bursts */
.product-stage>.signal-bloom i:nth-child(1){--r:0deg}
.product-stage>.signal-bloom i:nth-child(2){--r:28deg}
.product-stage>.signal-bloom i:nth-child(3){--r:75deg}
.product-stage>.signal-bloom i:nth-child(4){--r:140deg}
.product-stage>.signal-bloom i:nth-child(5){--r:210deg}

/* ---------- FAQ orb + orbit, form glare: slow self-running loops ---------- */
.answer-orb{animation:orb-float 9s ease-in-out infinite alternate}
@keyframes orb-float{from{transform:translateY(10px) rotate(-6deg)}to{transform:translateY(-10px) rotate(6deg)}}
.answer-orbit{animation:orbit-turn 40s linear infinite}
.answer-orbit.second{animation-duration:55s;animation-direction:reverse}
@keyframes orbit-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.marble-glint{animation:glint 7s ease-in-out infinite}
@keyframes glint{
  0%{transform:translateX(-60%) rotate(12deg);opacity:0}
  12%{opacity:1}
  55%{opacity:.85}
  70%,100%{transform:translateX(190%) rotate(12deg);opacity:0}
}

/* ---------- reduced motion: everything static ---------- */
@media(prefers-reduced-motion:reduce){
  .js-motion .anim,
  .js-motion .anim.in-view,
  .signal-bloom,.signal-bloom.in-view{opacity:1!important;transform:none!important;transition:none!important}
  .shooting-star,.answer-orb,.answer-orbit,.marble-glint,.signal-bloom i,.robot-figure{animation:none!important;transition:none!important}
  .js-motion .section-progress{transform:scaleY(1)!important}
}