/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes pulseDot{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.35; }
}
.badge .dot{ animation: pulseDot 2.4s ease-in-out infinite; }

@keyframes scrollHintMove{
  0%{ transform: translateY(0); opacity: 1; }
  100%{ transform: translateY(10px); opacity: 0; }
}
.scroll-hint .line{ animation: scrollHintMove 1.6s ease-in-out infinite; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1.in{ transition-delay: 0.08s; }
.reveal-delay-2.in{ transition-delay: 0.16s; }
.reveal-delay-3.in{ transition-delay: 0.24s; }
.reveal-delay-4.in{ transition-delay: 0.32s; }
.reveal-delay-5.in{ transition-delay: 0.4s; }

.hero .badge,
.hero h1,
.hero .lead,
.hero-actions,
.hero-meta{
  animation: fadeUp 0.9s var(--ease) both;
}
.hero h1{ animation-delay: 0.08s; }
.hero .lead{ animation-delay: 0.16s; }
.hero-actions{ animation-delay: 0.24s; }
.hero-meta{ animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
  .badge .dot, .scroll-hint .line{ animation: none; }
}