/* ========================================================================== transition.css — the pixel-wipe page transition overlay. Markup is supplied as a single seed column with a single seed pixel; the pixelGrid() helper in js/transition.js clones both up to the grid the viewport needs, and rebuilds it on every navigation so an orientation change is picked up. Nothing here is animated by CSS — GSAP drives the pixel opacities and the container's stepped clip-path. The overlay sits ABOVE the page (z-index 100) but BELOW the film grain (z-index 999), so the grain rides over the transition too and the wipe never reads as a separate, cleaner surface pasted over the site. ========================================================================== */ .transition{ position:fixed; inset:0; z-index:100; pointer-events:none; overflow:clip; } .transition__panel{ position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-flow:row; opacity:0; } .transition__col{ display:flex; flex-flow:column; justify-content:flex-start; align-items:stretch; width:100%; } .transition__pixel{ width:100%; aspect-ratio:1; /* The site's ink, and the same value as the bottom bar (--ui-bar), so the wipe reads as the bar flooding the screen rather than as a foreign colour. Replaces the reference snippet's #7948e9. */ background-color:#393939; } /* ---------------- fallback cover ------------------------------------------- Set by the two-line script in when a page is arrived at with the #wipe hash, i.e. from the no-Barba fallback path in js/transition.js. It paints a flat #393939 sheet over everything BEFORE the first paint, which is what hides the real page load happening underneath; transition.js then sweeps it off with the pixel grid. Nothing else in the site uses it. */ THE COLOUR IS THE ACTIVE OVERLAY'S, not this file's own taste. It is painted before any script has run, so it cannot ask what the transition is; it has to be told in advance. #FFFFFF is js/transition-sheet.js's `foot`. If the sheet is ever turned off and the iris or the pixel grid takes over, this goes back to #393939 — the two are a pair and moving one alone is a flash of a colour that belongs to neither. */ html.is-wiping .transition__panel{ opacity:1; background-color:#FFFFFF; } /* Nothing to wipe if the visitor has asked for less motion — js/transition.js swaps to an instant cut, and this makes sure no stray pixel can flash. */ @media (prefers-reduced-motion: reduce){ .transition__panel{ display:none; } } /* ========================================================================== The liquid transition's canvas (js/transition-liquid.js). Above the pixel panel, because the two are alternatives and whichever runs has to be on top; outside every container, like the panel and the grain, so a Barba swap underneath cannot clip it away mid-animation. `visibility` rather than `display` for the off state: the canvas keeps its backing store and its GL context, so the next navigation does not pay for a context it already had. */ .liquid{ position: fixed; inset: 0; z-index: 120; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; } .liquid.is-on{ visibility: visible; } /* The iris overlay (js/transition-iris.js). Same layer and the same reasons as .liquid above it: over the pixel panel because they are alternatives, outside every container so a Barba swap cannot clip it mid-animation, and hidden with `visibility` so the GL context survives between navigations. */ .iris{ position: fixed; inset: 0; z-index: 121; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; } .iris.is-on{ visibility: visible; } /* The sheet overlay (js/transition-sheet.js) — the home page's block boundary, reused as the page transition. Same layer and the same reasons as .iris and .liquid above: over the pixel panel because the three are alternatives, outside every container so a Barba swap cannot clip it mid-animation, and hidden with `visibility` rather than `display` so its GL context survives between navigations instead of being built again on every click. */ .sheetfx{ position: fixed; inset: 0; z-index: 122; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; } .sheetfx.is-on{ visibility: visible; }