/* ─── Scroll Animations ────────────────────────────────── */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Hero Animations ──────────────────────────────────── */

.hero__overline {
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.1s both;
}

.hero__headline {
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.25s both;
}

.hero__subline {
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.4s both;
}

.hero__ctas {
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.55s both;
}

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

/* ─── Scroll indicator ─────────────────────────────────── */

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.4; transform: scaleY(0.6); }
}

/* ─── Stagger helpers ──────────────────────────────────── */

[data-animate][data-delay="1"] { --delay: 100ms; }
[data-animate][data-delay="2"] { --delay: 200ms; }
[data-animate][data-delay="3"] { --delay: 300ms; }
[data-animate][data-delay="4"] { --delay: 400ms; }