/* ==========================================================================
   Tech'nSyntax — Animations
   ========================================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero load-in sequence */
.hero-copy .eyebrow { animation: fadeInUp 0.6s var(--ease) both; }
.hero-copy h1 { animation: fadeInUp 0.6s var(--ease) 0.08s both; }
.hero-copy .lead { animation: fadeInUp 0.6s var(--ease) 0.16s both; }
.hero-copy .hero-actions { animation: fadeInUp 0.6s var(--ease) 0.24s both; }
.hero-copy .hero-stats { animation: fadeInUp 0.6s var(--ease) 0.32s both; }
.hero-visual { animation: fadeIn 0.8s var(--ease) 0.2s both; }

.hero-visual-float--1 { animation: floatY 5s ease-in-out infinite; }
.hero-visual-float--2 { animation: floatY 6s ease-in-out infinite 0.5s; }

.cta-band { background-size: 200% 200%; animation: gradientShift 12s ease infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .lead,
  .hero-copy .hero-actions,
  .hero-copy .hero-stats,
  .hero-visual,
  .hero-visual-float--1,
  .hero-visual-float--2,
  .cta-band {
    animation: none !important;
  }
}