/* * BG Aurora — premium ambient gradient for non-game pages. * * Replaces the multi-game-collage tile-grid (which read as "vibecoded * AI-generated dark template") with three large brand-colored blobs that * slowly drift across the viewport, plus a subtle SVG noise overlay for * organic texture. * * Three blobs use distinct keyframes + offsets so their motion never * loops in lockstep. GPU-only (transform + opacity only). Respects * prefers-reduced-motion. * * Loaded conditionally from layout.blade.php (only when $bgMode is auto, * collage, or aurora — i.e. anywhere the aurora dispatcher might render). * * See: docs/cc/background-system-2026-05-09-implementation-plan.md * memory feedback_bg_visual_iteration.md (V4 sweet-spot tuning) */ @keyframes bg-aurora-drift-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(6%, 4%, 0) scale(1.08); opacity: 0.75; } } @keyframes bg-aurora-drift-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; } 50% { transform: translate3d(-5%, -3%, 0) scale(1.06); opacity: 0.65; } } @keyframes bg-aurora-drift-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.4; } 50% { transform: translate3d(4%, -5%, 0) scale(1.1); opacity: 0.55; } } .bg-aurora__blob { /* GPU-promote so animations stay off the main thread */ transform: translateZ(0); } /* * Drift animation is DEFERRED until after the critical render. public.js adds * `.aurora-go` to on the first idle tick post-load. Until then the blobs * sit at their resting gradient (still reads as "premium ambient") — this keeps * the animation's per-frame raster cost out of the LCP window, where it was * measured at ~1.35 s mobile LCP (Lighthouse, see * docs/cc/2026-06-20-homepage-aurora-lcp.md). Graceful: if `.aurora-go` is never * added (no JS), the blobs simply stay static — identical to reduced-motion. * `will-change` is gated too so an idle (static) page holds no extra GPU layer. */ .aurora-go .bg-aurora__blob { will-change: transform, opacity; } .aurora-go .bg-aurora__blob--1 { animation: bg-aurora-drift-1 18s ease-in-out infinite; } .aurora-go .bg-aurora__blob--2 { animation: bg-aurora-drift-2 22s ease-in-out infinite; animation-delay: -4s; } .aurora-go .bg-aurora__blob--3 { animation: bg-aurora-drift-3 26s ease-in-out infinite; animation-delay: -10s; } /* * Accessibility: kill the motion entirely for users who request it. * Blobs stay at their starting opacity (still atmospheric, not invisible). * Scoped under .aurora-go to match the animation rules' specificity so this * override always wins once the class is present. */ @media (prefers-reduced-motion: reduce) { .aurora-go .bg-aurora__blob--1, .aurora-go .bg-aurora__blob--2, .aurora-go .bg-aurora__blob--3 { animation: none; } }