/* ============================================================ 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 */ /* Reveal (fade-in of the arriving page): slowed .3s -> .8s with an ease-out curve so the page eases into view instead of snapping. The short delay lets the destination finish its first paint under the still-opaque overlay, so the fade reveals a settled page rather than mid-render pop. */ animation:pt-reveal .8s cubic-bezier(.33,1,.68,1) .06s both; } .page-transition.is-covering{ /* Exit stays quicker than the reveal (this is what gates navigation timing in transition.js) but eased for symmetry. */ animation:pt-cover .34s ease-in 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; } }