/* Dark warehouse vibe, INSANE COLOR. All comments in English. */

html, body {
  height: 100%;
  margin: 0;
  background: #010101;
  overflow: hidden;
}

#stage{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, rgba(10,10,10,0.18), rgba(0,0,0,0.99)),
    linear-gradient(180deg, #020202, #000);
}

/* Butterchurn canvas: crank color hard */
#viz{
  width: 100%;
  height: 100%;
  display: block;

  /* Maximum color pop */
  filter: saturate(3.6) contrast(1.28) brightness(1.10);

  user-select: none;
  -webkit-user-select: none;
}

/* Massive color wash overlay */
#stage::before{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;

  background:
    conic-gradient(
      from 0deg,
      rgba(255, 0, 90, 0.30),
      rgba(0, 255, 210, 0.28),
      rgba(120, 0, 255, 0.28),
      rgba(255, 190, 0, 0.24),
      rgba(0, 140, 255, 0.28),
      rgba(255, 0, 90, 0.30)
    );

  mix-blend-mode: color-dodge;
  opacity: 0.44;
  filter: blur(26px);
  animation: hueSpin 6.0s linear infinite;
}

/* "Laser" layer (adds more moving color energy) */
#stage .laser{
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      35deg,
      rgba(255,0,120,0.10) 0px,
      rgba(255,0,120,0.10) 2px,
      rgba(0,255,220,0.10) 6px,
      rgba(0,255,220,0.10) 8px,
      rgba(120,0,255,0.10) 14px,
      rgba(120,0,255,0.10) 16px,
      rgba(255,180,0,0.10) 22px,
      rgba(255,180,0,0.10) 24px,
      rgba(0,0,0,0.00) 30px
    );
  mix-blend-mode: screen;
  opacity: 0.30;
  filter: blur(6px) saturate(2.2);
  animation: lasers 4.2s linear infinite;
}

/* Warehouse overlays: scanlines + vignette + flicker */
#stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 5px
    ),
    radial-gradient(85% 70% at 50% 50%, rgba(0,0,0,0.00), rgba(0,0,0,0.78));

  mix-blend-mode: overlay;
  opacity: 0.56;
  animation: flicker 6.0s infinite steps(2, end);
}

@keyframes hueSpin{
  0%   { filter: blur(26px) hue-rotate(0deg) saturate(2.2); }
  100% { filter: blur(26px) hue-rotate(360deg) saturate(2.2); }
}

@keyframes lasers{
  0%   { transform: translate3d(-6%, -4%, 0) rotate(0.4deg); filter: blur(6px) hue-rotate(0deg) saturate(2.2); }
  50%  { transform: translate3d(6%, 4%, 0) rotate(-0.4deg); filter: blur(7px) hue-rotate(160deg) saturate(2.4); }
  100% { transform: translate3d(-6%, -4%, 0) rotate(0.4deg); filter: blur(6px) hue-rotate(360deg) saturate(2.2); }
}

@keyframes flicker{
  0%   { opacity: 0.52; }
  9%   { opacity: 0.62; }
  13%  { opacity: 0.48; }
  21%  { opacity: 0.68; }
  55%  { opacity: 0.54; }
  71%  { opacity: 0.66; }
  100% { opacity: 0.56; }
}

#overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,0.74), rgba(0,0,0,0.97));
  transition: opacity 220ms ease;
}

#overlay.hidden{
  opacity:0;
  pointer-events:none;
}

#playBtn{
  appearance:none;
  border:2px solid rgba(230,230,230,0.88);
  background: rgba(0,0,0,0.25);
  color:#f2f2f2;

  font: 950 22px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .35em;

  padding: 18px 26px;
  border-radius: 10px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 18px 90px rgba(0,0,0,0.80);
  cursor:pointer;
}

#playBtn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.98);
}

#playBtn:active{
  transform: translateY(1px);
}

/* Kick flash: brief strobe-style punch on hard cuts. */
#stage.kickflash::before { opacity: 0.82; }
#stage.kickflash .laser  { opacity: 0.62; }
#stage.kickflash::after  { opacity: 0.78; }