/* ==================================================================
   View Transitions — persistent nav + offer strip (shared chrome)

   Opts the whole site into the browser's cross-document View Transitions
   API. On an internal navigation the browser snapshots the current page,
   loads the next one, and animates between them instead of hard-reloading
   — giving that "web-app" feel where the nav appears to stay put while the
   content below cross-fades.

   The offer strip + header are each given their own transition-name so the
   browser treats them as a single persistent element across the navigation:
   identical markup in the same position ⇒ they hold perfectly steady
   (pinned) while only the content beneath transitions.

   Graceful everywhere:
     • Browsers without the API ignore @view-transition entirely → normal
       navigation, page-loader as before. Nothing breaks.
     • Pages with no nav (gateway/contact, no-chrome template) simply
       cross-fade; the absent nav just isn't pinned.
     • Reduced-motion users navigate instantly (animations disabled below).

   The page-loader is suppressed during these transitions by an inline
   pagereveal hook in functions.php (wp_head) so it never flashes mid-morph.
   ================================================================== */

@view-transition {
  navigation: auto;
}

/* Pin the shared chrome so it stays put while content changes beneath it.

   IMPORTANT: the names are applied ONLY during an active transition (via the
   .kwb-vt-active class that JS toggles on pageswap/pagereveal and removes when
   the transition finishes). A persistent view-transition-name turns the header
   into a stacking context, which traps the absolutely-positioned dropdown menus
   beneath the page content. Scoping the names to the transition window keeps
   normal browsing — and the dropdowns — completely unaffected. */
html.kwb-vt-active .announce-bar {
  view-transition-name: kwb-offer;
}
html.kwb-vt-active .site-header {
  view-transition-name: kwb-nav;
}

/* Quick cross-fade for the page SWAP only (everything not pinned). The incoming
   hero + in-view reveals deliberately do NOT enter here — they stay primed and
   then play their real, per-element STAGGERED lift on the settled page once the
   cross-fade finishes (held until then by the pagereveal hook + page-loader.js).
   That keeps the charm of the original lift on navigation, not a whole-page slab. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
  animation-timing-function: var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Respect reduced-motion: navigate instantly, no transition animation */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}