/* The particle canvas and the two layers that sit on top of it. */

/* Hidden until the first frame is rendered, so no empty canvas flashes. */
#stage{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease}
#stage.ready{opacity:1}
#swarm{width:100%;height:100%;display:block}

/* Ambient halo, recoloured live by the shader through --live-dim */
.aura{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%,transparent 38%,rgba(4,4,14,.55) 72%,var(--void) 100%)}

.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}