/* ============================================
   ANIMATIONS — Scroll reveals, keyframes, transitions
   ============================================ */

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Staggered delays */
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }
.reveal[data-delay="6"] { transition-delay: 600ms; }

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

.hero .reveal {
  opacity: 0;
  transform: translateY(32px);
}

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

.hero .hero__badge.reveal {
  transition-delay: 0ms;
}

.hero .hero__title.reveal {
  transition-delay: 120ms;
}

.hero .hero__subtitle.reveal {
  transition-delay: 240ms;
}

.hero .hero__actions.reveal {
  transition-delay: 360ms;
}

.hero .hero__microcopy.reveal {
  transition-delay: 480ms;
}

/* ---- Button hover glow ---- */

.btn--glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--color-accent);
  opacity: 0;
  filter: blur(16px);
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: -1;
}

.btn--glow:hover::before {
  opacity: 0.3;
}

/* ---- Card hover lift ---- */

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

/* ---- FAQ icon rotation ---- */

.faq__icon {
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
}

/* ---- FAQ smooth open/close ---- */

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out);
}

.faq__item[open] .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer > * {
  overflow: hidden;
}

/* ---- Gradient text shimmer ---- */

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- Navigation scroll transition ---- */

.nav {
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

/* ---- Mobile CTA slide up ---- */

.mobile-cta {
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.mobile-cta--visible {
  transform: translateY(0);
}

/* ---- Timeline line animation ---- */

.timeline__line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.5s var(--ease-out);
}

.timeline__line--animated {
  transform: scaleY(1);
}

/* ---- Accent glow pulse ---- */

@keyframes glowPulse {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: var(--shadow-glow-strong); }
}

.package-card--featured {
  animation: glowPulse 4s ease-in-out infinite;
}

/* ---- 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;
  }

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

  .timeline__line {
    transform: scaleY(1);
  }

  .hero__scroll-line {
    animation: none;
    opacity: 0.5;
  }
}

/* ---- CSS scroll-driven animation progressive enhancement ---- */

@supports (animation-timeline: view()) {
  .reveal {
    animation: revealOnScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
    /* Reset transition-based reveal since we're using scroll-driven */
    opacity: 1;
    transform: none;
    transition: none;
  }

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

  /* Still respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}