/*!
 * TWL Performance 2026 — View Transitions + INP/CLS helpers
 * Loaded by inc/twl-performance-2026.php (front-end only).
 * Complements inc/twl-performance.php — do NOT duplicate rules here.
 */

/* ──────────────────────────────────────────────────────────────
 * 1. View Transitions API (cross-document / MPA navigation)
 *    Native same-origin page transitions in supporting browsers.
 *    Browsers without support simply ignore @view-transition and
 *    navigate normally (graceful, zero-JS fallback).
 * ────────────────────────────────────────────────────────────── */
@view-transition {
  navigation: auto;
}

/* Default cross-fade is short and subtle to fit the dark/premium feel
   and to avoid perceptible jank on heavier pages (home with video). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keep the persistent chrome (header/footer) visually stable across
   navigations if the theme opts in via these names. Optional/no-op
   until an element declares the matching view-transition-name. */
::view-transition-group(twl-header),
::view-transition-group(twl-footer) {
  animation-duration: 0s; /* no flicker on shared chrome */
}

/* ──────────────────────────────────────────────────────────────
 * 2. Reduced motion — disable transition animations entirely.
 *    We keep navigation:auto (instant swap) but kill the animation.
 * ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 3. content-visibility — skip rendering work for off-screen
 *    sections to cut main-thread time (helps INP + initial render).
 *    Applied only to elements explicitly opted-in via .twl-cv so we
 *    never affect above-the-fold / hero content or break layout.
 *    contain-intrinsic-size reserves space to avoid scroll CLS.
 * ────────────────────────────────────────────────────────────── */
.twl-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ──────────────────────────────────────────────────────────────
 * 4. Hero video — promote to its own layer + async decode hints.
 *    preload="none" is already set server-side; here we just make
 *    sure the poster paints fast and the element is GPU-composited.
 * ────────────────────────────────────────────────────────────── */
.twl-vh__video,
.twl-vh video {
  /* Hint the compositor; avoids repaint storms behind overlay text. */
  will-change: opacity;
  /* Smooth poster -> first-frame swap. */
  transition: opacity 200ms linear;
}

/* When JS marks the hero as paused/off-screen, drop it to the poster
   without unloading, so scrolling back is instant and cheap. */
.twl-vh__video.twl-vid-paused {
  opacity: 1; /* poster stays visible; playback simply halts */
}