/* NeonWaves 3D stage: a live WebGL club scene behind every page.
   Only applies when js/stage3d.js succeeds and adds .has-3d to <html>;
   without WebGL the original gradient design shows unchanged. */

.stage3d {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; display: block; pointer-events: none;
}
.stage-dim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 15, 0) 0%, rgba(7, 6, 15, .4) 38%, rgba(7, 6, 15, .86) 72%);
  opacity: 0;
}
.has-3d.no-3d .stage3d, .has-3d.no-3d .stage-dim { display: none; }

/* Homepage hero: the 3D disco ball takes the place of the logo image */
.has-3d .hero { min-height: min(86vh, 860px); display: flex; align-items: center; }
.has-3d .hero > .wrap { width: 100%; }
.has-3d .hero h1, .has-3d .hero .lead, .has-3d .page-hero h1, .has-3d .page-hero .lead {
  text-shadow: 0 2px 28px rgba(7, 6, 15, .95), 0 0 2px rgba(7, 6, 15, .8);
}
.has-3d:not(.no-3d) .ball-wrap img { visibility: hidden; }
.has-3d:not(.no-3d) .logo-wrap .big-play {
  inset: 0; margin: auto; transform: none;
  width: 92px; height: 92px; background: rgba(7, 6, 15, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.has-3d:not(.no-3d) .logo-wrap .big-play:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--cyan), 0 0 60px rgba(25, 240, 255, .7); }

/* A soft shade behind the hero text so it stays readable over the dancefloor */
.has-3d:not(.no-3d) .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 6, 15, .78), rgba(7, 6, 15, .4) 45%, rgba(7, 6, 15, 0) 62%);
}
.has-3d .hero > .wrap { position: relative; }
.has-3d .hero .muted { text-shadow: 0 1px 10px rgba(7, 6, 15, .95); }

/* Gradient headline words keep their colours: shadow them with a filter, not text-shadow */
.has-3d .grad-text { text-shadow: none; filter: drop-shadow(0 2px 16px rgba(7, 6, 15, .9)); }

/* Readable glass panels over the moving scene */
.has-3d main .prose {
  background: rgba(12, 10, 26, .8); border: 1px solid var(--card-border); border-radius: 22px;
  padding-block: 30px; padding-inline: clamp(18px, 4vw, 40px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.has-3d .card {
  background: rgba(12, 10, 26, .74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.has-3d .band { background: linear-gradient(135deg, rgba(60, 14, 60, .82), rgba(34, 22, 74, .82) 50%, rgba(8, 48, 62, .82)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.has-3d .site-footer { background: rgba(7, 6, 15, .86); }

/* The vibe buttons now change the club lights too */
.has-3d .vibe.on { box-shadow: 0 0 0 1px var(--pink), 0 0 24px rgba(255, 43, 214, .55); }

/* 3D on/off switch, floating above the player bar */
.stage-toggle {
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--player-h) + 14px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .8rem/1 "Outfit", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); background: rgba(14, 11, 31, .8); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stage-toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.no-3d .stage-toggle i { background: var(--muted); box-shadow: none; }
.stage-toggle:hover { border-color: var(--cyan); }

@media (max-width: 860px) {
  .has-3d .hero { min-height: 0; }
  .has-3d main .prose { width: calc(100% - 24px); }
  .has-3d:not(.no-3d) .hero::before { background: linear-gradient(180deg, rgba(7, 6, 15, .55), rgba(7, 6, 15, .3) 60%, rgba(7, 6, 15, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .has-3d:not(.no-3d) .logo-wrap .big-play { transition: none; }
}