.container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #0a0a0f;
  perspective: 1000px;
}

.beam {
  position: absolute;
  width: 2px;
  height: 200vh;
  top: -50%;
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity;
  animation: beam-pass var(--duration, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.beam::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--beam-color, #00ffff) 20%,
    var(--beam-color, #00ffff) 80%,
    transparent 100%
  );
  filter: blur(8px);
  box-shadow: 0 0 30px var(--beam-color, #00ffff),
              0 0 60px var(--beam-color, #00ffff),
              0 0 90px var(--beam-color, #00ffff);
}

@keyframes beam-pass {
  0% {
    opacity: 0;
    transform: translateX(var(--start-x, -50vw)) translateY(-20%) rotate(var(--angle, 25deg));
  }
  10% {
    opacity: var(--max-opacity, 0.6);
  }
  90% {
    opacity: var(--max-opacity, 0.6);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--end-x, 50vw)) translateY(20%) rotate(var(--angle, 25deg));
  }
}

/* Angle variants */
.shallow .beam {
  --angle: 10deg;
}

.steep .beam {
  --angle: 45deg;
}

/* Speed variants */
.fast .beam {
  --duration: 4s;
}

.slow .beam {
  --duration: 15s;
}

/* Density variants */
.sparse .beam {
  --max-opacity: 0.3;
}

.dense .beam {
  --max-opacity: 0.8;
}