/* ═══════════════════════════════════════════════════════ Project Lunar — Falling Star Background (site-wide) Fixed canvas layer behind all content. Paired with assets/js/starfield.js. Void-black base lives on so the canvas (z-index:-1) shows through transparent and any page sections we make see-through. ═══════════════════════════════════════════════════════ */ html { background-color: #0A0A0A; } body { background-color: transparent; } .lunar-starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; } /* Soft cosmic vignette over the stars for depth */ .lunar-starfield-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% -10%, rgba(26, 86, 219, 0.10) 0%, transparent 55%), radial-gradient(90% 70% at 50% 110%, rgba(201, 168, 76, 0.06) 0%, transparent 60%); } /* Let the starfield show through standard-page sections (blog, legal, generic pages). The front page (.has-scroll-story) keeps its own full-bleed opaque scenes. */ body:not(.has-scroll-story) .section, body:not(.has-scroll-story) .section--dark { background-color: transparent; } @media (prefers-reduced-motion: reduce) { .lunar-starfield-veil { opacity: 0.6; } }