/* === Scroll Reveal Base === */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

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

/* === Staggered Reveal Group === */
[data-reveal-group] [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
[data-reveal-group] [data-reveal]:nth-child(2) { --reveal-delay: 100ms; }
[data-reveal-group] [data-reveal]:nth-child(3) { --reveal-delay: 200ms; }
[data-reveal-group] [data-reveal]:nth-child(4) { --reveal-delay: 300ms; }
[data-reveal-group] [data-reveal]:nth-child(5) { --reveal-delay: 400ms; }
[data-reveal-group] [data-reveal]:nth-child(6) { --reveal-delay: 500ms; }

/* === Page Transitions (View Transitions API) === */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 0.15s ease; }
::view-transition-new(root) { animation: fade-in 0.15s ease; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* === Page Transition Fallback (non-VTA browsers) === */
body.page-ready   { transition: opacity 0.15s ease; }
body.page-leaving { opacity: 0; }

/* === Hero Entrance Animation === */
@keyframes hero-entrance {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-entrance > .eyebrow,
.hero-entrance > h1,
.hero-entrance > p,
.hero-entrance > .hero__actions {
  opacity: 0;
  animation: hero-entrance 0.4s var(--ease-out) forwards;
}

.hero-entrance > .eyebrow          { animation-delay: 0ms; }
.hero-entrance > h1                { animation-delay: 100ms; }
.hero-entrance > p                 { animation-delay: 200ms; }
.hero-entrance > .hero__actions    { animation-delay: 300ms; }

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-entrance > .eyebrow,
  .hero-entrance > h1,
  .hero-entrance > p,
  .hero-entrance > .hero__actions {
    opacity: 1;
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}