/* =====================================================================
   macOS Sequoia — Motion: reveals + scroll-driven animations
   ---------------------------------------------------------------------
   Two-tier motion system:
   1. `.wavo-reveal` / `.wavo-reveal.is-in` — IntersectionObserver-based
      reveal, applied by wavo.js (initReveals). Canonical path; works
      everywhere.
   2. `@supports (animation-timeline: scroll() | view())` — native scroll-
      driven augments on Chrome 115+, FF 121+, Safari 26+. Adds wallpaper
      parallax, hero text parallax, section reveals, first-card lift, and
      a Mac Pages/Books style scroll progress bar.
   3. `prefers-reduced-motion: reduce` short-circuits the scroll-driven
      block entirely. The JS observer also short-circuits in reduce mode,
      so motion-sensitive users see content at rest.

   Extracted from wavo-components.css in Phase 7.
   ===================================================================== */

/* ----- IntersectionObserver-based reveal ------------------------------ */
/* `.wavo-reveal` is applied by JS (initReveals) when sections enter the
   viewport. The class toggle handles the start state via :not(.is-in)
   and the rest state via .is-in so reduced-motion users see content
   immediately (the JS observer short-circuits when reduce is set). */
.wavo-reveal {
  /* Start: 20px down + faded; soft-easing on transform + opacity for a
     calm, wallpaper-like settle. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--wavo-dur-xslow) var(--wavo-ease-soft),
              transform var(--wavo-dur-xslow) var(--wavo-ease-soft);
  will-change: opacity, transform;
}
.wavo-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children — wrap a grid in .wavo-reveal-group to cascade child
   reveals 60ms apart. Index is set inline (style="--i:N") by JS. */
.wavo-reveal-group .wavo-reveal {
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* =====================================================================
   macOS Sequoia — Scroll-driven motion (Chrome 115+, FF 121+, Safari 26+)
   ---------------------------------------------------------------------
   Progressive enhancement: gated by @supports (animation-timeline: ...).
   Browsers without support keep the IntersectionObserver-based reveals
   in wavo.js (initReveals) as the canonical fallback — so this block
   purely ADDS native scroll-coupling on capable engines.
   Performance: scroll-driven animations are composited off the main
   thread, so they don't stall scroll. Limit active timelines: wallpaper
   parallax + hero parallax + progress bar + per-section reveal +
   first-card lift = 5 concurrent timelines max.
   ===================================================================== */

/* ----- Wallpaper parallax — body backdrop drifts slower than scroll ----
   The body::before wallpaper is position:fixed so it normally cannot
   parallax. We translate it on a scroll-timeline anchored to the root
   viewport — over the first 100vh of scroll the wallpaper drifts up by
   30px, giving the depth illusion of a layered Mac desktop sitting
   behind the page. Past 100vh it holds — anything more is wasted GPU. */
@supports (animation-timeline: scroll()) {
  body.wavo-body::before {
    animation: wavo-wallpaper-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
    will-change: transform;
  }
}
@keyframes wavo-wallpaper-parallax {
  from { transform: translateY(0); }
  to { transform: translateY(-30px); }
}

/* ----- Hero text parallax — h1 lifts as the hero leaves the viewport ---
   View-timeline ties the animation to the element's own scroll-progress
   through the viewport. The h1 starts 40px down + faded on entry,
   settles to neutral mid-viewport, then lifts -20px and dims as it
   exits the top — same trick the Mac App Store uses for hero headlines. */
@supports (animation-timeline: view()) {
  .wavo-hero-sequoia .wavo-page-header h1,
  .wavo-hero-sequoia .wavo-page-header h2 {
    animation: wavo-hero-text-parallax linear both;
    animation-timeline: view();
    /* CSS scroll-driven animations spec uses the simple range names
       `entry`, `exit`, `cover`, `contain` — not `entry-crossing`. Chrome
       115+ accepts the short form; the prior `entry-crossing 0% exit-
       crossing 100%` parsed as an invalid descriptor and silently no-op'd
       the animation. The hero h1 was supposed to lift -20px on exit;
       without this fix the parallax wasn't actually running. */
    animation-range: entry 0% exit 100%;
    will-change: transform, opacity;
  }
}
@keyframes wavo-hero-text-parallax {
  from { transform: translateY(40px); opacity: 0; }
  10%, 90% { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-20px); opacity: 0.6; }
}

/* ----- Section reveal via view-timeline (native augment) ---------------
   The IntersectionObserver path (wavo.js -> .wavo-reveal -> .is-in) is
   the canonical reveal. This adds a NATIVE reveal for any .wavo-section
   children that aren't wired with .wavo-reveal — so EVERY section gets
   the soft slide-up even on legacy markup. The animation only runs
   when scroll-driven timelines exist; otherwise children render in
   place (no JS opacity:0 to get stuck on). */
@supports (animation-timeline: view()) {
  .wavo-section > .wavo-container > *:not(.wavo-reveal),
  .wavo-section > *:not(.wavo-reveal):not(.wavo-container) {
    animation: wavo-section-reveal linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 22%;
    will-change: opacity, transform;
  }
}
@keyframes wavo-section-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----- First-card lift — rail cards rise as the rail enters view -------
   Targets the FIRST child of any .wavo-rail (the leading card the user
   sees first). It starts ~24px down and lifts to neutral as the rail
   crosses into the viewport. Subsequent cards stay still — keeps the
   effect a leading-edge "settle", not a chorus of bouncing tiles. */
@supports (animation-timeline: view()) {
  .wavo-rail > :first-child {
    animation: wavo-card-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    will-change: transform;
  }
}
@keyframes wavo-card-lift {
  from { transform: translateY(24px); }
  to { transform: translateY(0); }
}

/* ----- Scroll progress bar — Mac Pages / Books style ------------------
   Thin 2px accent strip pinned to the top of the viewport, scaleX from
   0 -> 1 as the user scrolls the document. Sits ABOVE the navbar
   (z-index 9999) so it visually crowns the page. transform-origin: left
   means it fills left-to-right. pointer-events: none so it never blocks
   clicks. The element is added in _Layout.cshtml after <body>. */
.wavo-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 3px reads on retina; 2px disappeared under the navbar's inner-shine
     and was indistinguishable from the navbar top hairline. */
  height: 3px;
  /* Stronger 3-stop gradient + glow halo. Sequoia Books/Pages bar is a
     vivid single-color stripe, but on our pastel wallpaper a single
     accent stop reads pale. The trailing brand-soft anchor keeps the
     bar saturated as it fills toward the end. */
  background: linear-gradient(90deg,
    var(--wavo-accent) 0%,
    var(--wavo-accent-hover) 60%,
    var(--wavo-brand-soft) 100%);
  /* Soft outer halo so the bar reads as "lit" against the wallpaper. */
  box-shadow: 0 1px 4px rgba(84, 113, 175, 0.45);
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .wavo-scroll-progress {
    animation: wavo-scroll-progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes wavo-scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ----- Reduced motion — disable ALL scroll-driven animations ----------
   prefers-reduced-motion: reduce users should see content in its rest
   state. Setting `animation: none !important` on every scroll-coupled
   target overrides the @supports rules above on capable engines too.
   The progress bar is hidden entirely (it's pure decoration). */
@media (prefers-reduced-motion: reduce) {
  body.wavo-body::before,
  .wavo-hero-sequoia .wavo-page-header h1,
  .wavo-hero-sequoia .wavo-page-header h2,
  .wavo-section > .wavo-container > *:not(.wavo-reveal),
  .wavo-section > *:not(.wavo-reveal):not(.wavo-container),
  .wavo-rail > :first-child {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .wavo-scroll-progress {
    display: none !important;
  }
}