/* CLUB LASER INTRO */
#intro-overlay{
  position:fixed; 
  inset:0; 
  z-index:9999;
  background:#000; 
  overflow:hidden;
}

/* Laser container with perspective */
.laser-container{
  position:absolute;
  inset:0;
  perspective:1200px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  overflow: hidden;
  z-index: 1;
}

/* Individual laser beam */
.laser-beam{
  position:absolute;
  left:50%;
  top:40%;
  width:3px;
  height:200vh;
  transform-origin: top center;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(0,184,255,.1) 10%,
    rgba(0,184,255,1) 25%,
    rgba(0,184,255,1) 40%,
    rgba(255,0,255,1) 60%,
    rgba(255,0,255,1) 75%,
    rgba(255,0,255,.1) 90%,
    transparent 100%
  );
  filter: blur(1px);
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* Glow overlay for each beam */
.laser-beam::after{
  content:'';
  position:absolute;
  inset:0;
  background:inherit;
  filter: blur(8px);
  transform:scaleX(3);
}

/* Alt color variant */
.laser-beam.alt{
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,0,255,.1) 10%,
    rgba(255,0,255,1) 25%,
    rgba(255,0,255,1) 40%,
    rgba(0,184,255,1) 60%,
    rgba(0,184,255,1) 75%,
    rgba(0,184,255,.1) 90%,
    transparent 100%
  );
}

/* Laser sweep animation */
@keyframes laserSweep{
  0% {
    transform: translateX(-50%) rotateZ(var(--angle)) scaleY(0) translateY(-50vh);
    opacity:0;
  }
  10% {
    opacity:0.8;
  }
  50% {
    transform: translateX(-50%) rotateZ(var(--angle)) scaleY(1) translateY(0);
    opacity:1;
  }
  90% {
    opacity:0.8;
  }
  100% {
    transform: translateX(-50%) rotateZ(var(--angle)) scaleY(0.8) translateY(100vh);
    opacity:0;
  }
}

/* Neon circle */
.neon-circle{
  position:absolute;
  left:50%;
  top:40%;
  transform:translate(-50%, -50%);
  width:min(45vmin,380px);
  height:min(45vmin,380px);
  border-radius:50%;
  background: #000;
  opacity:0;
  animation: neonFlicker 1600ms 800ms forwards;
  z-index: 10;
}

.neon-circle::before{
  content:"";
  position:absolute;
  inset:-50px;
  border-radius:50%;
  background: radial-gradient(circle at 50% 0%, #00b8ff 0%, #ff00ff 50%, #00b8ff 100%);
  filter: blur(30px);
  opacity: 0.8;
  z-index: -1;
}

@keyframes neonFlicker{
  0%{opacity:0}
  15%{opacity:1}
  20%{opacity:0.2}
  35%{opacity:1}
  40%{opacity:0.4}
  55%{opacity:1}
  60%{opacity:0.6}
  75%{opacity:1}
  100%{opacity:1}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .laser-beam{animation-duration:400ms !important}
  .neon-circle{animation:none; opacity:1}
}