/* Sitewide View Transitions opt-in (OQ12) — enables the browser's cross-document View Transitions API for every navigation, but the transition itself only ever *animates* elements that carry an explicit `view-transition-name` (per-card, assigned server-side — see functions.php's render_block_core/group filter and templates/archive-insights.html's bpd-vt-card class). Disabling the default ::view-transition-old(root)/new(root) crossfade keeps this from reading as "a page reload with a fade" on every navigation sitewide — only the named card groups actually move/morph between the old and new document. Header/footer/static chrome never get a name, so they're never part of any transition. Enqueued sitewide (like header-footer.css) since any page can be either end of an archive-to-archive navigation, not just the archive templates themselves. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /*
content fade, every top-level template has exactly one
so the plain element selector is a stable, page-wide unique view-transition-name — no per-template edit or PHP filter needed (unlike the per-post bpd-vt-card names in functions.php, which are dynamic). Header/footer template parts carry no name, so they're outside any transition and never move or fade — only
's old/new snapshots cross-fade. Root crossfade above stays disabled so this is additive, not layered on top of it. */ main { view-transition-name: bpd-main; } @keyframes bpd-main-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes bpd-main-fade-in { from { opacity: 0; } to { opacity: 1; } } ::view-transition-old(bpd-main) { animation: bpd-main-fade-out calc( var( --wp--custom--motion--duration-sm ) * 3 ) var( --wp--custom--motion--ease ) both; } ::view-transition-new(bpd-main) { animation: bpd-main-fade-in calc( var( --wp--custom--motion--duration-sm ) * 3 ) var( --wp--custom--motion--ease ) both; } /* Removed 2026-08-25: sitewide `scroll-behavior: smooth` on was added for Who we are's "See our team" hero CTA → #meet-the-curious in-page anchor, but the CSSOM View spec applies the same scroll-behavior to a fresh document's *initial* scroll-to-fragment, not just same- document anchor clicks. Our Work's pillar filter reloads to /our-work/?pillar=X#our-work (inc/pattern-helpers.php, deliberately landing the reload on the grid) — with this rule in place, every one of those cross-document loads visibly animated from the top of the page down to #our-work, reading as the page "jumping around". Confirmed with Russell 2026-08-25: drop the smooth scroll sitewide (Who we are's CTA now jumps instantly, same as the no-motion/ reduced-motion default already was) rather than add JS to scope it to same-document anchors only. */