/* ============================================================ CANVAS — single-page areas with a lateral swap The three areas live in one document. Exactly one is active (normal flow, normal window scroll). Switching areas pins both as fixed layers and slides them horizontally (driven inline by canvas.js). No page load, so the motion starts on the click. ============================================================ */ /* reserve the scrollbar gutter so the page doesn't shift width when both areas briefly go position:fixed during a swap. NEVER put overflow on here: it turns the root into a broken scroll container and kills vertical scrolling. */ html{ scrollbar-gutter:stable; } /* only while a swap is running do we clip the offstage area's horizontal overflow; removed the instant it finishes */ html.canvas-swapping{ overflow-x:clip; } .canvas{ position:relative; } .area{ display:none; } .area.is-active{ display:block; } /* during a swap both areas become fixed full-width layers */ .area.is-anim{ position:fixed; left:0; right:0; top:0; backface-visibility:hidden; will-change:transform, opacity; } @media (prefers-reduced-motion: reduce){ .area.is-anim{ position:static !important; transform:none !important; opacity:1 !important; } }