/* OverWatch — the stage environment (2026-07-06, from Oscar's reference boards). Not a flat gradient: the app floats over a DATA ENVIRONMENT — a perspective grid floor scrolling toward the horizon, a fine dot-matrix field, colored bokeh light spots, and a glowing horizon line. Apply class="ow-stage" to (or any full-viewport wrapper). Layers are fixed + pointer-none. */ .ow-stage{ position:relative; isolation:isolate; background:var(--bg-hud); background-attachment:fixed; } /* dot-matrix field + bokeh lights + horizon glow */ .ow-stage::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: /* bokeh spots — accent / magenta / violet / green, soft and defocused */ radial-gradient(120px 120px at 12% 22%, color-mix(in srgb,var(--magenta) 16%,transparent), transparent 70%), radial-gradient(90px 90px at 87% 14%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 70%), radial-gradient(70px 70px at 74% 38%, color-mix(in srgb,var(--violet) 16%,transparent), transparent 70%), radial-gradient(56px 56px at 28% 52%, color-mix(in srgb,var(--green) 10%,transparent), transparent 70%), radial-gradient(100px 100px at 94% 62%, color-mix(in srgb,var(--magenta) 12%,transparent), transparent 70%), /* horizon glow band where the floor meets the sky */ radial-gradient(60% 14% at 50% 64%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 100%), /* fine dot-matrix field over everything */ radial-gradient(circle at 1.2px 1.2px, color-mix(in srgb,var(--accent) 22%,transparent) 1.2px, transparent 1.7px); background-size:auto,auto,auto,auto,auto,auto,27px 27px; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.4) 100%); mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.4) 100%); } /* perspective data-grid floor, scrolling slowly toward the viewer */ .ow-stage::after{ content:'';position:fixed;left:-30%;right:-30%;bottom:-14%;height:52vh;z-index:-1;pointer-events:none; background: linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent) 1px,transparent 1px) 0 0/100% 44px, linear-gradient(90deg,color-mix(in srgb,var(--accent) 50%,transparent) 1px,transparent 1px) 0 0/58px 100%, linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--magenta) 7%,transparent) 100%); transform:perspective(640px) rotateX(63deg); transform-origin:50% 100%; opacity:.17; animation:owFloorScroll 4.5s linear infinite; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); } @keyframes owFloorScroll{to{background-position:0 44px,0 0,0 0;}} /* calm escape hatch (matches the product's ?calm convention) */ .calm .ow-stage::after,.ow-stage.calm::after{animation:none;}