/* ===== DJ Landing — full-screen color stage ===== */
:root {
  --yellow: #ffd400;
  --maroon: #800000;
  --indigo: #4b0082;
  --black: #000000;
  --current: var(--black);
  --current-rgb: 0, 0, 0;
  --play-color: var(--yellow);
  --bg-image: none;
  --text: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;          /* no scrolling */
  overscroll-behavior: none;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--current);
  color: var(--text);
  transition: background 0.5s ease;
}

/* ===== Background photo + color gradient overlay (opaque top -> 50% bottom) ===== */
.bg-photo {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100dvh;
  background-color: var(--current);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.bg-overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100dvh;
  background: linear-gradient(to bottom,
    rgba(var(--current-rgb), 1) 0%,
    rgba(var(--current-rgb), 0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Black screen: pure black, no photo/overlay */
body.theme-black .bg-photo,
body.theme-black .bg-overlay { display: none; }
.stage { z-index: 2; }   /* content above the background */

/* ===== Navigation ===== */
nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
  /* mix-blend removed; text uses the per-genre complementary color */
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
}
.logo-accent { color: var(--text); }

.nav-links {
  /* Full-screen slide-out menu on ALL widths */
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0; padding: 2rem;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1001;
}
.nav-links.open { transform: translateX(0); }
.nav-links li { width: 100%; text-align: center; }
.nav-links a {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: clamp(3rem, 16vw, 9rem);   /* match black-screen buttons exactly */
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}
.nav-links a::after { display: none; }
.nav-links li + li {
  border-top: none;
  padding-top: 1.6rem;
  margin-top: 0.4rem;
  position: relative;
}
.nav-links li + li::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(46vw, 310px);     /* same divider length as the black screen */
  height: 1px;
  background: rgba(255, 212, 0, 0.3);
}

.menu-close {
  position: absolute; top: 1.2rem; right: 1.5rem;
  background: none; border: none; color: var(--text);
  font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 1002;
}

.menu-toggle { display: block; font-size: 1.6rem; cursor: pointer; background: none; border: none; color: var(--text); }

/* ===== Intro: black screen with pulsing play button ===== */

.play-btn {
  position: relative;
  width: 96px;                 /* 20% smaller than 120px */
  height: 96px;
  border-radius: 50%;
  border: 9px solid var(--play-color);  /* 20% thinner than 11px */
  background: transparent;          /* no fill */
  color: var(--play-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  transition: transform 0.15s ease;
}
.play-btn:hover { transform: scale(1.06); }
.play-btn:active { transform: scale(0.94); }
.play-btn svg { width: 60px; height: 60px; margin-left: 5px; }   /* triangle shifted 3px left */
/* rounded-corner play triangle via matching fill+stroke + linejoin round */
.play-btn svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 6;          /* 2x the previous 3 for rounder corners */
  stroke-linejoin: round;
}

/* pulse ring — 60 BPM = 1 pulse/sec => 1s cycle */
.play-btn::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid var(--play-color);
  animation: pulse 1s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* Intro: big link words above/below the play button (toggleable via SHOW_INTRO_LINKS) */
.intro-links {
  display: none;            /* shown only on intro via the rule below */
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1002;
}
body.intro .intro-links { display: flex; }
body.hide-intro-links .intro-links { display: none !important; }   /* toggled off in JS */
.intro-link {
  background: none; border: none; cursor: pointer;
  color: var(--text);
  font-size: clamp(3rem, 16vw, 9rem);   /* match the hamburger menu / black-screen buttons */
  font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  opacity: 0.9; transition: opacity 0.2s, transform 0.15s;
}
.intro-link:hover { opacity: 1; transform: scale(1.05); }
.intro-link:active { transform: scale(0.96); }

/* ===== Full-screen color stage ===== */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  touch-action: pan-y;
}

.stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.color-label {
  font-size: clamp(3rem, 15vw, 10rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.95;
  user-select: none;
}

/* Track name: dual decks (A / B), opacity follows crossfade balance */
.track-meta { text-align: center; min-height: 3rem; }
.deck {
  display: flex; align-items: baseline; justify-content: center; gap: 0.5rem;
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  max-width: 84vw;
  transition: opacity 0.15s ease;
}
.deck + .deck { margin-top: 0.2rem; }
.deck-tag {
  flex: 0 0 auto;
  font-size: 0.7rem; font-weight: 900;
  border: 1px solid currentColor; border-radius: 4px;
  padding: 0 0.3rem; opacity: 0.7;
}
.deck-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Beat LED: pulses on each beat (brighter on the downbeat). Opacity driven by JS.
   Hidden for now — re-enable by switching display back to inline-block. */
.deck-led {
  flex: 0 0 auto;
  display: none; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--text); margin-left: 0.35rem; vertical-align: middle;
  box-shadow: 0 0 0.45rem var(--text); opacity: 0.15;
}

/* "Loading…" spinner while a genre's first track decodes */
.play-loading {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1000; display: flex; align-items: center; gap: 0.6rem;
  color: var(--text); font-size: 1rem; font-weight: 700; letter-spacing: 2px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.play-loading.show { opacity: 0.9; }
.play-loading::before {
  content: ''; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: play-spin 0.8s linear infinite;
}
@keyframes play-spin { to { transform: rotate(360deg); } }

/* Armed: next track is cued and waiting to drop on the next bar boundary */
.deck.armed {
  animation: deck-armed 0.9s ease-in-out infinite;
}
@keyframes deck-armed {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ===== DJ mixer: crossfader + channel fader (SVG plates + caps) ===== */
.mixer {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 0.8rem;
  margin-top: 0.6rem;
}

.crossfader {
  position: relative;
  width: min(315px, 90vw);          /* 50% of 629px */
  aspect-ratio: 629 / 212;
  color: var(--text);               /* inline plate labels use currentColor -> genre text color */
  touch-action: none;
}
.xfader-cap {
  position: absolute;
  width: 10.81%;       /* 68 / 629 */
  height: 64.15%;      /* 136 / 212 */
  top: 28.30%;         /* 60 / 212 */
  left: 7.95%;         /* 50 / 629 (p = 0) */
  background: url('assets/crossfader-cap.svg') center / contain no-repeat;
  cursor: grab;
  will-change: left;
  filter: url(#tintWhite);
}
.xfader-cap:active { cursor: grabbing; }

.chfader {
  position: relative;
  height: min(322px, 45vh);         /* 50% of 645px */
  aspect-ratio: 140 / 645;
  color: var(--text);               /* inline plate labels use currentColor -> genre text color */
  touch-action: none;
}
.fader-plate {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.chfader-cap {
  position: absolute;
  width: 97.86%;       /* 137 / 140 */
  height: 10.70%;      /* 69 / 645 */
  left: 0.71%;         /* 1 / 140 */
  top: 81.25%;         /* 524 / 645 (vol = 0) */
  background: url('assets/chfader-cap.svg') center / contain no-repeat;
  cursor: grab;
  will-change: top;
  filter: url(#tintWhite);
}
.chfader-cap:active { cursor: grabbing; }

/* Hide stage controls until started */
body.intro .stage-content,
body.intro .nav-arrow,
body.intro .dots,
body.intro .swipe-hint { display: none; }

/* Hide play button once started */
body:not(.intro) .play-btn { display: none; }
body.intro .stage { flex-direction: column; gap: 1.1rem; }  /* stack intro links + play button */

/* Black is a dead screen: no music, no controls, no label */
body.theme-black .stage-content { display: none; }

/* ===== Black info hub (only after start, only on black) ===== */
.black-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  z-index: 1001;
}
body.theme-black:not(.intro) .black-panel { display: flex; }

.bp-btn {
  /* Same style as the genre label (HOUSE / TECHNO / NU JAZZ) — bigger */
  font-size: clamp(3rem, 16vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1.1;
  user-select: none;
  width: auto;                /* size to text; flex container centers each button */
  white-space: nowrap;          /* keep each label on one line */
  overflow: visible;
  /* subtle size + opacity pulse (same on mobile and desktop) */
  animation: bpPulse 2.6s ease-in-out infinite;
}
.bp-btn:nth-child(1) { animation-delay: 0s; }
.bp-btn:nth-child(2) { animation-delay: 0.45s; }
.bp-btn:nth-child(3) { animation-delay: 0.9s; }
.bp-btn:active { scale: 0.98; }

@keyframes bpPulse {
  0%, 100% { scale: 1;     opacity: 0.9; }
  50%      { scale: 1.045; opacity: 1; }
}

/* subtle horizontal divider between buttons — 50% width, centered */
.bp-btn + .bp-btn {
  border-top: none;
  padding-top: 1.6rem;
  position: relative;
}
.bp-btn + .bp-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(46vw, 310px);     /* fixed centered divider, consistent across buttons */
  height: 1px;
  background: rgba(255, 212, 0, 0.3);
}

/* Desktop: subtle bounce on hover */
@media (hover: hover) and (pointer: fine) {
  .bp-btn:hover { scale: 1.05; transition: scale 0.2s; }
}

/* ===== Modals ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1.5rem;
  overflow-y: auto;
}
.modal.open { display: flex; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: #14141f;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 2.2rem 1.8rem 1.8rem;
  color: #f5f5fa;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.modal-close {
  position: absolute;
  top: 0.6rem; right: 0.9rem;
  background: none; border: none;
  color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer; opacity: 0.7;
}
.modal-close:hover { opacity: 1; }

.modal-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.modal-sub { color: #9a9ab0; font-size: 0.9rem; margin-bottom: 1.4rem; }
.modal-prose p { color: #c9c9da; margin-bottom: 0.9rem; line-height: 1.6; }
.modal-prose strong { color: #fff; font-weight: 800; }
.modal-card--wide { max-width: 720px; }

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: #9a9ab0; }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9px; color: #fff; font-size: 0.95rem; font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: #fff;
}
.form-group.error input { border-color: #ff2e97; }
.field-error { display: none; color: #ff2e97; font-size: 0.78rem; margin-top: 0.25rem; }
.form-group.error .field-error { display: block; }

.modal-submit {
  width: 100%; padding: 0.85rem; margin-top: 0.4rem;
  border: none; border-radius: 50px; cursor: pointer;
  background: #fff; color: #000; font-weight: 700; font-size: 1rem;
  transition: transform 0.15s;
}
.modal-submit:hover { transform: scale(1.02); }
.modal-submit:disabled { opacity: 0.6; cursor: default; }

.form-status { margin-top: 0.8rem; text-align: center; font-size: 0.9rem; display: none; }
.form-status.success { display: block; color: #00e676; }
.form-status.error { display: block; color: #ff2e97; }

/* Links list */
.links-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.links-list a {
  display: block; padding: 0.75rem 1rem;
  background: #0a0a0f; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; color: #fff; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.links-list a:hover { background: #1c1c2a; border-color: #fff; }

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.gallery-item {
  aspect-ratio: 1;
  border-radius: 10px;
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden; padding: 0; cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.2s ease;
}
.gallery-item:hover img { transform: scale(1.04); }

/* Lightbox: full-screen image with X to close */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.4rem;
  background: none; border: none; color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: 0.8; z-index: 3001;
}
.lightbox-close:hover { opacity: 1; }

/* ===== Desktop carousel-style arrow buttons ===== */
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: color-mix(in srgb, var(--text) 14%, transparent);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: background 0.2s, transform 0.2s, opacity 0.2s, color 0.3s, border-color 0.3s;
  backdrop-filter: blur(4px);
}
.nav-arrow:hover {
  background: color-mix(in srgb, var(--text) 30%, transparent);
  transform: translateY(-50%) scale(1.08);
}
.nav-arrow:active { transform: translateY(-50%) scale(0.95); }
.nav-arrow:disabled { opacity: 0.25; cursor: default; transform: translateY(-50%); }

.nav-arrow--prev { left: 2.5rem; }
.nav-arrow--next { right: 2.5rem; }

/* ===== Progress dots ===== */
.dots {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 1001;
}
.dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: width 0.3s ease, background 0.3s ease;
}
.dots .dot.active {
  width: 26px;
  border-radius: 5px;
  background: #fff;
}

/* ===== Mobile swipe hint ===== */
.swipe-hint {
  position: fixed;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-size: 0.8rem;
  letter-spacing: 3px;
  font-weight: 700;
  opacity: 0.85;
  z-index: 1001;
  pointer-events: none;
}
.swipe-hint .swipe-text { opacity: 0.8; }
.swipe-hint .chev {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}
.chev--left  { animation: nudgeLeft 1.6s ease-in-out infinite; }
.chev--right { animation: nudgeRight 1.6s ease-in-out infinite; }
@keyframes nudgeLeft  { 0%,100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(-6px); opacity: 1; } }
@keyframes nudgeRight { 0%,100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(6px);  opacity: 1; } }

/* hide hint once the user has swiped */
.swipe-hint.dismissed { opacity: 0; transition: opacity 0.4s ease; }

/* ===== Theme colors ===== */
.theme-black  { --current: var(--black);  --current-rgb: 0, 0, 0; }
.theme-house  { --current: var(--yellow); --current-rgb: 255, 212, 0; }
.theme-techno { --current: var(--maroon); --current-rgb: 128, 0, 0; }
.theme-nujazz { --current: var(--indigo); --current-rgb: 75, 0, 130; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav-arrow { display: flex; width: 48px; height: 48px; }
  .nav-arrow--prev { left: 1rem; }
  .nav-arrow--next { right: 1rem; }
  .swipe-hint { display: none; }
  /* On black (mobile): hide the arrows and show the swipe hint instead */
  body.theme-black:not(.intro) .nav-arrow { display: none; }
  body.theme-black:not(.intro) .swipe-hint { display: flex; }
}

/* On black after start the big buttons replace the menu — hide the hamburger */
body.theme-black:not(.intro) .menu-toggle { display: none; }