#net{position:fixed;inset:0;z-index:0;pointer-events:none}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 100% 70% at 50% 0%,transparent 40%,rgba(5,5,7,.85) 100%);
}

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

.cur-dot,.cur-ring{
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;
}
.cur-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cur-ring{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s;
}
.cur-ring.grow{width:70px;height:70px;border-color:var(--cyan)}
@media(max-width:900px){.cur-dot,.cur-ring{display:none}}

.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9997;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));
  transform:scaleX(0);transform-origin:0 50%;
}