/* DAJAI.IO — STUDIO LIVE
   neon-noir nocturne. fans-in-the-room.
   inherits styles.css tokens and adds a studio-specific palette. */

:root {
  --neon-red: #ff2a3c;
  --neon-orange: #ff6b2c;
  --neon-pink: #ff4d8a;
  --cobalt: #2da4ff;
  --cobalt-deep: #0d4fa3;
  --cobalt-glow: #6fc8ff;
  --smoke: rgba(180, 200, 220, 0.06);
}

/* ============================================================
   THE ROOM — full-bleed studio illustration container
   ============================================================ */
.studio-room {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse at 50% 35%, #1a0a14 0%, #060205 65%, #020003 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
}

/* the back wall — neon window glow bleed */
.room-window-bleed {
  position: absolute;
  left: 32%; right: 32%; top: 12%; height: 42%;
  background: radial-gradient(ellipse at center,
    rgba(255, 107, 44, 0.55) 0%,
    rgba(255, 42, 60, 0.35) 30%,
    rgba(255, 42, 60, 0.08) 60%,
    transparent 80%);
  filter: blur(40px);
  animation: neonBreath 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes neonBreath {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.05; transform: scale(1.04); }
  72%      { opacity: 0.6; }     /* tiny flicker */
  73%      { opacity: 0.95; }
}

/* the cobalt under-counter glow */
.room-floor-glow {
  position: absolute;
  left: -10%; right: -10%; bottom: -2%; height: 36%;
  background: radial-gradient(ellipse at center,
    rgba(45, 164, 255, 0.45) 0%,
    rgba(13, 79, 163, 0.25) 30%,
    transparent 65%);
  filter: blur(30px);
  animation: cobaltPulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cobaltPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* smoke layer */
.smoke {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.smoke-puff {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 140, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  animation: smokeDrift 18s linear infinite;
}
@keyframes smokeDrift {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { transform: translate(40px, -240px) scale(1.6); opacity: 0; }
}

/* dust motes drifting in the beam */
.dust { position: absolute; inset: 0; pointer-events: none; }
.mote {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255, 200, 150, 0.6);
  box-shadow: 0 0 4px rgba(255, 200, 150, 0.8);
  animation: moteFloat 14s linear infinite;
}
@keyframes moteFloat {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.4; }
  100% { transform: translate(60px, -380px); opacity: 0; }
}

/* the LIVE pulse */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-red);
  box-shadow: 0 0 0 0 rgba(255, 42, 60, 0.7);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 42, 60, 0.7), 0 0 12px rgba(255, 42, 60, 0.9); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 42, 60, 0); 0 0 18px rgba(255,42,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 42, 60, 0); }
}

/* vu meter bars */
.vu-bar {
  display: inline-block;
  width: 4px;
  background: linear-gradient(to top,
    #1a3d5c 0%,
    var(--cobalt) 35%,
    var(--neon-orange) 75%,
    var(--neon-red) 100%);
  border-radius: 1px;
  transform-origin: bottom;
  animation: vuBounce 0.6s ease-in-out infinite alternate;
}
@keyframes vuBounce {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* console LED grid */
.led {
  width: 4px; height: 4px;
  border-radius: 50%;
  display: inline-block;
}
.led-r  { background: #ff2a3c; box-shadow: 0 0 6px #ff2a3c; }
.led-g  { background: #2dff7a; box-shadow: 0 0 6px #2dff7a; }
.led-y  { background: #ffb020; box-shadow: 0 0 6px #ffb020; }
.led-b  { background: var(--cobalt); box-shadow: 0 0 6px var(--cobalt); }

/* fader knob */
.fader {
  position: relative;
  width: 14px; height: 60px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
}
.fader::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  height: 8px;
  background: linear-gradient(to bottom, #555 0%, #1a1a1a 100%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 8px rgba(45,164,255,0.4);
  border-radius: 1px;
}

/* hearts floating up from the fans */
.heart-stream {
  position: absolute;
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  z-index: 25;
}
.heart {
  position: absolute;
  bottom: -30px;
  font-size: 20px;
  animation: heartFloat 5.5s ease-out forwards;
  text-shadow: 0 0 12px currentColor;
}
@keyframes heartFloat {
  0%   { transform: translate(0, 0) scale(0.3) rotate(-8deg); opacity: 0; }
  10%  { opacity: 1; transform: translate(0, -20px) scale(1) rotate(8deg); }
  50%  { transform: translate(20px, -240px) scale(0.9) rotate(-6deg); }
  100% { transform: translate(-12px, -520px) scale(0.4) rotate(10deg); opacity: 0; }
}

/* fan ticker */
.fan-msg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  animation: msgIn 0.4s ease-out;
}
@keyframes msgIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.fan-msg .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--cobalt), var(--neon-pink));
  border: 1px solid rgba(255,255,255,0.15);
}
.fan-msg .who {
  color: var(--neon-pink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fan-msg .what {
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.2;
  margin-top: 2px;
}

/* big neon button */
.btn-neon {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--neon-red);
  color: #000;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px var(--neon-red),
    0 0 20px rgba(255,42,60,0.5),
    0 0 60px rgba(255,42,60,0.25);
  transition: all 0.18s;
}
.btn-neon:hover {
  background: #fff; color: #000;
  box-shadow:
    0 0 0 1px #fff,
    0 0 24px rgba(255,255,255,0.6),
    0 0 80px rgba(255,42,60,0.4);
}
.btn-neon::before {
  content: '';
  position: absolute; inset: -3px;
  border: 1px solid var(--neon-red);
  pointer-events: none;
}

/* the FRAME — big neon picture frame around the studio */
.neon-frame {
  position: relative;
  padding: 2px;
  background: linear-gradient(135deg,
    var(--neon-red) 0%,
    var(--neon-orange) 50%,
    var(--cobalt) 100%);
  box-shadow:
    0 0 40px rgba(255,42,60,0.3),
    0 0 80px rgba(45,164,255,0.15);
}

/* tape edge */
.tape {
  position: absolute;
  background: rgba(255, 215, 100, 0.22);
  border: 1px dashed rgba(255, 215, 100, 0.5);
  font-family: var(--mono); font-size: 9px;
  color: rgba(255, 215, 100, 0.95);
  letter-spacing: 0.15em;
  padding: 3px 8px;
  transform: rotate(-3deg);
  text-transform: uppercase;
  z-index: 30;
}

/* waveform scrolling */
.waveform-scroll {
  position: relative;
  height: 48px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
}
.waveform-scroll svg {
  position: absolute; left: 0; top: 0;
  height: 100%;
  animation: wfScroll 12s linear infinite;
}
@keyframes wfScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* knob rotation */
.knob {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #444 0%, #1a1a1a 70%, #000 100%);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.knob::after {
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  width: 1.5px; height: 9px;
  background: var(--neon-orange);
  box-shadow: 0 0 4px var(--neon-orange);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
}

/* ============================================================
   PLAYER
   ============================================================ */
.player-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.player-btn:hover {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 12px rgba(255,107,44,0.5);
}
.player-btn-prime {
  width: 56px; height: 56px;
  font-size: 20px;
  font-weight: 700;
}
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bulbChase {
  0%, 49%   { opacity: 1; filter: brightness(1.3); }
  50%, 100% { opacity: 0.25; filter: brightness(0.6); }
}
@keyframes eqWobble  { from { height: 4px; } to { height: 18px; } }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  height: 2px;
  background: rgba(255,255,255,0.18);
  outline: none;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; cursor: pointer;
}

/* a "tag" pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  border-radius: 999px;
}
.pill-live { color: var(--neon-red); border-color: rgba(255,42,60,0.5); background: rgba(255,42,60,0.08); }
.pill-cobalt { color: var(--cobalt); border-color: rgba(45,164,255,0.4); background: rgba(45,164,255,0.06); }

/* subtle glitch on the title */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--neon-red);
  transform: translate(-1.5px, 0);
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: glitchA 4.5s steps(1) infinite;
}
.glitch::after {
  color: var(--cobalt);
  transform: translate(1.5px, 0);
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: glitchB 4.5s steps(1) infinite;
}
@keyframes glitchA {
  0%, 96%, 100% { transform: translate(0, 0); opacity: 0; }
  97% { transform: translate(-3px, 1px); opacity: 0.8; }
  98% { transform: translate(2px, -1px); opacity: 0.6; }
}
@keyframes glitchB {
  0%, 96%, 100% { transform: translate(0, 0); opacity: 0; }
  97% { transform: translate(2px, -1px); opacity: 0.5; }
  98% { transform: translate(-2px, 1px); opacity: 0.7; }
}