/* ========================================================================== HOST — the backdrop. A flat dark field reads as "unfinished" on a big screen. This builds depth out of layered CSS only: no images, no requests, no extra bytes over the wire, and it scales to any TV. Four layers, back to front: 1. deep radial wash (colour, corner-weighted) 2. diagonal hatch (fine texture, catches the light) 3. slow-drifting colour blobs (movement without distraction) 4. grain (already in base.css, sits on top) ========================================================================== */ /* Layers 1 + 2 go on , not on a pseudo-element. Painting order: the root's background comes first, THEN negative-z-index children, THEN in-flow backgrounds. So an opaque `body` background would bury anything at z-index -1. `body` is therefore transparent and the root carries the backdrop. */ html { background: /* fine 45-degree hatch, barely there but it kills the flatness */ repeating-linear-gradient( 45deg, rgba(255, 255, 255, .014) 0px, rgba(255, 255, 255, .014) 1px, transparent 1px, transparent 7px ), /* corner washes in the brand hues, kept very low so text stays readable */ radial-gradient(85% 60% at 8% 0%, rgba(234, 88, 125, .13), transparent 62%), radial-gradient(75% 55% at 96% 8%, rgba(235, 201, 90, .09), transparent 60%), radial-gradient(90% 65% at 50% 108%, rgba(186, 145, 241, .11), transparent 66%), /* base tone, very slightly lifted off pure background at the top */ linear-gradient(180deg, #12121f 0%, #0b0b12 55%, #0a0a11 100%); background-attachment: fixed; } /* Must be see-through or it buries the blobs. */ body { background: transparent !important; } /* Layer 3: large soft blobs on long, offset drifts. Slow enough to read as ambient light rather than animation. */ .bg-blobs { position: fixed; inset: -20%; z-index: -1; pointer-events: none; overflow: hidden; } .bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; } .bg-blob-1 { width: 52vw; height: 52vw; left: -8%; top: 2%; background: radial-gradient(circle, rgba(234, 88, 125, .30), transparent 68%); animation: drift1 34s ease-in-out infinite; } .bg-blob-2 { width: 46vw; height: 46vw; right: -6%; bottom: 0%; background: radial-gradient(circle, rgba(186, 145, 241, .26), transparent 68%); animation: drift2 44s ease-in-out infinite; } .bg-blob-3 { width: 34vw; height: 34vw; left: 44%; top: 52%; background: radial-gradient(circle, rgba(235, 201, 90, .16), transparent 70%); animation: drift3 52s ease-in-out infinite; } @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7vw, 5vh) scale(1.12); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-6vw, -7vh) scale(.94); } } @keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(.95); } 50% { transform: translate(-5vw, 4vh) scale(1.15); } } /* The lobby is the screen people stare at longest while waiting, so it gets a little more presence. */ #s-lobby { position: relative; } #s-lobby::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 46% at 26% 46%, rgba(235, 201, 90, .10), transparent 70%); } /* Blurred blobs are the most expensive thing on the page. Anyone who has asked for less motion gets them held still rather than removed - the depth stays, the drifting stops. base.css handles the animation kill; this drops the blur cost too, which matters on a weak TV browser. */ @media (prefers-reduced-motion: reduce) { .bg-blob { filter: blur(70px); opacity: .38; } }