/* ========================================================================== Scene layer. Turns the page into a set of translucent editorial sheets sitting on one continuous full-page WebGL scene (see scene.js). Every colour here comes from a variable in style.css. Four of those variables — --stage, --panel, --navy-raised, --navy-soft — are re-written on by the scroll, so this file describes the relationships and the script moves them. Nothing here is required for the page to work. With no JS, no WebGL, or reduced motion, the canvas stays empty and every rule below still resolves against the static palette. ========================================================================== */ #bg { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); } #bg.is-live { opacity: 1; } /* Lift the document above the canvas. The header keeps style.css's position:fixed — a blanket `position: relative` here would silently unstick the nav. */ main, .site-footer { position: relative; z-index: 1; } /* The scene replaces the old CSS backdrop entirely. */ .hero-grid, .hero::after { display: none; } .hero { background: transparent; } /* Sections are sheets that dissolve at their own edges. A flat alpha cannot satisfy both readings at once: opaque enough for body text is opaque enough to hide the scene. So the tint is solid across the text column and fades out through the section's top and bottom padding, where no text lives. The scene stays sharp in every seam — no backdrop-filter, which would blur it there too — and the page breathes the whole way down. */ .capabilities, .approach, .contact { border-block: 1px solid var(--line); background: linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--panel) 92%, transparent) 104px, color-mix(in srgb, var(--panel) 92%, transparent) calc(100% - 104px), transparent 100%); } /* Deliberately the most open band on the page: short copy, scene at full strength. This is also where the handoff happens, so it is the one section the eye should be on the geometry rather than the text. */ .foundation { background: color-mix(in srgb, var(--stage) 18%, transparent); } .site-header { /* Backed by --panel, not --stage. The bar is fixed, so it crosses the whole scroll ramp on screen and needs a surface of its own rather than a tint of ground that is moving underneath it. */ background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .site-footer { background: color-mix(in srgb, var(--panel) 70%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } /* Panels that have to stay readable over moving geometry. */ .system-map, .principles, .form { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }