.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-base);
  isolation: isolate;
}

.bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 52% -12%, rgba(255,255,255,.28), transparent 62%),
    radial-gradient(ellipse 60% 50% at 15% 10%, var(--accent-violet-soft), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 30%, var(--accent-blue-soft), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 100%, var(--accent-cyan-soft), transparent 70%),
    linear-gradient(180deg,#07071a 0%,var(--bg-base) 60%,#03030c 100%);
}


.bg-network-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.88;
  mix-blend-mode:screen;
}


.bg-blob {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  mix-blend-mode:screen;
  will-change:transform;
  transform:translate3d(0,0,0);
}


/* VIOLET */

.bg-blob--violet {

  top:-12%;
  left:-8%;

  width:55vmax;
  height:55vmax;

  background:
  radial-gradient(circle at 50% 50%,
  rgba(124,58,237,.85) 0%,
  rgba(124,58,237,.25) 45%,
  transparent 70%);

  opacity:.42;
}


/* BLUE */

.bg-blob--blue {

  top:10%;
  right:-15%;

  width:60vmax;
  height:60vmax;

  background:
  radial-gradient(circle at 50% 50%,
  rgba(59,130,246,.75) 0%,
  rgba(59,130,246,.22) 45%,
  transparent 70%);

  opacity:.36;
}



/* CYAN */

.bg-blob--cyan {

  bottom:-20%;
  left:20%;

  width:65vmax;
  height:65vmax;

  background:
  radial-gradient(circle at 50% 50%,
  rgba(6,182,212,.7) 0%,
  rgba(6,182,212,.2) 45%,
  transparent 70%);

  opacity:.46;
}



/* MAGENTA */

.bg-blob--magenta {

  top:40%;
  left:35%;

  width:35vmax;
  height:35vmax;

  background:
  radial-gradient(circle at 50% 50%,
  rgba(168,85,247,.45) 0%,
  rgba(99,102,241,.18) 50%,
  transparent 75%);

  opacity:.28;
}



/* GRID */

.bg-grid {

 position:absolute;
 inset:0;

 background-image:
 linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
 linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);

 background-size:56px 56px;

 mask-image:
 radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 90%);

 -webkit-mask-image:
 radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 90%);

 opacity:.18;
}




/* NOISE */

.bg-noise {

 position:absolute;
 inset:0;

 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

 background-size:220px 220px;

 opacity:.08;
 mix-blend-mode:overlay;

}




/* VIGNETTE */

.bg-vignette {

position:absolute;
inset:0;

background:
linear-gradient(
180deg,
rgba(255,255,255,.16),
transparent 20%,
rgba(0,0,0,.18) 58%,
rgba(0,0,0,.72)
),

radial-gradient(
ellipse 90% 80% at 50% 50%,
transparent 34%,
rgba(0,0,0,.64)
);

}



/* CURSOR LIGHT */

.bg-cursor {

position:absolute;

width:18px;
height:18px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.95),
rgba(124,58,237,.65) 40%,
transparent 70%
);


filter:blur(3px);

opacity:0;

pointer-events:none;

will-change:transform;

transition:
opacity .4s ease;

}



.bg-cursor.is-active {

opacity:1;

}




/* AUTOMATIC FLOAT */

@media(prefers-reduced-motion:no-preference){


.bg-blob--violet {

animation:bg-float-a 35s ease-in-out infinite;

}


.bg-blob--blue {

animation:bg-float-b 45s ease-in-out infinite;

}


.bg-blob--cyan {

animation:bg-float-c 55s ease-in-out infinite;

}


.bg-blob--magenta {

animation:bg-float-d 40s ease-in-out infinite;

}

}




@keyframes bg-float-a {

0%,100%{

transform:translate3d(0,0,0) scale(1);

}

50%{

transform:translate3d(8vw,6vh,0) scale(1.08);

}

}




@keyframes bg-float-b {

0%,100%{

transform:translate3d(0,0,0) scale(1);

}

50%{

transform:translate3d(-7vw,5vh,0) scale(1.1);

}

}




@keyframes bg-float-c {

0%,100%{

transform:translate3d(0,0,0) scale(1);

}

50%{

transform:translate3d(5vw,-7vh,0) scale(1.05);

}

}




@keyframes bg-float-d {

0%,100%{

transform:translate3d(0,0,0) scale(1);

}

50%{

transform:translate3d(-6vw,-5vh,0) scale(1.12);

}

}