/* Cross-document view transitions. * * Every surface here is its own HTML document — the decks, the appendices, the * 2MB VeriGraph profile, the WebGL globe. Turning that into a single-page app * would mean loading all of it up front, so instead the pages stay separate and * the browser animates between them: same-origin navigations cross-fade and * slide rather than blanking to white, which is what made the set feel like * separate sites rather than one product. * * Opt-in has to sit in a stylesheet present in BOTH documents at navigation * time, which is why this is a linked file loaded from every page's * rather than something nav.js injects at the end of body. * * Where the API is unsupported (older WebKit, older Firefox) navigation simply * happens instantly, as it did before. Nothing depends on it. */ @view-transition { navigation: auto; } /* Forward: the new page arrives from the right, the old one leaves to the left. Back: mirrored, so retracing your steps feels like going back rather than deeper. `html.eos-back` is set from the navigation type — see nav.js. */ @keyframes eos-vt-in { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes eos-vt-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-22px, 0, 0); } } @keyframes eos-vt-in-back { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes eos-vt-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(22px, 0, 0); } } ::view-transition-old(root) { animation: eos-vt-out 260ms cubic-bezier(.4, 0, .2, 1) both; } ::view-transition-new(root) { animation: eos-vt-in 300ms cubic-bezier(.16, 1, .3, 1) both; } html.eos-back::view-transition-old(root) { animation-name: eos-vt-out-back; } html.eos-back::view-transition-new(root) { animation-name: eos-vt-in-back; } /* The nav is the one thing common to every surface, so it stays put while the page beneath it moves. Without this it cross-fades with the rest and the whole frame appears to flinch on every navigation. */ .eosnav { view-transition-name: eos-nav; } ::view-transition-group(eos-nav) { animation-duration: 260ms; } ::view-transition-old(eos-nav), ::view-transition-new(eos-nav) { animation: none; mix-blend-mode: normal; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }