/* ============================================================ Page transition — a plain, quick crossfade shared by every page. An overlay in the site background color covers the screen, so the page fades out to the flat background as you leave and fades back in on the next page — this hides the browser's hard between-pages flash without any panel/slide/logo drama. Enter (fade-out of the overlay) is pure CSS so it always clears even if JS fails. Exit (fade-in) is added by js/transition.js on internal link clicks. The overlay lives OUTSIDE the scaled .page (direct child of ) so its position:fixed is viewport-relative. ============================================================ */ .page-transition{ position:fixed; inset:0; z-index:900; pointer-events:none; /* purely visual — never intercepts clicks */ background:var(--bg); /* == page background, so the fade is seamless */ opacity:1; /* covering at first paint */ animation:pt-reveal .3s ease forwards; } .page-transition.is-covering{ animation:pt-cover .25s ease forwards; } @keyframes pt-reveal{ from{ opacity:1; } to{ opacity:0; } } @keyframes pt-cover{ from{ opacity:0; } to{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .page-transition{ display:none; } }