/* ── HERO CLOUDS — drifting cloud background for the hero ──────────────── Reproduces the `#explore-3d` ("Engineered in 3D") background treatment and moves it onto the hero. Loaded ONLY by hero-clouds-sample.html. Nothing here is linked from index.html, so the live homepage is unaffected until this is approved. Every rule is scoped under .hero-clouds (a class added to in the sample) so even if this file were linked elsewhere by mistake it would be inert. ────────────────────────────────────────────────────────────────────────── */ /* ── Base treatment ─────────────────────────────────────────────────────── Copied verbatim from .explore-3d in the 3D build so the hero reads as the same environment: two brand radial washes over a near-black base. */ .hero-clouds .test-hero-bg { background: radial-gradient(120% 90% at 78% 42%, rgba(239, 35, 60, 0.14) 0%, rgba(239, 35, 60, 0) 60%), radial-gradient(90% 80% at 12% 30%, rgba(60, 200, 255, 0.10) 0%, rgba(60, 200, 255, 0) 62%), #0d1015; } /* ── Cloud layer ───────────────────────────────────────────────────────── Sits at the very back of .test-hero-bg, above the gradients but below the grid/blueprint/vignette layers the hero keeps. */ .hero-clouds .hero-cloud-layer { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; /* Poster is painted by CSS, so the hero still shows clouds when autoplay is refused, when JS is off, and before the first video frame decodes. The