/* Asteroid backdrop scaffolding — fixed-position canvas + atmospheric glows + center vignette. Mounted by /shared/aurora-live.js into every page that has . */ #aurora-root { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } #aurora-root > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .aurora-glow-a, .aurora-glow-b { position: absolute; width: 36rem; height: 36rem; filter: blur(60px); mix-blend-mode: screen; pointer-events: none; } .aurora-glow-a { top: -10rem; left: -8rem; background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.32), transparent 70%); } .aurora-glow-b { top: 30%; right: -10rem; width: 30rem; height: 30rem; background: radial-gradient(circle, rgb(var(--accent2-rgb) / 0.24), transparent 70%); } .aurora-vignette { position: absolute; inset: 0; background: radial-gradient( ellipse 60% 50% at 50% 42%, rgb(var(--bg-rgb) / 0.78) 0%, rgb(var(--bg-rgb) / 0.5) 55%, transparent 100% ); pointer-events: none; } /* ---------- page chrome integration ---------- */ body.aurora-page { min-height: 100vh; } body.aurora-page main { position: relative; z-index: 1; padding-bottom: 4rem; } body.aurora-page footer { position: relative; z-index: 1; } /* ---------- reduced motion ---------- */ html[data-reduced-motion="true"] .aurora-glow-a, html[data-reduced-motion="true"] .aurora-glow-b { filter: blur(70px); }