/* ============================================
   Animations
   ============================================ */

/* --- Hero entrance animation --- */

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

.hero__content {
  opacity: 0;
  animation: heroFadeIn 1.5s ease-out 0.3s forwards;
}

.hero__scroll {
  opacity: 0;
  animation: heroFadeIn 1s ease-out 2s forwards;
}

/* --- Scroll pulse for scroll line --- */

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.15;
  }
}

.hero__scroll-line {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

/* --- Scroll reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children in timeline and card-grid */
.timeline__item.reveal,
.card.reveal {
  transition-delay: calc(var(--reveal-index, 0) * 0.12s);
}

/* --- RSVP step transitions --- */

.rsvp__step {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.rsvp__step--active {
  opacity: 1;
  transform: translateX(0);
}

.rsvp__step--exit-left {
  opacity: 0;
  transform: translateX(-24px);
}

/* --- Nav transition --- */

.nav {
  transition: transform 0.5s ease, background-color 0.5s ease;
}

/* --- Parallax --- */

.parallax {
  will-change: transform;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .hero__content {
    opacity: 1;
    animation: none;
  }

  .hero__scroll {
    opacity: 1;
    animation: none;
  }

  .hero__scroll-line {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rsvp__step {
    transition: none;
  }

  .parallax {
    will-change: auto;
  }

  .nav {
    transition: none;
  }
}