/* Shared style backgrounds: the sky, stars and live-background canvases for all five styles.
 Used by every page through site.css, and loaded directly by the tool pages that have their own look. */
[data-universe="cosmic"]{--page:#0b0716 url(/assets/v2/nebula-bg.webp) center/cover; --sky-1:transparent; --sky-2:transparent; --sky-3:transparent; --sky-4:transparent; --star:255,255,255;}
[data-universe="inferno"]{--page:linear-gradient(165deg,#3a0a02,#7a1d04 45%,#2a0702); --sky-1:rgba(255,90,20,.5); --sky-2:rgba(255,200,60,.28); --sky-3:rgba(200,30,10,.45); --sky-4:rgba(120,20,0,.6); --star:255,210,150;}
[data-universe="comic"]{--page:linear-gradient(165deg,#ff4fc3,#8a3cff 50%,#2fb8ff); --sky-1:rgba(255,255,120,.35); --sky-2:rgba(198,255,61,.3); --sky-3:rgba(255,255,255,.2); --sky-4:rgba(255,61,187,.4); --star:255,255,255;}
[data-universe="minimal"]{--page:linear-gradient(180deg,#f7f6f2,#eceae4); --sky-1:rgba(123,47,224,.07); --sky-2:rgba(120,140,170,.08); --sky-3:rgba(123,47,224,.04); --sky-4:rgba(255,255,255,.5); --star:30,40,70;}
[data-universe="luxe"]{--page:linear-gradient(165deg,#2a2114,#4a3a1e 50%,#1c160c); --sky-1:rgba(230,190,90,.3); --sky-2:rgba(160,120,50,.3); --sky-3:rgba(255,235,180,.12); --sky-4:rgba(80,60,25,.5); --star:255,230,180;}
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--page)}
.sky::before,.sky::after{content:'';position:absolute;inset:-20%}
.sky::before{background:
  radial-gradient(40% 32% at 16% 14%,var(--sky-1),transparent 70%),
  radial-gradient(36% 30% at 88% 22%,var(--sky-2),transparent 70%),
  radial-gradient(44% 34% at 72% 84%,var(--sky-3),transparent 70%),
  radial-gradient(48% 38% at 10% 80%,var(--sky-4),transparent 72%);
  animation:drift 46s ease-in-out infinite alternate}
.sky::after{background:radial-gradient(28% 22% at 55% 45%,var(--sky-2),transparent 70%),radial-gradient(24% 20% at 35% 62%,var(--sky-1),transparent 70%);opacity:.6;animation:drift 60s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.sky::before,.sky::after{animation:none}}
[data-universe="cosmic"] .sky{background:linear-gradient(180deg,rgba(8,5,20,.18),rgba(8,5,20,.38))}
[data-universe="cosmic"] .sky::before,[data-universe="cosmic"] .sky::after{display:none}
#comicLive{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none}
[data-universe="comic"] .sky,[data-universe="comic"] #stars{display:none}
#cosmicLive{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none}
[data-universe="cosmic"] .sky,[data-universe="cosmic"] #stars{display:none}
[data-universe="minimal"] #stars{display:none}