/* --------------------------------------------------------------------------- Hero 3D layer, alizaabi.om The khatam screen is decoration laid behind server-rendered content. It is never load-bearing: with JavaScript off, with WebGL off, or on any device that fails the ladder in assets/three/hero.js, none of these rules apply and the page is exactly what it was. Both the canvas and the poster are `position: fixed` and take no part in layout, so neither can move a single pixel of the document. That is the whole CLS story. --------------------------------------------------------------------------- */ .az-hero-canvas { display: none; } /* ---- 3D active -------------------------------------------------------- */ /* The page background moves up to so a negative-z child of can sit above it. Nothing else in the cascade changes. */ html.az-3d, html.az-poster { background-color: var(--surface); } html.az-3d.az-dark, html.az-poster.az-dark { background-color: #0F0F0F; } html.az-3d body, html.az-3d body.subpage, html.az-3d body.dark-mode, html.az-3d body.subpage.dark-mode, html.az-poster body, html.az-poster body.subpage, html.az-poster body.dark-mode, html.az-poster body.subpage.dark-mode { background-color: transparent; } html.az-3d .az-hero-canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; /* Layout and paint containment, deliberately NOT size containment: a fixed element is already out of flow, and `contain: size` would collapse the canvas to 0x0. */ contain: layout paint; /* Composited on its own layer, so a repaint of the document never repaints the lattice and the lattice never repaints the document. */ will-change: transform; } /* ---- Poster fallback --------------------------------------------------- */ /* A real render of the same scene, not a placeholder. Only one of the two files is ever fetched, because the browser only downloads the background image of the rule that actually matches. */ html.az-poster body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("../images/hero/khatam-light.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.9; } html.az-poster.az-dark body::before { background-image: url("../images/hero/khatam-dark.webp"); opacity: 1; } /* A viewport too narrow to read the pattern gets a calmer crop rather than a stretched one. */ @media (max-width: 640px) { html.az-poster body::before { background-size: 200% auto; background-position: center top; } } /* Print, screen readers and anything that flattens the page: no decoration. */ @media print { html.az-3d .az-hero-canvas, html.az-poster body::before { display: none !important; } }