.stage {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
}

.grid-plane,
.signal-rain,
.field,
.sweep,
.scan-core {
  position: absolute;
  pointer-events: none;
}

.grid-plane {
  inset: -10svh -8vw;
  z-index: -4;
  opacity: 0.8;
  background:
    linear-gradient(rgba(7, 16, 24, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 16, 24, 0.052) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(7, 16, 24, 0.09) 1px, transparent 1.7px);
  background-size:
    42px 42px,
    42px 42px,
    28px 28px;
}

.grid-plane::before,
.grid-plane::after {
  content: "";
  position: absolute;
  inset: 0;
}

.grid-plane::before {
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(73, 105, 255, 0.13) 34.15%, transparent 34.45%),
    linear-gradient(25deg, transparent 0 56%, rgba(23, 200, 191, 0.14) 56.15%, transparent 56.45%),
    linear-gradient(153deg, transparent 0 72%, rgba(255, 95, 159, 0.1) 72.15%, transparent 72.45%);
}

.grid-plane::after {
  background:
    radial-gradient(circle at 14% 20%, rgba(23, 200, 191, 0.12), transparent 15rem),
    radial-gradient(circle at 66% 38%, rgba(73, 105, 255, 0.09), transparent 18rem),
    radial-gradient(circle at 86% 80%, rgba(255, 95, 159, 0.1), transparent 16rem);
}

.signal-rain {
  inset: 0;
  z-index: -3;
  opacity: 0.55;
  background:
    repeating-linear-gradient(100deg, transparent 0 78px, rgba(23, 200, 191, 0.14) 80px, transparent 84px),
    repeating-linear-gradient(64deg, transparent 0 118px, rgba(255, 95, 159, 0.1) 120px, transparent 124px);
}

.field {
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.floor-line {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(7, 16, 24, 0.13);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.floor-line.broad {
  stroke: rgba(7, 16, 24, 0.16);
}

.floor-line.grid-cut,
.floor-line.vertical,
.floor-line.horizontal {
  fill: none;
  stroke: rgba(7, 16, 24, 0.08);
}

.floor-line.vertical,
.floor-line.horizontal {
  stroke-dasharray: 5 18;
}

.energy-field {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.5;
  stroke-dasharray: 7 18;
  vector-effect: non-scaling-stroke;
}

.field-one {
  stroke: rgba(23, 200, 191, 0.42);
}

.field-two {
  stroke: rgba(73, 105, 255, 0.3);
}

.field-three {
  stroke: rgba(255, 95, 159, 0.32);
}

.spark {
  fill: var(--cyan);
  opacity: 0.5;
  transform-box: fill-box;
  transform-origin: center;
}

.spark-b,
.spark-e {
  fill: var(--blue);
}

.spark-c,
.spark-f {
  fill: var(--pink);
}

.spark-d {
  fill: var(--amber);
}

.sweep {
  z-index: -1;
  width: clamp(280px, 38vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(7, 16, 24, 0.07);
  mix-blend-mode: multiply;
}

.sweep::before,
.sweep::after,
.scan-core::before,
.scan-core::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.sweep::before {
  inset: 12%;
  border-radius: inherit;
  border: 1px dashed rgba(23, 200, 191, 0.28);
}

.sweep::after {
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(23, 200, 191, 0.7), transparent);
  transform-origin: left center;
}

.sweep-one {
  left: 8%;
  top: 6%;
}

.sweep-two {
  right: 4%;
  bottom: 5%;
  border-color: rgba(73, 105, 255, 0.08);
  transform: scale(0.86);
}

.sweep-two::before {
  border-color: rgba(255, 95, 159, 0.22);
}

.sweep-two::after {
  background: linear-gradient(90deg, rgba(255, 95, 159, 0.6), transparent);
}

.scan-core {
  left: 58%;
  top: 40%;
  z-index: -1;
  width: 12px;
  height: 76px;
  border-radius: 999px;
  background: rgba(7, 16, 24, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 22px rgba(23, 200, 191, 0.4);
}

.scan-core::before {
  left: -80px;
  top: 50%;
  width: 172px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 200, 191, 0.38), transparent);
}

.scan-core::after {
  left: 50%;
  top: -122px;
  width: 1px;
  height: 318px;
  background: linear-gradient(180deg, transparent, rgba(73, 105, 255, 0.32), transparent);
}

@media (max-width: 1023px) {
  .signal-rain,
  .sweep-one,
  .scan-core {
    display: none;
  }

  .grid-plane {
    opacity: 0.5;
    background:
      linear-gradient(rgba(7, 16, 24, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(7, 16, 24, 0.045) 1px, transparent 1px);
    background-size:
      36px 36px,
      36px 36px;
  }

  .grid-plane::before,
  .grid-plane::after {
    display: none;
  }

  .field {
    position: fixed;
    height: 100svh;
    opacity: 0.7;
  }

  .sweep-two {
    position: fixed;
    right: -12%;
    bottom: -8%;
    width: 60vw;
  }
}