/* ============================================================
   YITO — Animations & keyframes
   ============================================================ */

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,224,200,.55)}
  70%{box-shadow:0 0 0 12px rgba(34,224,200,0)}
  100%{box-shadow:0 0 0 0 rgba(34,224,200,0)}
}
@keyframes scrollcue{
  0%{opacity:0; transform:translateY(-4px)}
  40%{opacity:1}
  100%{opacity:0; transform:translateY(12px)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Scroll-reveal (driven by GSAP; CSS fallback for no-JS) */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in-view,
.no-js [data-reveal]{opacity:1; transform:none}

/* Hero load animation (GSAP overrides; fallback below) */
.anim-hero{opacity:0; transform:translateY(20px)}
.hero.loaded .anim-hero{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease)}
.hero.loaded .anim-hero[data-anim="2"]{transition-delay:.1s}
.hero.loaded .anim-hero[data-anim="3"]{transition-delay:.2s}
.hero.loaded .anim-hero[data-anim="4"]{transition-delay:.3s}
.hero.loaded .anim-hero[data-anim="5"]{transition-delay:.4s}
.hero.loaded .anim-hero[data-anim="6"]{transition-delay:.55s}

/* Step transitions */
.survey-step{animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0; transform:translateX(28px)}to{opacity:1; transform:none}}
.survey-step.leaving{animation:stepOut .3s var(--ease) forwards}
@keyframes stepOut{to{opacity:0; transform:translateX(-24px)}}

/* Selection ripple/glow */
.opt-card.just-selected{animation:popglow .45s var(--ease)}
@keyframes popglow{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}

/* Floating decorative mesh accent */
.float-accent{animation:floaty 6s ease-in-out infinite}

/* ============================================================
   Ambient section decor (v4) — subtle, premium, theme-led
   ============================================================ */
/* Data travelling along network lines */
@keyframes dashflow{to{stroke-dashoffset:-60}}
/* Slow node breathing */
@keyframes netpulse{0%,100%{opacity:.35}50%{opacity:.9}}
/* Data packets gliding left → right */
@keyframes packetmove{
  0%{transform:translateX(-6%); opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateX(106%); opacity:0}
}
/* Radar / ping ring */
@keyframes radarping{
  0%{transform:scale(.2); opacity:.55}
  70%{opacity:.12}
  100%{transform:scale(1); opacity:0}
}
/* Floating + rotating geometric shapes */
@keyframes floatRot{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-22px) rotate(180deg)}
  100%{transform:translateY(0) rotate(360deg)}
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
/* Slow diagonal drift for grid backdrop */
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:60px 60px,60px 60px}}
/* Gentle orb float with horizontal sway */
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
/* Large aurora blobs drifting slowly for colour depth */
@keyframes auraDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6vw,4vw) scale(1.12)}
  66%{transform:translate(-5vw,2vw) scale(.92)}
}
/* Floating decorative shapes — three distinct paths so they don't move in sync */
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-32px) rotate(20deg)}}
@keyframes floatB{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(28px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes floatC{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(20px,-26px) rotate(-180deg)}100%{transform:translate(0,0) rotate(-360deg)}}

/* ============================================================
   Reduced motion — disable heavy/looping animation
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important; transform:none!important}
  .anim-hero{opacity:1!important; transform:none!important}
  .pulse-dot,.scroll-cue span{animation:none!important}
}