/* ============================================================================= GameMart — PREMIUM GAMING BACKGROUND (assets/css/premium-fx.css) ----------------------------------------------------------------------------- v6 — WebGL/Three.js edition. All visuals (energy waves, neon streaks, cyber grid, particles, fog, energy pulses) are now rendered on #gvFxCanvas by assets/js/premium-fx.js via WebGL. This stylesheet only positions/sizes the fixed layer and handles the no-JS / reduced-motion / unsupported fallback. Readability rule carried over from the previous version: this layer never paints an opaque fill of its own — body.gv-storefront's own `background: var(--page-bg)` remains the real page background and shows through everywhere; the canvas is fully transparent (WebGL clear alpha 0) and every effect is drawn at low-to-moderate opacity with additive blending, so text/cards/UI on top are never competed with. ============================================================================= */ .gv-fx-bg { position: fixed; inset: 0; z-index: var(--z-below); overflow: hidden; pointer-events: none; contain: strict; } /* Legacy wash element kept in markup for backward compatibility with includes/header.php — intentionally unstyled/inert now that the WebGL canvas handles 100% of the visuals. */ .gv-fx-wash { display: none; } .gv-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Respect reduced-motion: the effect disappears entirely rather than freezing mid-animation or showing a static frame. */ @media (prefers-reduced-motion: reduce) { .gv-fx-bg { display: none; } } /* If WebGL isn't supported, premium-fx.js adds this class to and removes the canvas — nothing left to size/paint. */ html.no-webgl .gv-fx-bg { display: none; }