/* ============================================================ 02 — BACKGROUND CANVAS ============================================================ Purpose: Deep-space gradient (dark) / pastel gradient (light). Fixed body::before pseudo that does not scroll. body::after subtle atmospheric overlay. Canvas element positioning for JS layers (starfield, aurora, comets). Depends: 01-core-tokens-base.css (gradient tokens, z-index, reduced-motion class names) Enqueue: functions.php → byr-background (dep: byr-tokens) Migration note: Replaces WPCode snippet: · BYR — Background Gradient (Priority 6, ~9KB) Cleaned: · Removed the entire Elementor wrapper transparency block (~60 lines) — 100% dead code once Elementor is uninstalled. Astra wrapper transparency now lives in 01-core-tokens-base.css §17 with clean selectors. · Removed duplicate body { background } declarations (three separate background resets existed in the original; one authoritative version is now in §4). · Removed `!important !important` (invalid CSS). · Removed commented-out mode-dark/mode-light body background rules that were contradicting each other. TABLE OF CONTENTS: 1. Fixed Background Pseudo (body::before) 2. Dark Mode Gradient Animation 3. Light Mode Gradient Animation 4. Shared Pulse Animation 5. Atmospheric Overlay (body::after) 6. Glow Drift Animation 7. Canvas Layer Positioning (#byr-starfield, #byr-aurora, #byr-comets) 8. Light Mode Canvas Suppression 9. Reduced Motion Overrides ============================================================ */ /* ========================================================== 1. FIXED BACKGROUND PSEUDO (body::before) Position fixed so the gradient does not scroll. Oversized (inset: -50%) to cover all rotation angles without showing edges during animation. ========================================================== */ body::before { content: ''; position: fixed; inset: -50%; z-index: var(--z-background); pointer-events: none; animation: byrGradientShiftDark var(--bg-rotation-duration) linear infinite, byrPulse var(--bg-pulse-duration) ease-in-out infinite; } /* ========================================================== 2. DARK MODE GRADIENT ANIMATION Rotates from 165° → 255° → 345° over bg-rotation-duration. Deep-space corners defined in 01-core-tokens-base.css. ========================================================== */ @keyframes byrGradientShiftDark { 0% { background: linear-gradient( 165deg, var(--bg-deep-1) var(--bg-stop-1), var(--bg-deep-2) var(--bg-stop-2), var(--bg-deep-3) var(--bg-stop-3), var(--bg-deep-4) var(--bg-stop-4) ); } 50% { background: linear-gradient( 255deg, var(--bg-deep-1) var(--bg-stop-1), var(--bg-deep-2) var(--bg-stop-2), var(--bg-deep-3) var(--bg-stop-3), var(--bg-deep-4) var(--bg-stop-4) ); } 100% { background: linear-gradient( 345deg, var(--bg-deep-1) var(--bg-stop-1), var(--bg-deep-2) var(--bg-stop-2), var(--bg-deep-3) var(--bg-stop-3), var(--bg-deep-4) var(--bg-stop-4) ); } } /* ========================================================== 3. LIGHT MODE GRADIENT ANIMATION Swaps body::before to the soft pastel version when .mode-light is applied to the body or html element. ========================================================== */ .mode-light body::before { animation: byrGradientShiftLight var(--bg-rotation-duration) linear infinite, byrPulse var(--bg-pulse-duration) ease-in-out infinite; } @keyframes byrGradientShiftLight { 0% { background: linear-gradient( 165deg, var(--bg-light-1) var(--bg-stop-1), var(--bg-light-2) var(--bg-stop-2), var(--bg-light-3) var(--bg-stop-3), var(--bg-light-4) var(--bg-stop-4) ); } 50% { background: linear-gradient( 255deg, var(--bg-light-1) var(--bg-stop-1), var(--bg-light-2) var(--bg-stop-2), var(--bg-light-3) var(--bg-stop-3), var(--bg-light-4) var(--bg-stop-4) ); } 100% { background: linear-gradient( 345deg, var(--bg-light-1) var(--bg-stop-1), var(--bg-light-2) var(--bg-stop-2), var(--bg-light-3) var(--bg-stop-3), var(--bg-light-4) var(--bg-stop-4) ); } } /* ========================================================== 4. SHARED PULSE ANIMATION Subtle brightness + saturation breathing applied to body::before in both modes. ========================================================== */ @keyframes byrPulse { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.04) saturate(1.02); } } /* ========================================================== 5. ATMOSPHERIC OVERLAY (body::after) Two radial gradients that create a subtle directional glow over the rotating gradient. mix-blend-mode: screen adds light, never darkens. ========================================================== */ body::after { content: ''; position: fixed; inset: -20%; z-index: calc(var(--z-background) + 0); pointer-events: none; mix-blend-mode: screen; background: radial-gradient( circle at 30% 40%, rgba(255, 255, 255, 0.05), transparent 60% ), radial-gradient( circle at 70% 65%, rgba(255, 255, 255, 0.04), transparent 55% ); animation: byrGlowDrift var(--bg-glow-duration) ease-in-out infinite; } /* ========================================================== 6. GLOW DRIFT ANIMATION Irregular drift for body::after so the two radial gradients wander slightly over time. ========================================================== */ @keyframes byrGlowDrift { 0%, 100% { transform: translate(0, 0); opacity: 1; } 25% { transform: translate(3%, -2%); opacity: 0.85; } 50% { transform: translate(-2%, 3%); opacity: 0.92; } 75% { transform: translate(1%, 2%); opacity: 0.88; } } /* ========================================================== 7. CANVAS LAYER POSITIONING JS injects three elements for the animated space effects. These rules position them as fixed full-screen layers stacked above body::before. Z-index stack (all relative to --z-background: -10): body::before z: -10 (gradient) #byr-starfield z: -9 (+1) #byr-aurora z: -8 (+2) #byr-comets z: -7 (+3) Page content z: 1+ (var(--z-content) and above) ========================================================== */ #byr-starfield { position: fixed; inset: 0; z-index: calc(var(--z-background) + 1); pointer-events: none; opacity: var(--starfield-opacity, 1); } #byr-aurora { position: fixed; inset: 0; z-index: calc(var(--z-background) + 2); pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 3s ease-out; } #byr-aurora.active { opacity: 1; } #byr-comets { position: fixed; inset: 0; z-index: calc(var(--z-background) + 3); pointer-events: none; } /* ========================================================== 8. LIGHT MODE CANVAS SUPPRESSION In light mode the canvas effects are mostly invisible or distracting — suppress them to near-zero opacity. ========================================================== */ .mode-light #byr-starfield { opacity: 0.08; } .mode-light #byr-comets { opacity: 0.15; } .mode-light #byr-aurora { display: none; } /* ========================================================== 9. REDUCED MOTION OVERRIDES Freezes all background animations for users who prefer reduced motion. Both the @media query (OS preference) and the .motion-reduced JS class (toolbar toggle) are handled here. ========================================================== */ @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; transform: none; filter: none; } /* Hide flashing canvas layers */ #byr-aurora, #byr-comets { display: none; } /* Keep a faint static starfield for atmosphere */ #byr-starfield { opacity: 0.4; } } /* JS class version set by accessibility toolbar */ .motion-reduced body::before, .motion-reduced body::after { animation: none; transform: none; filter: none; } .motion-reduced #byr-aurora, .motion-reduced #byr-comets { display: none; } .motion-reduced #byr-starfield { opacity: 0.4; }