/** * Page Transitions - Smooth, lightweight navigation * ------------------------------------------------------------------ * Goal: soften the hard "white flash" between full page reloads WITHOUT * touching the incoming page's render timing (no LCP/PageSpeed regression). * * Two complementary mechanisms: * 1. Native cross-document View Transitions (Chrome/Edge 126+) - a * compositor-level crossfade that costs zero JS and does NOT delay LCP. * 2. A JS-driven fade of the OUTGOING document only (page-transitions.js), * for browsers without native support. The incoming page is never * faded, so its first paint / LCP is unaffected. * * SAFETY GUARD: nothing here ever sets a base `opacity: 0` on . The * fade only happens when JS explicitly adds `.is-leaving`. If CSS loads but * JS fails (or vice-versa), the page always remains fully visible. */ /* 1. Native cross-document transitions (progressive enhancement). */ @view-transition { navigation: auto; } /* Tune the native crossfade: quick + gentle so it reads as "light". */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* 2. JS fallback for browsers without native cross-document transitions. Only ever triggered by the `.is-leaving` class added in page-transitions.js. */ html.is-leaving { opacity: 0.55; /* WHY transition (not animation): we want a one-way ease-out on leave that simply holds at the end value until the new document replaces this one. */ transition: opacity 0.18s ease-out; } /* A11Y: honour the OS "reduce motion" preference - disable all transition motion for users who are sensitive to it. Native VT respects this too, but we make the intent explicit and also neutralise the JS fallback fade. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } html.is-leaving { opacity: 1 !important; transition: none !important; } }