/* ============================================================
   ANIMATIONS — scroll reveal, floating elements, motion utilities
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* Scroll reveal (fade + rise), staggered via nth-child */
.reveal{opacity:0; transform:translateY(32px); transition:opacity .85s var(--ease), transform .85s var(--ease); will-change:opacity, transform;}
.reveal.in-view{opacity:1; transform:translateY(0);}

.reveal-group > *{opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease), transform .65s var(--ease);}
.reveal-group.in-view > *{opacity:1; transform:translateY(0);}
.reveal-group.in-view > *:nth-child(1){transition-delay:.02s;}
.reveal-group.in-view > *:nth-child(2){transition-delay:.09s;}
.reveal-group.in-view > *:nth-child(3){transition-delay:.16s;}
.reveal-group.in-view > *:nth-child(4){transition-delay:.23s;}
.reveal-group.in-view > *:nth-child(5){transition-delay:.3s;}
.reveal-group.in-view > *:nth-child(6){transition-delay:.37s;}
.reveal-group.in-view > *:nth-child(7){transition-delay:.44s;}
.reveal-group.in-view > *:nth-child(8){transition-delay:.51s;}

.reveal-load{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-load.in-view{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *, .reveal-load{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* Hero background slow zoom */
@keyframes hero-zoom{ from{transform:scale(1.08);} to{transform:scale(1);} }
.hero-bg img{animation:hero-zoom 20s ease-out forwards;}

/* Scroll indicator drip */
@keyframes scroll-drip{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}

/* Floating decorative circles + sparkles in hero */
@keyframes float-a{ 0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-22px) translateX(10px);} }
@keyframes float-b{ 0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(18px) translateX(-14px);} }
@keyframes sparkle-pulse{ 0%,100%{opacity:.4; transform:scale(.9);} 50%{opacity:1; transform:scale(1.15);} }

.floaty:nth-child(1){animation:float-a 9s ease-in-out infinite;}
.floaty:nth-child(2){animation:float-b 11s ease-in-out infinite;}
.floaty:nth-child(3){animation:float-a 13s ease-in-out infinite reverse;}
.sparkle{animation:sparkle-pulse 3.2s ease-in-out infinite;}
.sparkle:nth-child(4){animation-delay:.6s;}
.sparkle:nth-child(5){animation-delay:1.4s;}

/* Button ripple */
.btn .ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s var(--ease); pointer-events:none;}
@keyframes ripple{ to{transform:scale(3); opacity:0;} }

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

/* Gentle parallax utility applied via JS (transform set inline) */
.parallax{will-change:transform;}

/* Counter number pop */
@keyframes count-pop{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
.metric-num.counted{animation:count-pop .4s var(--ease);}