/* ── SCROLL ANIMATIONS ── */

/* Hidden state — elements with data-animate start invisible */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(120px) scale(0.95);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Visible state — applied by scroll-observer.js */
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays for children of data-stagger containers */
[data-stagger] > :nth-child(1) { transition-delay: 100ms; }
[data-stagger] > :nth-child(2) { transition-delay: 200ms; }
[data-stagger] > :nth-child(3) { transition-delay: 300ms; }
[data-stagger] > :nth-child(4) { transition-delay: 400ms; }
[data-stagger] > :nth-child(5) { transition-delay: 500ms; }
[data-stagger] > :nth-child(6) { transition-delay: 600ms; }
[data-stagger] > :nth-child(7) { transition-delay: 700ms; }
[data-stagger] > :nth-child(8) { transition-delay: 800ms; }

/* ── HERO ENTRANCE ANIMATION ── */

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero elements start invisible and animate in staggered */
.hero h1 {
  opacity: 0;
  animation: hero-fade-up 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.hero-sub {
  opacity: 0;
  animation: hero-fade-up 800ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

.hero .email-form-wrapper {
  opacity: 0;
  animation: hero-fade-up 800ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}

/* -- SVG DIVIDER ANIMATION -- */
@keyframes wave-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

.section-divider-svg {
  animation: wave-drift 8s ease-in-out infinite;
}

/* Accessibility: disable all animations for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate="fade-up"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-stagger] > * {
    transition-delay: 0ms;
  }

  .hero h1,
  .hero-sub,
  .hero .email-form-wrapper {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .section-divider-svg {
    animation: none;
  }
}