/* ============================================================================
   immersive.css — modern browser-native polish, pure progressive enhancement.

   Loaded AFTER site.css. Every feature here is wrapped in @supports / @media so
   a browser that lacks it simply gets the site exactly as site.css renders it.
   There is NO JavaScript in this layer, so the Rocket Loader nonce hazard does
   not apply. To remove the whole effect: drop the <link> in header.php and this
   file (it is its own git commit for exactly that reason).

   Covers:
     1. Cross-document view transitions (app-like navigation, persistent shell)
     2. Scroll-driven .gs-reveal (compositor, not JS) — additive to the JS path
     3. Reading-progress bar on article pages
     4. prefers-reduced-motion kill switch for all of the above
   ============================================================================ */

/* ── 1. Cross-document view transitions ─────────────────────────────────────
   Opts the whole same-origin site into animated navigation. Safari 18.2+,
   Chrome 126+. Unsupported browsers ignore the at-rule and navigate normally. */
@view-transition { navigation: auto; }

/* The shell persists across navigation: giving these a stable transition name
   makes the browser treat them as the SAME element on both pages, so they do
   not fade/slide — the header, bottom nav and footer stay rock-steady while
   only the content crossfades. Names must be unique, so each gets its own. */
.gs-site-header { view-transition-name: gs-header; }
.gs-mobnav      { view-transition-name: gs-mobnav; }
.site-footer    { view-transition-name: gs-footer; }

/* Content crossfade + 8px rise, ~220ms. Only the root snapshot (everything not
   given its own name above) animates. */
@keyframes gs-vt-fade-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gs-vt-fade-out { from { opacity: 1; transform: none; }           to { opacity: 0; transform: translateY(-4px); } }

::view-transition-old(root) {
  animation: gs-vt-fade-out 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
::view-transition-new(root) {
  animation: gs-vt-fade-in 220ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── 2. Scroll-driven reveal (additive — the JS IntersectionObserver stays) ──
   Gated on BOTH animation-timeline support AND html.gs-js-reveal (the pre-paint
   flag page.php/header.php set). When the JS path is active and the browser
   supports view() timelines, the reveal rides the compositor and tracks scroll
   position exactly, instead of the one-shot 540ms transition. If either is
   absent, nothing here applies and the existing behaviour is unchanged.
   .gs-reveal is visible by default (site.css), so there is never a hidden-content
   risk from this block. */
@supports (animation-timeline: view()) {
  html.gs-js-reveal .gs-reveal:not(.is-in) {
    animation: gs-vt-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
}

/* ── 3. Reading-progress bar on article pages ───────────────────────────────
   A hairline gold bar pinned to the top of the viewport that fills as the
   article is read. Scoped to .gs-news-article so it only appears where an
   article exists; scroll() timeline support required (Safari 26+, Chrome 115+).
   No markup needed — it is a fixed pseudo-element. */
@supports (animation-timeline: scroll()) {
  .gs-news-article::before {
    content: "";
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #bd9e70, #d4ba90);
    z-index: 60;
    pointer-events: none;
    animation: gs-read-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes gs-read-progress { to { transform: scaleX(1); } }
}

/* ── 4. Reduced-motion kill switch ──────────────────────────────────────────
   Users who ask for less motion get instant navigation, no reveal animation and
   no progress bar. All view-transition browsers honour this query. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  @supports (animation-timeline: view()) {
    html.gs-js-reveal .gs-reveal:not(.is-in) { animation: none; }
  }
  .gs-news-article::before { display: none; }
}