/* SCROLL REVEAL - visible by default, enhanced when JS loads */
[data-animate] {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo);
}
[data-animate-stagger] > * {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

/* When JS loads, it adds .js-ready to body, then hides elements for reveal */
.js-ready [data-animate] {
  opacity: 0; transform: translateY(20px);
}
.js-ready [data-animate-stagger] > * {
  opacity: 0; transform: translateY(16px);
}
.js-ready [data-animate].is-visible { opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(7) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.js-ready [data-animate-stagger].is-visible > *:nth-child(8) { transition-delay: 280ms; opacity: 1; transform: translateY(0); }

/* HERO LOAD SEQUENCE */
.hero__badge { opacity: 0; transform: translateY(12px); animation: fadeUp 0.5s var(--ease-out-expo) 0.2s forwards; }
.hero__title-line { opacity: 0; transform: translateY(24px); }
.hero__title-line:nth-child(1) { animation: fadeUp 0.6s var(--ease-out-expo) 0.35s forwards; }
.hero__title-line:nth-child(2) { animation: fadeUp 0.6s var(--ease-out-expo) 0.5s forwards; }
.hero__title-line:nth-child(3) { animation: fadeUp 0.6s var(--ease-out-expo) 0.65s forwards; }
.hero__subtitle { opacity: 0; transform: translateY(14px); animation: fadeUp 0.6s var(--ease-out-expo) 0.8s forwards; }
.hero__actions { opacity: 0; transform: translateY(14px); animation: fadeUp 0.6s var(--ease-out-expo) 0.95s forwards; }
.hero__scroll { opacity: 0; animation: fadeIn 0.8s var(--ease-out-expo) 1.5s forwards; }

/* ORB FLOATING */
.hero__orb--1 { animation: floatOrb1 18s ease-in-out infinite alternate; }
.hero__orb--2 { animation: floatOrb2 22s ease-in-out infinite alternate; }
.hero__orb--3 { animation: floatOrb3 16s ease-in-out infinite alternate; }
.cta__orb--1 { animation: floatOrb1 20s ease-in-out infinite alternate; }
.cta__orb--2 { animation: floatOrb2 18s ease-in-out infinite alternate; }

@keyframes floatOrb1 {
  0% { transform: translate(0,0) scale(1); }
  33% { transform: translate(25px,-40px) scale(1.08); }
  66% { transform: translate(-15px,15px) scale(0.92); }
  100% { transform: translate(10px,-25px) scale(1.04); }
}
@keyframes floatOrb2 {
  0% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-30px,25px) scale(1.1); }
  66% { transform: translate(20px,-30px) scale(0.88); }
  100% { transform: translate(-12px,18px) scale(1.06); }
}
@keyframes floatOrb3 {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(15px,-20px) scale(1.08); }
  100% { transform: translate(-8px,12px) scale(0.96); }
}

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

/* NAV ANIMATION */
.nav { opacity: 0; animation: fadeDown 0.4s var(--ease-out-expo) 0.05s forwards; }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], [data-animate-stagger] > *,
  .js-ready [data-animate], .js-ready [data-animate-stagger] > *,
  .hero__badge, .hero__title-line, .hero__subtitle, .hero__actions, .hero__scroll, .nav {
    opacity: 1; transform: none;
  }
}