/* ==========================================================================
   AD PHASE — Animation system
   One orchestrated hero sequence + restrained scroll reveals + hover
   micro-interactions. Everything here is skipped under reduced motion.
   ========================================================================== */

@keyframes spin{ to{ transform: rotate(360deg); } }

@keyframes bgShift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-2%, 2%) scale(1.05); }
}

@keyframes starTwinkle{
  0%{ opacity:.4; }
  50%{ opacity:.75; }
  100%{ opacity:.5; }
}

@keyframes heroPhotoDrift{
  0%{ transform: scale(1.02) translateX(0); }
  100%{ transform: scale(1.08) translateX(-1.5%); }
}

@keyframes cueDrop{
  0%{ top:-100%; }
  100%{ top:100%; }
}

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.float{ animation: floatY 6s ease-in-out infinite; }

@keyframes floatSmall{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* ---------------------------------------------- back-to-top: rocket launch -- */
@keyframes bttShake{
  0%,100%{ transform: translateY(0) translateX(0) rotate(0deg); }
  20%{ transform: translateY(0) translateX(-1.5px) rotate(-2deg); }
  40%{ transform: translateY(-1px) translateX(1.5px) rotate(2deg); }
  60%{ transform: translateY(0) translateX(-1px) rotate(-1.5deg); }
  80%{ transform: translateY(-1px) translateX(1px) rotate(1.5deg); }
}
@keyframes bttLaunch{
  0%{ transform: translateY(0) scale(1); opacity:1; }
  12%{ transform: translateY(-8px) scale(1.04); opacity:1; }
  70%{ opacity:1; }
  100%{ transform: translateY(-640px) scale(.32); opacity:0; }
}
@keyframes bttFlameIn{
  0%{ opacity:0; transform: translateX(-50%) scaleY(0); }
  100%{ opacity:1; transform: translateX(-50%) scaleY(1); }
}
@keyframes bttFlameLaunch{
  0%{ opacity:1; transform: translateX(-50%) scaleY(1) translateY(0); }
  100%{ opacity:0; transform: translateX(-50%) scaleY(1.7) translateY(-600px); }
}
@keyframes bttTrail{
  0%{ opacity:0; transform: translateX(-50%) scaleY(0); }
  15%{ opacity:.9; }
  100%{ opacity:0; transform: translateX(-50%) scaleY(1); }
}
@keyframes bttGlowPulse{
  0%{ opacity:1; transform:scale(1); }
  40%{ opacity:1.6; transform:scale(1.35); }
  100%{ opacity:1; transform:scale(1); }
}

@keyframes pulseDot{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

/* ------------------------------------------------------ scroll reveals -- */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

[data-reveal-group] > *{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal-group].is-visible > *{ opacity:1; transform:none; }
[data-reveal-group].is-visible > *:nth-child(1){ transition-delay: .04s; }
[data-reveal-group].is-visible > *:nth-child(2){ transition-delay: .10s; }
[data-reveal-group].is-visible > *:nth-child(3){ transition-delay: .16s; }
[data-reveal-group].is-visible > *:nth-child(4){ transition-delay: .22s; }
[data-reveal-group].is-visible > *:nth-child(5){ transition-delay: .28s; }
[data-reveal-group].is-visible > *:nth-child(6){ transition-delay: .34s; }
[data-reveal-group].is-visible > *:nth-child(7){ transition-delay: .40s; }

[data-reveal-scale]{
  opacity:0;
  transform: scale(.94);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal-scale].is-visible{ opacity:1; transform:none; }

/* ----------------------------------------------------- counter number -- */
[data-counter]{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- hero entry -- */
/* Staggered cinematic entrance: atmosphere → rocket → cards → text → CTA.
   Layers start hidden and the .hero-ready class (added by JS on load) plays
   them in. The rocket's autonomous cruise animation is separate and keeps
   running underneath the entrance transform via the wrapper layer. */
.hero-title .reveal-line > span{
  transform: translateY(115%);
  transition: transform 1s var(--ease-out);
}
.hero-ready .hero-title .reveal-line > span{ transform:none; }

.hero .eyebrow, .hero .hero-lead, .hero .hero-ctas, .hero .hero-scroll-cue{
  opacity:0; transform: translateY(16px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero-ready .eyebrow{ opacity:1; transform:none; transition-delay:.45s; }
.hero-ready .hero-lead{ opacity:1; transform:none; transition-delay:.72s; }
.hero-ready .hero-ctas{ opacity:1; transform:none; transition-delay:.86s; }
.hero-ready .hero-scroll-cue{ opacity:1; transform:none; transition-delay:1.1s; }

/* background layers ease in first */
.hero-atmos, .hero-grid, .hero .starfield, .hero-trail{
  opacity:0; transition: opacity 1s var(--ease-out);
}
.hero-ready .hero-atmos{ opacity:1; }
.hero-ready .hero-grid{ opacity:.5; transition-delay:.15s; }
.hero-ready .starfield{ opacity:.55; transition-delay:.2s; }
.hero-ready .starfield.layer-2{ opacity:.32; }
.hero-ready .hero-trail{ opacity:1; transition-delay:.25s; }

/* rocket slides into its depth position */
/* rocket layer fades in on entrance; its position is driven entirely by the
   JS flight (transform), so the entrance must NOT touch transform here */
.hero-rocket-layer{ opacity:0; transition: opacity 1.2s var(--ease-out); transition-delay:.15s; }
.hero-ready .hero-rocket-layer{ opacity:1; }

/* cards appear with a stagger */
.hero-card{ opacity:0; transform: translateY(24px) scale(.96); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.hero-ready .hero-card{ opacity:1; transform:none; }
.hero-ready .hc-analytics{ transition-delay:.5s; }
.hero-ready .hc-revenue{ transition-delay:.62s; }
.hero-ready .hc-conv{ transition-delay:.74s; }
.hero-ready .hc-score{ transition-delay:.86s; }
.hero-ready .hc-social{ transition-delay:.98s; }

/* trajectory line draws itself in */
.hero-trail path{ stroke-dashoffset:0; }
.hero-ready .hero-trail path{ animation: trailDraw 1.8s var(--ease-out) .3s both; }
@keyframes trailDraw{ from{ stroke-dasharray: 0 1400; } to{ stroke-dasharray: 5 9; } }

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-group] > *,[data-reveal-scale],
  .hero-title .reveal-line > span,.hero .eyebrow,.hero-lead,.hero-ctas,.hero-scroll-cue,
  .hero-atmos,.hero-grid,.hero .starfield,.hero-trail,.hero-card{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  /* rocket stays visible and parked in the lower-start negative space (no flight) */
  .hero-rocket-layer{ opacity:1 !important; transform: translate3d(30vw, 42vh, 0) !important; }
  .hero-grid{ opacity:.5 !important; } .hero .starfield{ opacity:.4 !important; }
  .hero-trail path{ animation:none !important; }
  .float,.orbit-outer,.orbit-inner,.hero-bg,.final-cta::before,.btt-rocket,.starfield,.hero-photo{ animation:none !important; }
  .back-to-top.is-launching .btt-rocket,
  .back-to-top.is-launching .btt-flame,
  .back-to-top.is-launching .btt-trail,
  .back-to-top.is-launching::before{
    animation:none !important;
  }
}

/* -------------------------------------------------- theme view-transition -- */
::view-transition-old(root){ animation: none; }
::view-transition-new(root){
  animation: themeWipe .6s var(--ease-in-out);
}
@keyframes themeWipe{
  from{
    clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
  }
  to{
    clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%));
  }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-new(root){ animation:none; }
}