/* ========================================================================== transitions.css — page-to-page slide animations. -------------------------------------------------------------------------- This is a multi-page site, so a navigation is two separate documents: the old one plays an EXIT, the browser loads the new one, and that plays an ENTRANCE. The two halves are stitched together by: • `--slide-x` the distance and sign of the travel, written by JS • a class on , applied before first paint by core/boot.js, so the incoming page is already offset when it first renders — no flash of un-animated content Direction is derived from the navigation order (Home → Collection → Auctions → Contact). Going deeper slides one way, coming back slides the other, and the sign is inverted under RTL so "forward" always means "onward" rather than "leftward". Only
moves. The header and footer are persistent chrome; sliding a sticky header looks like a bug, not a transition. ========================================================================== */ :root { /* Overwritten per navigation by boot.js / page-transition.js. */ --slide-x: 0px; --page-in-duration: 440ms; --page-out-duration: 260ms; } /* ----------------------------------------------------------- keyframes -- */ @keyframes page-in { from { opacity: 0; transform: translate3d(var(--slide-x), 0, 0); } to { opacity: 1; transform: none; } } @keyframes page-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(var(--slide-x), 0, 0); } } /* A direct visit (typed URL, bookmark, refresh) has no direction to inherit, so it lifts instead of sliding. */ @keyframes page-in-plain { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------- entrance - */ html.page-enter-slide main, html.page-enter-slide #admin-root { animation: page-in var(--page-in-duration) var(--ease-out) both; } html.page-enter-plain main, html.page-enter-plain #admin-root { animation: page-in-plain var(--page-in-duration) var(--ease-out) both; } /* ----------------------------------------------------------------- exit - */ html.page-leaving main, html.page-leaving #admin-root { animation: page-out var(--page-out-duration) var(--ease) both; } /* Overlays live on , outside
, so they would sit still while the page slid out from under them. Fade them with it. */ html.page-leaving .overlay, html.page-leaving .drawer, html.page-leaving .drawer-scrim { opacity: 0; transition: opacity var(--page-out-duration) var(--ease); } /* Nothing should respond to input once the page has committed to leaving. */ html.page-leaving body { pointer-events: none; } /* -------------------------------------------------------------------------- Reduced motion: no slide, no fade, no artificial delay before navigating. page-transition.js checks the same query and skips its exit entirely, so the link behaves like an ordinary one. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.page-enter-slide main, html.page-enter-plain main, html.page-leaving main, html.page-enter-slide #admin-root, html.page-enter-plain #admin-root, html.page-leaving #admin-root { animation: none !important; opacity: 1 !important; transform: none !important; } html.page-leaving .overlay, html.page-leaving .drawer, html.page-leaving .drawer-scrim { opacity: 1; transition: none; } }