/* LittleWorlds — shared atmosphere: storm clouds, lightning, plasma glows. Used by every page. Edit here once and it changes everywhere. */ /* ---------- sky ---------- */ .sky{ position:absolute;top:0;left:0;right:0;bottom:0; width:100%;max-width:100vw; z-index:-3;overflow:hidden;pointer-events:none; } .cloud{ position:absolute;left:0; width:var(--w); top:var(--y); animation:drift var(--t) linear infinite; animation-delay:var(--dl); will-change:transform; } .cloud svg{width:100%;height:auto;display:block} .cloud .body{opacity:var(--o)} .cloud .lightning,.cloud .backlight{opacity:0} .cloud.fire .lightning{animation:zap .52s linear} .cloud.fire .backlight{animation:zapglow .8s ease-out} @keyframes drift{ from{transform:translateX(-40vw)} to{transform:translateX(145vw)} } @keyframes zap{ 0%{opacity:0} 4%{opacity:1} 13%{opacity:.05} 20%{opacity:.9} 34%{opacity:0} 42%{opacity:.55} 58%{opacity:.02} 100%{opacity:0} } @keyframes zapglow{ 0%{opacity:0} 4%{opacity:.8} 16%{opacity:.22} 24%{opacity:.62} 100%{opacity:0} } .defs{position:absolute;width:0;height:0;overflow:hidden} /* ---------- glow layer ---------- */ .glows{ position:absolute;top:0;left:0;right:0;bottom:0; width:100%;max-width:100vw; z-index:-2;overflow:hidden;pointer-events:none; } .glow{ position:absolute;left:var(--x);top:var(--y); width:var(--w);aspect-ratio:1; transform:translate(-50%,-50%); opacity:var(--o); background:radial-gradient(circle, rgba(201,250,247,.42) 0%,rgba(53,224,216,.3) 20%, rgba(11,78,76,.22) 44%,transparent 68%); filter:blur(38px); animation:breathe var(--t) ease-in-out infinite; animation-delay:var(--dl); } @keyframes breathe{ 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} } /* Optional: dims the storm on a page. Unused right now. */ [data-sky="quiet"] .cloud .body{opacity:calc(var(--o) * .55)} [data-sky="quiet"] .glow{opacity:calc(var(--o) * .6)} @media (prefers-reduced-motion:reduce){ .glow,.cloud,.cloud .lightning,.cloud .backlight{animation:none} .cloud{transform:translateX(24vw)} }