/* ===================================================================== BACKGROUND FIELD — index.html only. Loads LAST, on purpose. ===================================================================== Two custom properties drive everything: --acc-rgb (the open product's hue, as bare "r,g,b" so rgba() can take it) and --lift (0 -> 1, how hard a run is working). js/bgfield.js writes both onto . STACKING — this was a live bug, do not undo it. A z-index:-1 pseudo of paints BEHIND body's own background. While body carried the opaque gradient, body::before (the 46px grid) never rendered at all, and a canvas layer behind the content could not render either. So the ground lives on , body is transparent, and the layers are: background the ground (unchanged from app-4.css) #bgfield z:-2 the WebGL field, screen-blended onto the ground body::before z:-1 the 46px grid, now catching the field's light body content everything else Move the ground back onto body and the bottom two layers vanish. ===================================================================== */ @property --lift { syntax: ""; inherits: true; initial-value: 0.2; } :root { --acc-rgb: 24, 224, 196; /* Sonari teal — the resting hue */ } html { background: radial-gradient(1100px 540px at 82% -10%, rgba(24, 224, 196, .13), transparent 60%), radial-gradient(900px 520px at -6% 108%, rgba(255, 106, 61, .10), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2) 60%, var(--bg)); } body { background: transparent; } #bgfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: none; /* js adds .on only once a GL context is live */ pointer-events: none; /* The shader outputs light on black. Screening black is a no-op, so the ground shows through untouched everywhere the field is dark. */ mix-blend-mode: screen; } #bgfield.on { display: block; } /* If a browser cannot screen-blend, the canvas would be a black rectangle sitting on the ground. Better to have no field at all. */ @supports not (mix-blend-mode: screen) { #bgfield.on { display: none; } } /* Reduced motion is handled in js — the drift freezes, while the hue and the intensity still resolve, because neither of those is movement. The field is also pulled back a little, since a still image of it is being stared at. */ @media (prefers-reduced-motion: reduce) { #bgfield.on { opacity: .72; } } /* Phones: the field is mostly hidden behind full-bleed cards anyway, and it is the one thing on the page that costs battery for nothing. */ @media (max-width: 720px) { #bgfield.on { opacity: .78; } }