/* ============================================
   ANIMATIONS — Scroll-driven, View Transitions
   ============================================ */

/* ---- VIEW TRANSITIONS (cross-page) ---- */
@view-transition {
  navigation: auto;
}

.nav-logo {
  view-transition-name: site-logo;
}

::view-transition-old(root) {
  animation: vt-fade-out 200ms ease-in;
}

::view-transition-new(root) {
  animation: vt-fade-in 300ms ease-out;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* ---- HERO ENTRANCE ---- */
.hero-enter {
  animation: hero-in 800ms var(--ease-out) both;
}

.hero-enter:nth-child(1) { animation-delay: 0ms; }
.hero-enter:nth-child(2) { animation-delay: 150ms; }
.hero-enter:nth-child(3) { animation-delay: 300ms; }
.hero-enter:nth-child(4) { animation-delay: 450ms; }

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

/* ---- SCROLL-DRIVEN REVEAL ---- */
@keyframes scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Native scroll-driven animation */
@supports (animation-timeline: view()) {
  [data-animate] {
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 40%;
  }

  [data-animate="scale"] {
    animation-name: scroll-scale-in;
  }

  /* Staggered children */
  [data-animate-stagger] > * {
    animation: scroll-reveal linear both;
    animation-timeline: view();
  }

  [data-animate-stagger] > *:nth-child(1) { animation-range: entry 5% entry 35%; }
  [data-animate-stagger] > *:nth-child(2) { animation-range: entry 10% entry 40%; }
  [data-animate-stagger] > *:nth-child(3) { animation-range: entry 15% entry 45%; }
}

/* ---- FALLBACK (IntersectionObserver) ---- */
@supports not (animation-timeline: view()) {
  [data-animate],
  [data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
  }

  [data-animate="scale"] {
    transform: scale(0.95);
  }

  [data-animate].is-visible,
  [data-animate-stagger] > *.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Staggered delays */
  [data-animate-stagger] > *:nth-child(1) { transition-delay: 0ms; }
  [data-animate-stagger] > *:nth-child(2) { transition-delay: 100ms; }
  [data-animate-stagger] > *:nth-child(3) { transition-delay: 200ms; }
}

/* ---- HERO PARALLAX ---- */
@supports (animation-timeline: scroll()) {
  .hero-parallax {
    animation: parallax-shift linear;
    animation-timeline: scroll(root);
  }
}

@keyframes parallax-shift {
  from { transform: translateY(0); }
  to { transform: translateY(-80px); }
}

/* ---- UTILITY ANIMATIONS ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}