/* AuraType deep space — shared (see deep-space.js). */
.deep{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#04050e}
.deep::after{content:"";position:absolute;inset:0;background:#010106;opacity:calc(var(--p,0)*.6)}
.deep-far,.deep-mid,.deep-near{position:absolute;inset:0}
.deep-far{opacity:calc(.9 - .4*var(--p,0));background-repeat:repeat,repeat}
.deep-mid{opacity:calc(.7 - .4*var(--p,0))}
.deep-near{opacity:calc(.7 - .5*var(--p,0))}
.deep-mid i,.deep-near i{position:absolute;left:0;top:0;display:block;will-change:transform;transition:opacity .5s ease}
.deep-near svg{display:block;overflow:visible}
.deep[data-variant="quiet"]{background:#03040b}
.deep[data-variant="quiet"] .deep-far{opacity:calc(.95 - .35*var(--p,0))}
.deep[data-variant="quiet"] .deep-mid{opacity:calc(.62 - .3*var(--p,0))}

/* rich variant (homepage): the page stays deep all the way down.
   .deep-haze is a 260%-tall layer of very soft nebula / galaxy-band light that drifts slowly with scroll progress,
   so every scroll position sees a different part of it. CSS only; the stars come from deep-space.js. */
.deep[data-variant="rich"]::after{opacity:calc(var(--p,0)*.18)}
.deep[data-variant="rich"] .deep-far{opacity:calc(.95 - .15*var(--p,0))}
.deep[data-variant="rich"] .deep-mid{opacity:calc(.8 - .1*var(--p,0))}
.deep[data-variant="rich"] .deep-near{opacity:calc(.75 - .15*var(--p,0))}
.deep-haze{display:none;position:absolute;left:0;right:0;top:0;height:260%;will-change:transform}
.deep[data-variant="rich"] .deep-haze{display:block;transform:translate3d(0,calc(var(--p,0)*-61.5%),0);
  background:
    linear-gradient(112deg,transparent 30%,rgba(120,135,215,.06) 41%,rgba(178,168,240,.102) 47%,rgba(150,170,235,.06) 53%,transparent 64%),
    radial-gradient(ellipse 46% 7% at 84% 14%,rgba(78,98,210,.204),transparent 72%),
    radial-gradient(ellipse 52% 8% at 10% 27%,rgba(128,84,205,.168),transparent 72%),
    radial-gradient(ellipse 34% 3.2% at 70% 35%,rgba(110,170,235,.144),transparent 70%),
    radial-gradient(ellipse 58% 9% at 22% 47%,rgba(70,100,205,.18),transparent 72%),
    radial-gradient(ellipse 44% 6% at 88% 58%,rgba(150,92,205,.156),transparent 72%),
    radial-gradient(ellipse 30% 2.6% at 16% 66%,rgba(238,206,150,.084),transparent 70%),
    radial-gradient(ellipse 56% 8% at 76% 74%,rgba(62,128,190,.156),transparent 72%),
    radial-gradient(ellipse 50% 9% at 12% 88%,rgba(110,84,205,.18),transparent 72%),
    radial-gradient(ellipse 60% 7% at 80% 96%,rgba(70,100,210,.168),transparent 72%)}
@media(max-width:819px){.deep[data-variant="rich"] .deep-haze{height:300%;transform:translate3d(0,calc(var(--p,0)*-66.6%),0)}}