/* ==========================================================================
   animations.css — native, zero-dependency motion system
   - Cross-document page transitions (View Transitions API)
   - Subtle scroll-progress indicator (scroll-driven CSS)
   - Scroll-driven reveal enhancement
   All effects are gated behind prefers-reduced-motion.
   ========================================================================== */

/* ---- Cross-document page transitions ---------------------------------- */
/* Chromium/Safari animate navigations between pages automatically; other
   browsers ignore this at-rule and simply navigate normally. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
  }
  @keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-10px); }
  }
  ::view-transition-old(root) {
    animation: vt-fade-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* The sticky header keeps its own identity so it stays put across pages
   instead of cross-fading with the body. */
.site-header { view-transition-name: site-header; }

/* ---- Scroll progress bar (top of viewport) ---------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500), var(--cyan-400));
  z-index: 150;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: grow-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Scroll-driven reveal (progressive enhancement) ------------------- */
/* When the browser supports scroll-driven animations AND motion is allowed,
   .reveal animates smoothly as it enters the viewport. The IntersectionObserver
   fallback in main.js still handles everything else. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 1;              /* JS no longer needs to unhide */
      transform: none;
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .reveal.is-visible { animation: none; }  /* avoid double-run if JS also fires */
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}