/* V4: diffused stage cones, positioned behind the portrait's readable area. */
#stage-lights {
  --beam-sway: 0deg;
  --beam-scroll: 0deg;
  --beam-origin: 0px;
  --beam-lift: 0px;
  --beam-opacity: .72;
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--beam-opacity);
  mix-blend-mode: screen;
  perspective: 1100px;
  contain: layout style;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, #000b 43%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 26%, #000b 43%, transparent 64%);
}

#stage-lights .stage-beam {
  position: absolute;
  top: -30%;
  display: block;
  width: 64%;
  height: 157%;
  transform-origin: 50% 0%;
  filter: blur(15px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 64%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 64%, transparent);
}

/* Conic falloff gives every beam a soft core and an expanding volume. */
#stage-lights .stage-beam::before,
#stage-lights .stage-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#stage-lights .stage-beam::before {
  background: conic-gradient(from 158deg at 50% 0%, transparent 0deg, #ffab7130 7deg, #ffce9b66 19deg, #ff996b4c 24deg, #ff743526 34deg, transparent 44deg);
}

#stage-lights .stage-beam::after {
  background: conic-gradient(from 171deg at 50% 0%, transparent 0deg, #fff2d200 2deg, #ffd5ab24 7deg, #ffe4bf3c 9deg, #ffd1a320 11deg, transparent 18deg);
  filter: blur(5px);
}

#stage-lights .beam-one {
  left: -23%;
  opacity: .62;
  transform: translate3d(var(--beam-origin), var(--beam-lift), 0) rotate(calc(-21deg + var(--beam-sway) + var(--beam-scroll))) rotateY(-9deg);
}

#stage-lights .beam-two {
  left: 2%;
  top: -40%;
  width: 56%;
  height: 169%;
  opacity: .40;
  transform: translate3d(var(--beam-origin), var(--beam-lift), -80px) rotate(calc(16deg - var(--beam-sway) + var(--beam-scroll))) rotateY(13deg);
}

#stage-lights .beam-two::before {
  background: conic-gradient(from 163deg at 50% 0%, transparent 0deg, #ffe2b722 7deg, #fff0d542 16deg, #ffb98535 20deg, #ff8c5b12 29deg, transparent 35deg);
}

#stage-lights .beam-three {
  left: 12%;
  top: -18%;
  width: 75%;
  height: 146%;
  opacity: .25;
  filter: blur(24px);
  transform: translate3d(var(--beam-origin), var(--beam-lift), -170px) rotate(calc(33deg + var(--beam-sway) - var(--beam-scroll))) rotateY(-17deg);
}

#stage-lights .beam-three::before {
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, #ff643700 4deg, #ff804c20 12deg, #ffa26640 20deg, #ff773725 28deg, transparent 42deg);
}

#stage-lights[data-active='true'] .stage-beam { will-change: transform; }
.motion-off #stage-lights { opacity: .38; }

@media (max-width: 800px) {
  #stage-lights {
    --beam-opacity: .57;
    -webkit-mask-image: linear-gradient(90deg, #000, #000a 29%, transparent 56%);
    mask-image: linear-gradient(90deg, #000, #000a 29%, transparent 56%);
  }
  #stage-lights .stage-beam { width: 90%; filter: blur(14px); }
  #stage-lights .beam-one { left: -66%; }
  #stage-lights .beam-two { left: -22%; width: 77%; opacity: .33; }
  #stage-lights .beam-three { left: -4%; width: 100%; opacity: .18; }
}

@media (max-width: 520px) {
  /* Fade the upper center where the artist's face sits on the mobile crop. */
  #stage-lights {
    -webkit-mask-image: linear-gradient(90deg, #000, #0008 19%, transparent 44%);
    mask-image: linear-gradient(90deg, #000, #0008 19%, transparent 44%);
  }
  #stage-lights .stage-beam { top: -12%; height: 131%; filter: blur(12px); }
  #stage-lights .beam-two { top: -26%; height: 153%; }
  #stage-lights .beam-three { top: 4%; height: 117%; }
}

@media (prefers-reduced-motion: reduce) {
  #stage-lights { opacity: .38; }
  #stage-lights .stage-beam { will-change: auto !important; }
}