/* ========================================================================== Page transitions Two layers, only one is ever active: 1. Cross-document View Transitions, where the browser supports them. 2. A CSS/JS fade fallback everywhere else (see js/transitions.js). Both are disabled under prefers-reduced-motion. ========================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { /* Opt out of the default cross-fade so our own animations own the timing. */ animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { animation: 110ms cubic-bezier(0.4, 0, 1, 1) both page-leave; } ::view-transition-new(root) { animation: 190ms cubic-bezier(0, 0, 0.2, 1) both page-enter; } @keyframes page-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --- Fallback for browsers without cross-document view transitions -------- `.no-vt` is set on by the inline head script in js/transitions.js. The fade-IN is a pure CSS animation so a JS failure can never leave the page stuck invisible. The fade-OUT is driven by JS on link click. */ .no-vt body { animation: page-enter 190ms cubic-bezier(0, 0, 0.2, 1) both; } .no-vt.is-leaving body { animation: page-leave 110ms cubic-bezier(0.4, 0, 1, 1) both; } /* Neutralise the legacy Webflow curtain overlay (a fixed white panel driven by an IX2 interaction, 1700ms in / 1200ms out). Its inline script is gone; this keeps the leftover markup from ever painting. */ .transition, .transition-trigger { display: none !important; } /* Anchor jumps within a page should glide rather than snap. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), .no-vt body, .no-vt.is-leaving body { animation: none !important; } html { scroll-behavior: auto; } }