on load and * fills it with the appropriate SVG. CSS handles the animation. * * User can dial intensity in Codex Settings: * :root[data-atmospheric-bg="on"] → full animations + opacity * :root[data-atmospheric-bg="minimal"] → static, dim, no motion * :root[data-atmospheric-bg="off"] → not injected at all */ /* The atmosphere layer sits above the existing page bg gradient but below all content. Pointer-events:none so it never blocks clicks. */ #op-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* The aged-paper grain is layered ON TOP of the atmosphere via existing body::before in each page — they composite cleanly. */ } #op-atmosphere svg { width: 100%; height: 100%; display: block; } /* All page main content lifts above the atmosphere */ body > header, body > main, body > footer, body > section { position: relative; z-index: 1; } /* Settings: minimal mode stops animation + dims */ :root[data-atmospheric-bg="minimal"] #op-atmosphere { opacity: 0.45; } :root[data-atmospheric-bg="minimal"] #op-atmosphere * { animation: none !important; } /* Off mode hides entirely */ :root[data-atmospheric-bg="off"] #op-atmosphere { display: none !important; } /* ─────────────── Haki atmosphere ─────────────── */ .atm-haki #op-atmosphere { background: radial-gradient(ellipse at 30% 20%, rgba(212,164,74,0.07) 0%, transparent 45%), radial-gradient(ellipse at 70% 80%, rgba(224,80,80,0.06) 0%, transparent 50%); } .atm-haki #op-atmosphere .bolt, .atm-haki #op-atmosphere .bolt-outline { fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Black outline ride underneath the coloured core — gives that thick inked-comic-panel look from the manga (Luffy vs Kaidou rooftop). */ .atm-haki #op-atmosphere .bolt-outline { stroke: #08040c; opacity: 0.85; } .atm-haki #op-atmosphere .bolt { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor); } .atm-haki #op-atmosphere .bolt.gold { color: #f5c95e; stroke: #f5c95e; } .atm-haki #op-atmosphere .bolt.crimson { color: #e04030; stroke: #e04030; } .atm-haki #op-atmosphere .bolt.indigo { color: #6a9ec8; stroke: #6a9ec8; } /* The whole bolt-group flickers as one — outline + core + branches all fade together */ @keyframes haki-flicker { 0% { opacity: 0; } 2% { opacity: 0.95; } 4% { opacity: 0.5; } 6% { opacity: 1.0; } 10% { opacity: 0.3; } 14% { opacity: 0; } 100% { opacity: 0; } } .atm-haki #op-atmosphere .bolt-group { animation: haki-flicker var(--dur, 7s) ease-in-out var(--delay, 0s) infinite; opacity: 0; } /* Conqueror's coating overlay — slow pulsing glow */ @keyframes haki-pulse { 0%, 100% { opacity: 0.12; transform: scale(1); } 50% { opacity: 0.22; transform: scale(1.05); } } .atm-haki #op-atmosphere .conqueror-aura { animation: haki-pulse 8s ease-in-out infinite; transform-origin: center; } /* ─────────────── Treasure atmosphere ─────────────── */ .atm-treasure #op-atmosphere { background: radial-gradient(ellipse at 20% 30%, rgba(212,164,74,0.10) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(184,104,42,0.08) 0%, transparent 55%), linear-gradient(180deg, transparent 0%, rgba(58,40,24,0.18) 100%); } /* Coins: slow gentle twinkle */ @keyframes coin-twinkle { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.18); } } .atm-treasure #op-atmosphere .coin { animation: coin-twinkle var(--dur, 6s) ease-in-out var(--delay, 0s) infinite; transform-origin: center; transform-box: fill-box; } /* Sparkle stars on chests + jewels */ @keyframes sparkle-star { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } } .atm-treasure #op-atmosphere .sparkle { animation: sparkle-star var(--dur, 4s) ease-in-out var(--delay, 0s) infinite; transform-origin: center; transform-box: fill-box; } /* Treasure chests — Oda-styled, more detailed silhouette layer */ .atm-treasure #op-atmosphere .chest { opacity: 0.7; } .atm-treasure #op-atmosphere .jewel { filter: drop-shadow(0 0 8px currentColor); } .atm-treasure #op-atmosphere .beli-coin { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } /* Tiny coin sparkles twinkle faster than the airborne stars */ .atm-treasure #op-atmosphere .coin-sparkle { filter: drop-shadow(0 0 4px #fff8c8); }