/* ==========================================
   SUPERDANCE - Design System & Variables
   ========================================== */
:root {
  --black: #0a0a0a;
  --dark: #111111;
  --dark-2: #1a1a1a;
  --dark-3: #222222;
  --gray: #888888;
  --light: #e0e0e0;
  --white: #f5f5f5;
  --orange: #888888;
  --yellow: #999999;
  --cyan: #aaaaaa;
  --blue: #bbbbbb;
  --magenta: #777777;
  --gradient-brand: linear-gradient(135deg, #888888, #999999);
  --gradient-secondary: linear-gradient(135deg, #aaaaaa, #bbbbbb);
  --gradient-glass: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  --glass-bg: rgba(17, 17, 17, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glow-orange: 0 0 30px rgba(136, 136, 136, 0.3);
  --shadow-glow-cyan: 0 0 30px rgba(170, 170, 170, 0.3);
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--black); 
  overscroll-behavior: none; /* Disables the pull-down/pull-up bounce to prevent color stripes */
}

body {
  font-family: var(--font-body);
  background-color: var(--black); 
  color: var(--light);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.6;
}

.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.no-display {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

a {
  color: var(--cyan);
  text-decoration: none;
  transition: var(--transition);
}
a:hover {
  color: var(--orange);
}

.accent-orange {
  color: var(--orange);
}
.accent-cyan {
  color: var(--cyan);
}
.accent-gradient {
  background: var(--gradient-mixed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Noise overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ==========================================
   INTRO SCREEN
   ========================================== */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}
.intro-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}
.intro-logo {
  animation: introFloat 2s ease-in-out infinite;
}
.intro-logo img {
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.intro-tagline {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--gray);
  text-transform: uppercase;
}
.intro-pulse {
  margin-top: 40px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--white);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes introFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
}



/* ==========================================
   VINYL HERO
   ========================================== */
/* Scrolling Background */
.scrolling-bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Remove space-evenly to prevent flex gaps */
  opacity: 0.02;
  pointer-events: none;
}
.scrolling-row {
  display: flex;
  width: fit-content;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 19vh; 
  height: 16.666vh; /* exactly 1/6th of screen height */
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--black);
  line-height: 1;
}
.scrolling-row span {
  padding-right: 20px;
}
.row-left {
  animation: scrollLeft 90s linear infinite;
}
.row-right {
  animation: scrollRight 90s linear infinite;
}

/* Half speed when Side A or Side B is selected (double the duration) */
body.split-a .row-left,
body.split-b .row-left {
  animation-duration: 180s;
}
body.split-a .row-right,
body.split-b .row-right {
  animation-duration: 180s;
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Header for top-left logo */
.main-header {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 3000;
  pointer-events: none;
}
.top-left-logo {
  width: 180px;
  height: auto;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}



/* SUPERDANCE logo image above the vinyl */
.vinyl-hero-title {
  display: none; /* Hidden by default, shown by state */
  max-width: min(70%, 520px);
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  user-select: none;
  opacity: 1;
}

/* Default state: Show standard title */
body:not(.split-a):not(.split-b) .standard-title {
  display: block;
  transform: translateY(-10px);
}

/* Side A state: Show party_nights left justified */
body.split-a .side-a-title {
  display: block;
  margin-left: 40px; /* Small margin to avoid touching edge */
  margin-right: auto;
  text-align: left;
  align-self: flex-start;
}

/* Side B state: Show the_label right justified */
body.split-b .side-b-title {
  display: block;
  margin-right: 40px; /* Match Side A spacing */
  margin-left: auto;
  text-align: right;
  align-self: flex-end;
}

/* Removed specific padding overrides to allow consistent spacing */

body.split-a .standard-title,
body.split-b .standard-title {
  display: none;
}

.vinyl-hero {
  position: relative;
  z-index: 1; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #ffffff;
  color: var(--black);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

body.split-a .vinyl-hero,
body.split-b .vinyl-hero {
  position: fixed;
  inset: 0;
  width: 100vw;
}

.vinyl-hero.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.vinyl-container {
  position: relative;
  width: 600px; 
  height: 600px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}

.vinyl-hero.split-left .vinyl-container {
  transform: translateX(-25vw) scale(0.65);
}
.vinyl-hero.split-right .vinyl-container {
  transform: translateX(25vw) scale(0.65);
}

.vinyl-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(136, 136, 136, 0.25) 0%,
    transparent 70%
  );
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* Authentic vinyl base using repeating radial gradients for micro-grooves */
  background: 
    repeating-radial-gradient(
      #111 0%, 
      #000 5%, 
      #111 6%,
      #000 10%
    );
  /* Glossy vinyl light reflection using conic gradients */
  background-image: 
    repeating-radial-gradient(
      #111 0%, 
      #000 2%, 
      #111 3%,
      #000 5%
    ),
    conic-gradient(
      from 45deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.15) 30deg,
      transparent 60deg,
      rgba(255, 255, 255, 0.05) 120deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.15) 210deg,
      transparent 240deg,
      rgba(255, 255, 255, 0.05) 300deg,
      transparent 360deg
    );
  /* Combine the base grooves with the glossy light */
  background-blend-mode: overlay;
  
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1); 
  animation: vinylSpin 20s linear infinite;
  cursor: default; /* Normal cursor on grooves */
  overflow: hidden; 
}
/* We remove the hover entirely from .vinyl-record 
   so hovering the grooves does not trigger the speed up */

/* Grooves: visible ring bands simulating vinyl groove zones - original approach */
.vinyl-grooves {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.02),
    0 0 0 16px rgba(255, 255, 255, 0.015),
    0 0 0 24px rgba(255, 255, 255, 0.01),
    0 0 0 32px rgba(255, 255, 255, 0.008),
    0 0 0 40px rgba(255, 255, 255, 0.005),
    0 0 0 48px rgba(255, 255, 255, 0.005),
    0 0 0 56px rgba(255, 255, 255, 0.005);
  pointer-events: none;
}

/* Authentic Paper Center Label */
.vinyl-label-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  height: 42%;
  border-radius: 50%;
  overflow: hidden; 
  isolation: isolate; /* Creates stacking context to prevent bleed */
  clip-path: circle(50%); /* Hard clip all children to the circular boundary */
  background: transparent;
  box-shadow: 
    0 0 10px rgba(0,0,0,0.8),
    inset 0 0 0 4px rgba(255,255,255,0.05);
  z-index: 5;
  cursor: pointer;
}

/* Label image - sized to 130% so square PNG padding is cropped by overflow:hidden */
.vinyl-label-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.vinyl-label-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: auto;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 
  When hovering the label container, we pause the parent record spin 
*/
.vinyl-record:has(.vinyl-label-container:hover) {
  animation-play-state: paused;
}

@keyframes vinylSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sides exist inside the inner label container now */
.vinyl-side {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
  z-index: 1;
}
.vinyl-side-a {
  left: 0;
  justify-content: flex-start; /* Text toward outer left edge */
  padding-left: clamp(4%, 1.5vw, 8%);
  background: rgba(136, 136, 136, 0.07);
}
.vinyl-side-b {
  right: 0;
  justify-content: flex-end; /* Text toward outer right edge */
  padding-right: clamp(4%, 1.5vw, 8%);
  background: rgba(170, 170, 170, 0.07);
}

.vinyl-side:hover {
  background: rgba(255, 255, 255, 0.1);
}
.vinyl-side-a:hover {
  background: rgba(136, 136, 136, 0.13);
}
.vinyl-side-b:hover {
  background: rgba(170, 170, 170, 0.13);
}

.vinyl-side-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1px, 0.5vw, 4px);
  pointer-events: none;
  white-space: nowrap;
  /* No counter-spin - text rotates with record like real label printing */
}
/* Side A: text reads upward along the outer left edge */
.vinyl-side-a .vinyl-side-content {
  transform: rotate(-90deg);
}
/* Side B: text reads downward along the outer right edge */
.vinyl-side-b .vinyl-side-content {
  transform: rotate(90deg);
}
/* Text spins naturally with the record - no override needed on hover */

@keyframes counterSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.vinyl-side-label {
  font-family: var(--font-heading);
  font-size: clamp(4px, 1.2vw, 11px);
  letter-spacing: clamp(0.5px, 0.4vw, 4px);
  color: #555; /* Dark text against white label */
  font-weight: 600;
}
.vinyl-side-name {
  font-family: var(--font-heading);
  font-size: clamp(5px, 1.5vw, 14px);
  font-weight: 700;
}
.vinyl-side-a .vinyl-side-name {
  color: var(--orange);
}
.vinyl-side-b .vinyl-side-name {
  color: var(--cyan);
}
.vinyl-side-domain {
  font-size: clamp(3px, 1.1vw, 10px);
  letter-spacing: clamp(0.5px, 0.2vw, 2px);
  color: #666; /* Dark text against white label */
  opacity: 0.9;
}

/* True transparent spindle hole in the very center */
.vinyl-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; 
  height: 16px;
  border-radius: 50%;
  background: var(--white); /* White background of the page shows through */
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
  z-index: 10;
}
.vinyl-center-logo {
  display: none; /* Removed the inner logo as it breaks the realism of the spindle hole */
}

.vinyl-cta {
  text-align: center;
  margin-top: 48px;
  transition: opacity 0.5s ease;
}

.vinyl-hero.split-left .vinyl-cta,
.vinyl-hero.split-right .vinyl-cta {
  opacity: 0;
  pointer-events: none;
}
.vinyl-cta-text {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--gray);
  margin-bottom: 16px;
}
.vinyl-cta-arrows {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.cta-arrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer !important;
  transition: opacity 0.6s ease, background 0.3s ease;
  padding: 8px 16px;
  border-radius: 100px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  pointer-events: none;
  width: fit-content;
  text-align: center;
  opacity: 0;
}
.cta-arrow.visible {
  opacity: 1;
  pointer-events: auto !important;
}
.mobile-br {
  display: none;
}
@media (max-width: 480px) {
  .mobile-br {
    display: block;
  }
}
.cta-arrow-left {
  left: 40px;
  color: #000000 !important;
}
.cta-arrow-left:hover {
  background: rgba(0, 0, 0, 0.05);
}
.cta-arrow-right {
  right: 40px;
  color: #000000 !important;
}
.cta-arrow-right:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Hide navigation arrows when a side is active */
body.split-a .cta-arrow,
body.split-b .cta-arrow {
  display: none !important;
}

/* ==========================================
   SIDE SECTIONS
   ========================================== */
/* Back to Vinyl - fixed at bottom corner, styled like the CTA arrows on main dashboard */
.back-btn-fixed {
  position: fixed;
  bottom: 40px;
  z-index: 1000;
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: var(--transition);
  padding: 8px 16px;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  color: #000000; /* Set default to black */
}
.back-btn-top {
  top: 40px;
  bottom: auto;
}

/* Side A: bottom-right, black */
body.split-a .back-btn-fixed {
  right: 40px;
  left: auto;
  color: #000000;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.split-a .back-btn-fixed::after {
  content: ' ►'; /* Arrow points right since button is bottom-right */
}
body.split-a .back-btn-fixed:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Side B: bottom-left, black */
body.split-b .back-btn-fixed {
  left: 40px;
  right: auto;
  color: #000000;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.split-b .back-btn-fixed::before {
  content: '◄ '; /* Arrow points left since button is bottom-left */
}
body.split-b .back-btn-fixed:hover {
  background: rgba(0, 0, 0, 0.05);
}

.side-section {
  min-height: 100vh;
  padding: 60px 24px 120px;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

body.split-a .side-section,
body.split-a .shared-sections,
body.split-a .main-footer {
  width: 50%;
  margin-left: 0;
}

body.split-b .side-section,
body.split-b .shared-sections,
body.split-b .main-footer {
  width: 50%;
  margin-left: 50%;
}

.side-section,
.shared-sections,
.main-footer {
  position: relative;
  z-index: 10; /* Scroll on top of the fixed vinyl-hero */
}

.side-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* Position Side A cards slightly lower and to the right with more breathing room */
.side-a-section .section-inner {
  padding-top: 20vh; /* Lowered by 20% from 10vh */
  margin-left: auto;
  margin-right: 15%;
  max-width: 800px;
}
.side-a-section .section-grid {
  gap: 80px; /* Increased space between cards */
}
.side-a-section .grid-card:nth-child(odd) {
  transform: translateX(150px);
}
.side-a-section .grid-card:nth-child(even) {
  transform: translateX(300px);
}

/* Mirrored staggered layout for Side B (Shifted Left) */
.side-b-section .section-inner {
  padding-top: 20vh; /* Lowered by 20% from 10vh */
  margin-right: auto;
  margin-left: 15%;
  max-width: 800px;
}
.side-b-section .section-grid {
  gap: 80px;
}
.side-b-section .grid-card:nth-child(odd) {
  transform: translateX(-300px);
}
.side-b-section .grid-card:nth-child(even) {
  transform: translateX(-150px);
}

/* Grid sections spacing */

/* ==========================================
   GRID CARDS
   ========================================== */
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Force 2x2 layout for sides */
  gap: 80px; 
}
.shared-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 1x3 layout for shared cards */
  gap: 40px;
}
.grid-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.shared-card {
  border: none;
  background: transparent;
}

/* Specific styling for cards in Side A/B (Transparent/Black) */
.side-section .grid-card {
  background: transparent;
  border: none;
}
.grid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(200, 200, 200, 0.05)
  );
  opacity: 0;
  transition: var(--transition);
}
.grid-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
}
.grid-card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--gray);
  transition: var(--transition);
}
.side-section .card-icon {
  color: var(--black);
}
.card-icon svg,
.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.side-a-section .grid-card:hover .card-icon {
  color: var(--orange);
}
.side-b-section .grid-card:hover .card-icon {
  color: var(--cyan);
}
.shared-card:hover .card-icon {
  color: var(--orange);
}

.card-title {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--white);
}
.side-section .card-title {
  color: var(--black);
}
.card-desc {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.5;
}
.side-section .card-desc {
  color: rgba(0, 0, 0, 0.7);
}
.card-cta {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  transition: var(--transition);
}
.side-section .card-cta {
  color: var(--black);
}
.side-a-section .grid-card:hover .card-cta {
  color: var(--orange);
}
.side-b-section .grid-card:hover .card-cta {
  color: var(--cyan);
}
.shared-card:hover .card-cta {
  color: var(--orange);
}

/* Shared sections */
.shared-sections {
  padding: 80px 24px 80px;
  background: var(--black); /* Original dark background */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.shared-sections.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ==========================================
   MODAL SYSTEM
   ========================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85); /* Default dark background */
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal-overlay.light-theme {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-wrapper {
  background: var(--dark);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  max-width: 800px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.light-theme .modal-wrapper {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
}
.modal-overlay.open .modal-wrapper {
  transform: translateY(0) scale(1);
}

.modal-wrapper::-webkit-scrollbar {
  width: 6px;
}
.modal-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.modal-wrapper::-webkit-scrollbar-thumb {
  background: var(--dark-3);
  border-radius: 3px;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--dark-2);
  border-radius: 50%;
  color: var(--gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
}
.modal-overlay.light-theme .modal-close {
  background: var(--light);
  color: var(--black);
}
.modal-close svg {
  width: 18px;
  height: 18px;
}
.modal-close:hover {
  color: var(--white);
  background: var(--dark-3);
}

.modal-content {
  display: none;
}
.modal-content.active {
  display: block;
}

.modal-header {
  margin-bottom: 32px;
}
.modal-title {
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: 2px;
  color: var(--white);
}
.modal-overlay.light-theme .modal-title {
  color: var(--black);
}
.modal-subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gray);
  margin-top: 8px;
  text-transform: uppercase;
}
.modal-overlay.light-theme .modal-subtitle {
  color: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   EVENT CARDS
   ========================================== */
.event-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  transition: var(--transition);
}
.modal-overlay.light-theme .event-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.event-card:hover {
  border-color: rgba(136, 136, 136, 0.3);
}

.event-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--glass-border);
}
.event-body {
  padding: 24px;
}
.event-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--white);
}
.modal-overlay.light-theme .event-title {
  color: var(--black);
}
.event-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.event-date,
.event-location {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 6px;
}
.event-desc {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.6;
}
.event-cta {
  display: inline-block;
}

/* Media gallery for past events */
.event-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.event-media img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 32px;
  border: none;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary {
  background: var(--gradient-brand);
  color: var(--black);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-orange);
  color: var(--black);
}
.btn-email {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 1px;
}
.btn-glow {
  box-shadow: var(--shadow-glow-orange);
}
.btn-submit {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}
.btn-bandcamp {
  margin: 24px 0;
}

/* ==========================================
   SPONSOR
   ========================================== */
.sponsor-body p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.modal-overlay.light-theme .sponsor-body p {
  color: rgba(0, 0, 0, 0.8);
}
.sponsor-heading {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--orange);
}
.sponsor-list {
  list-style: none;
  padding: 0;
}
.sponsor-list li {
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  font-size: 14px;
  color: var(--light);
}
.modal-overlay.light-theme .sponsor-list li {
  color: rgba(0, 0, 0, 0.8);
}
.sponsor-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.sponsor-cta {
  text-align: center;
  margin-top: 32px;
}
.sponsor-email-sub {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.7;
  color: var(--gray);
  text-align: center;
  font-family: var(--font-heading);
  letter-spacing: 1px;
}
.modal-overlay.light-theme .sponsor-email-sub {
  color: rgba(0, 0, 0, 0.8);
  opacity: 0.7;
}

/* ==========================================
   MEMBERSHIP
   ========================================== */
.membership-body p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.modal-overlay.light-theme .membership-body p {
  color: rgba(0, 0, 0, 0.8);
}
.membership-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.perk-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.modal-overlay.light-theme .perk-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.perk-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.perk-card h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--white);
}
.modal-overlay.light-theme .perk-card h4 {
  color: var(--black);
}
.perk-card p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}
.modal-overlay.light-theme .perk-card p {
  color: rgba(0, 0, 0, 0.7);
}
.membership-cta {
  text-align: center;
  margin-top: 32px;
}
.membership-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 12px;
}

/* ==========================================
   ARTISTS
   ========================================== */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.artist-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.modal-overlay.light-theme .artist-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.artist-card:hover {
  border-color: rgba(170, 170, 170, 0.3);
  transform: translateY(-4px);
}
.artist-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--dark-3);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--cyan);
  overflow: hidden;
}
.artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.modal-overlay.light-theme .artist-name {
  color: var(--black);
}

.artist-detail {
  padding-top: 16px;
}
.detail-back {
  background: none;
  border: none;
  color: var(--cyan);
  font-family: var(--font-heading);
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.detail-back:hover {
  color: var(--orange);
}
.artist-detail-header {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.artist-detail-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--dark-3);
  overflow: hidden;
  flex-shrink: 0;
}
.artist-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-detail-name {
  font-size: 28px;
  color: var(--white);
}
.artist-detail-bio {
  font-size: 14px;
  color: var(--light);
  line-height: 1.7;
  margin-bottom: 24px;
}
.artist-releases-title {
  font-size: 16px;
  color: var(--cyan);
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.modal-overlay.light-theme .artist-detail-name {
  color: var(--black);
}
.modal-overlay.light-theme .artist-detail-bio {
  color: rgba(0, 0, 0, 0.8);
}
.modal-overlay.light-theme .artist-releases-title {
  color: var(--black);
  opacity: 0.8;
}
.modal-overlay.light-theme .detail-back {
  color: var(--black);
  opacity: 0.7;
}
.modal-overlay.light-theme .detail-back:hover {
  opacity: 1;
}

/* ==========================================
   RELEASES + AUDIO PLAYER
   ========================================== */
.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.release-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.modal-overlay.light-theme .release-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.release-card:hover {
  border-color: rgba(170, 170, 170, 0.3);
  transform: translateY(-4px);
}
.release-cover {
  width: 100%;
  aspect-ratio: 1;
  background: var(--dark-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--dark);
  overflow: hidden;
}
.release-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-info {
  padding: 16px;
}
.release-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.modal-overlay.light-theme .release-title {
  color: var(--black);
}
.release-artist-name {
  font-size: 12px;
  color: var(--gray);
}
.release-cat {
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 2px;
  margin-top: 4px;
}

/* Release detail */
.release-detail {
  padding-top: 16px;
}
.release-detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.release-detail-cover {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  background: var(--dark-3);
  flex-shrink: 0;
  overflow: hidden;
}
.release-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.release-detail-info h3 {
  font-size: 24px;
  color: var(--white);
  margin-bottom: 4px;
}
.release-detail-meta {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 8px;
}
.release-detail-meta span {
  color: var(--cyan);
}
.modal-overlay.light-theme .release-detail-info h3 {
  color: var(--black);
}
.modal-overlay.light-theme .release-detail-meta {
  color: rgba(0, 0, 0, 0.6);
}
.modal-overlay.light-theme .release-detail-meta span {
  color: var(--black);
  font-weight: 600;
}

/* Custom audio player */
.track-list {
  margin-top: 16px;
}
.track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--dark-2);
  margin-bottom: 8px;
  border: 1px solid var(--glass-border);
  transition: var(--transition);
}
.modal-overlay.light-theme .track-item {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.track-item:hover {
  border-color: rgba(170, 170, 170, 0.2);
}
.track-item.playing {
  border-color: var(--cyan);
  background: rgba(170, 170, 170, 0.05);
}

.track-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 1px solid var(--glass-border);
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.track-play-btn:hover {
  background: var(--cyan);
  color: var(--black);
}
.track-play-btn svg {
  width: 14px;
  height: 14px;
}

.track-info {
  flex: 1;
  min-width: 0;
}
.track-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
}
.track-duration {
  font-size: 11px;
  color: var(--gray);
}
.modal-overlay.light-theme .track-name {
  color: var(--black);
}
.modal-overlay.light-theme .track-duration {
  color: rgba(0, 0, 0, 0.5);
}

.track-progress {
  flex: 2;
  min-width: 80px;
  height: 4px;
  background: var(--dark-3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.track-progress-fill {
  height: 100%;
  background: var(--gradient-cyan);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

/* Pitch control */
.pitch-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}
.pitch-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
}
.pitch-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 4px;
  background: var(--dark-3);
  border-radius: 2px;
  outline: none;
}
.pitch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  cursor: pointer;
  border: 2px solid var(--dark);
}
.pitch-value {
  font-size: 10px;
  color: var(--cyan);
  font-family: var(--font-heading);
}

.modal-overlay.light-theme .pitch-label {
  color: rgba(0, 0, 0, 0.5);
}
.modal-overlay.light-theme .pitch-value {
  color: var(--black);
}

/* ==========================================
   DEMO UPLOAD
   ========================================== */
.demo-intro {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.6;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
}
.form-group input,
.form-group textarea {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(170, 170, 170, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray);
  opacity: 0.5;
}

.modal-overlay.light-theme .demo-intro {
  color: rgba(0, 0, 0, 0.8);
}
.modal-overlay.light-theme .form-group label {
  color: rgba(0, 0, 0, 0.5);
}
.modal-overlay.light-theme .form-group input,
.modal-overlay.light-theme .form-group textarea {
  background: rgba(0, 0, 0, 0.03);
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.1);
}
.modal-overlay.light-theme .form-group input::placeholder,
.modal-overlay.light-theme .form-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.upload-zone {
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--cyan);
  background: rgba(170, 170, 170, 0.03);
}
.upload-icon {
  width: 48px;
  height: 48px;
  color: var(--gray);
  margin: 0 auto 12px;
}
.upload-text {
  font-size: 15px;
  color: var(--light);
}
.upload-subtext {
  font-size: 13px;
  color: var(--gray);
  margin-top: 4px;
}
.upload-formats {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-top: 12px;
  font-family: var(--font-heading);
}
.upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  background: rgba(170, 170, 170, 0.1);
  border-radius: var(--radius-sm);
}
.upload-preview.hidden {
  display: none;
}
.upload-filename {
  font-size: 13px;
  color: var(--cyan);
}
.upload-remove {
  background: none;
  border: none;
  color: var(--gray);
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition);
}
.upload-remove:hover {
  color: var(--magenta);
}

.modal-overlay.light-theme .upload-zone {
  border-color: rgba(0, 0, 0, 0.1);
}
.modal-overlay.light-theme .upload-icon {
  color: rgba(0, 0, 0, 0.3);
}
.modal-overlay.light-theme .upload-text {
  color: var(--black);
}
.modal-overlay.light-theme .upload-subtext {
  color: rgba(0, 0, 0, 0.5);
}
.modal-overlay.light-theme .upload-filename {
  color: var(--black);
  font-weight: 500;
}
.modal-overlay.light-theme .upload-remove {
  color: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   BANDCAMP & MERCH MODALS
   ========================================== */
.bandcamp-body,
.merch-body {
  text-align: center;
}
.bandcamp-promo,
.merch-promo {
  padding: 24px 0;
}
.bandcamp-promo p,
.merch-promo p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.7;
}
.bandcamp-icon-large {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  color: var(--cyan);
}
.bandcamp-icon-large svg {
  width: 100%;
  height: 100%;
}
.bandcamp-note,
.merch-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 16px;
}

.modal-overlay.light-theme .bandcamp-promo p,
.modal-overlay.light-theme .merch-promo p {
  color: rgba(0, 0, 0, 0.8);
}
.modal-overlay.light-theme .bandcamp-note,
.modal-overlay.light-theme .merch-note {
  color: rgba(0, 0, 0, 0.5);
}

/* ==========================================
   ABOUT
   ========================================== */
.about-body {
  max-width: 640px;
  margin: 0 auto;
}
.about-lead {
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.7;
}
.about-text p {
  font-size: 15px;
  color: var(--light);
  line-height: 1.8;
}
.about-text strong {
  color: var(--white);
}
.about-text em {
  color: var(--orange);
  font-style: italic;
}
.about-closing {
  text-align: center;
  font-size: 24px !important;
  margin-top: 16px;
}

/* ==========================================
   MIXES
   ========================================== */
.mixes-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.filter-btn.active {
  background: var(--gradient-brand);
  color: var(--black);
  border-color: transparent;
}

.mixes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.mix-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: var(--transition);
}
.mix-card:hover {
  border-color: rgba(136, 136, 136, 0.3);
}
.mix-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.mix-artist {
  font-size: 12px;
  color: var(--orange);
  margin-bottom: 4px;
}
.mix-type {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================
   FOOTER
   ========================================== */
.main-footer {
  padding: 60px 24px 24px;
  background: var(--dark);
  border-top: 1px solid var(--glass-border);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  font-family: 'Jura', sans-serif;
}
.main-footer.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.footer-brand {
  max-width: 300px;
}
.footer-logo {
  height: 100px;
  width: auto;
  margin-top: 20px;
  margin-bottom: 0px;
}
.footer-tagline {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--light);
  cursor: pointer;
}
.footer-col a:hover {
  color: var(--light); /* Default fallback */
}
.footer-col.col-a a:hover {
  color: var(--orange);
}
.footer-col.col-b a:hover {
  color: var(--cyan);
}
.footer-col.col-c a:hover {
  color: #dddddd;
}

.social-heading {
  font-family: 'Jura', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}
.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  transition: var(--transition);
}
.social-link:hover {
  color: var(--white);
  border-color: var(--orange);
  background: rgba(136, 136, 136, 0.1);
}
.social-link svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  font-family: 'Jura', sans-serif;
}
.footer-bottom p {
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 1px;
}
.footer-domains {
  margin-top: 12px;
}
.footer-domains a {
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 1px;
}
.footer-domains a:hover {
  color: var(--orange);
}

/* ==========================================
   RESPONSIVE - LAPTOP / TABLET LARGE (981px to 1400px)
   ========================================== */
@media (min-width: 981px) and (max-width: 1400px) {
  /* Scale down the vinyl */
  .vinyl-container {
    width: 450px;
    height: 450px;
  }
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-22vw) scale(0.55);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(22vw) scale(0.55);
  }

  /* Reduce the stagger overlap with the vinyl */
  .side-a-section .grid-card:nth-child(odd) {
    transform: translateX(50px);
  }
  .side-a-section .grid-card:nth-child(even) {
    transform: translateX(100px);
  }
  .side-b-section .grid-card:nth-child(odd) {
    transform: translateX(-100px);
  }
  .side-b-section .grid-card:nth-child(even) {
    transform: translateX(-50px);
  }
  
  /* Reduce gap and font sizes for fit */
  .section-grid {
    gap: 40px;
  }
  .scrolling-row {
    font-size: 16vh;
    height: 16vh;
  }
}

/* ==========================================
   RESPONSIVE - TABLET (≤ 980px)
   ========================================== */
@media (max-width: 980px) {
  /* --- VINYL HERO --- */
  .vinyl-container {
    width: 300px;
    height: 300px;
  }
  .vinyl-center {
    width: 10px;
    height: 10px;
  }
  .vinyl-side-name {
    font-size: 10px;
  }
  .vinyl-side-label {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .vinyl-side-domain {
    font-size: 7px;
  }
  .vinyl-side-a {
    padding-left: 6%;
  }
  .vinyl-side-b {
    padding-right: 6%;
  }
  .vinyl-side-content {
    gap: 2px;
  }
  .vinyl-hero-title {
    max-width: min(85%, 400px);
  }
  .vinyl-cta-text {
    font-size: 12px;
    letter-spacing: 4px;
  }
  .vinyl-cta-arrows {
    gap: 24px;
  }
  .vinyl-cta {
    margin-top: 32px;
  }

  /* Reposition arrows for mobile to be just below the record */
  .cta-arrow {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(180px) !important;
    font-size: 11px;
    padding: 8px 12px;
    background: transparent; /* Removed background for cleaner look on sides */
    box-shadow: none;
    width: fit-content;
  }
  .cta-arrow-left {
    left: 10px !important;
  }
  .cta-arrow-right {
    right: 10px !important;
  }

  /* Scrolling background text - scale down */
  .scrolling-row {
    font-size: 14vh;
    height: 14vh;
  }

  /* --- SIDE-SPECIFIC TITLE IMAGES --- */
  body.split-a .side-a-title {
    margin-left: 20px;
  }
  body.split-b .side-b-title {
    margin-right: 20px;
  }

  /* --- SPLIT VIEW: Full-width on tablet/mobile --- */
  body.split-a .side-section,
  body.split-a .shared-sections,
  body.split-a .main-footer {
    width: 100%;
    margin-left: 0;
  }
  body.split-b .side-section,
  body.split-b .shared-sections,
  body.split-b .main-footer {
    width: 100%;
    margin-left: 0;
  }

  /* Vinyl record shifts less on mobile splits */
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-20vw) scale(0.5);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(20vw) scale(0.5);
  }

  /* --- SIDE SECTION CARDS - Remove stagger offsets --- */
  .side-a-section .section-inner {
    padding-top: 100vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .side-b-section .section-inner {
    padding-top: 100vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .side-a-section .grid-card:nth-child(odd),
  .side-a-section .grid-card:nth-child(even),
  .side-b-section .grid-card:nth-child(odd),
  .side-b-section .grid-card:nth-child(even) {
    transform: none !important;
  }
  .side-a-section .section-grid,
  .side-b-section .section-grid {
    gap: 40px;
  }

  /* Reorder Side A cards: Sponsor Us goes last on mobile */
  .side-a-section #card-upcoming-events { order: 1; }
  .side-a-section #card-past-events { order: 2; }
  .side-a-section #card-membership { order: 3; }
  .side-a-section #card-sponsor { order: 4; }

  /* --- GRID LAYOUT --- */
  .section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .shared-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* --- CARDS --- */
  .grid-card {
    padding: 24px 20px;
  }
  .card-title {
    font-size: 16px;
  }
  .card-desc {
    font-size: 12px;
  }

  /* --- BACK BUTTONS --- */
  .back-btn-fixed {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 14px;
  }
  body.split-a .back-btn-fixed {
    right: 20px;
  }
  body.split-b .back-btn-fixed {
    left: 20px;
  }
  .back-btn-top {
    top: 20px;
  }

  /* --- MODALS --- */
  .modal-overlay {
    padding: 20px 12px;
  }
  .modal-wrapper {
    padding: 32px 20px;
    margin: 0;
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  /* --- FORMS --- */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* --- HEADER --- */
  .header-side-indicator {
    display: none;
  }

  /* --- FOOTER --- */
  .footer-top {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .footer-brand {
    max-width: 100%;
    text-align: center;
  }
  .footer-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .footer-tagline {
    white-space: normal;
  }
  .footer-links {
    gap: 24px;
  }

  /* --- DETAIL VIEWS --- */
  .release-detail-header,
  .artist-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .track-item {
    flex-wrap: wrap;
  }
  .pitch-control {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    justify-content: center;
  }

  /* --- SHARED SECTIONS --- */
  .shared-sections {
    padding: 40px 20px 40px;
  }

  /* --- SIDE SECTIONS --- */
  .side-section {
    padding: 40px 20px 60px;
  }
}

/* ==========================================
   RESPONSIVE - MOBILE (≤ 480px)
   ========================================== */
@media (max-width: 480px) {
  /* --- VINYL HERO --- */
  .vinyl-container {
    width: 250px;
    height: 250px;
  }
  .vinyl-hero {
    padding: 24px 16px;
  }
  .vinyl-hero-title {
    max-width: 90%;
  }
  .vinyl-side-name {
    font-size: 8px;
  }
  .vinyl-side-label {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .vinyl-side-domain {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .vinyl-cta-text {
    font-size: 11px;
    letter-spacing: 3px;
  }
  .cta-arrow {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 6px 12px;
  }

  /* Mobile split - less extreme record shift */
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-15vw) scale(0.45);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(15vw) scale(0.45);
  }

  /* Side titles even tighter margins */
  body.split-a .side-a-title {
    margin-left: 16px;
  }
  body.split-b .side-b-title {
    margin-right: 16px;
  }

  /* --- GRIDS --- */
  .section-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .shared-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* --- CARDS --- */
  .grid-card {
    padding: 20px 16px;
  }
  .card-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: 15px;
  }
  .card-desc {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .card-cta {
    font-size: 11px;
  }


  /* --- MODALS --- */
  .modal-overlay {
    padding: 12px 8px;
  }
  .modal-wrapper {
    padding: 24px 16px;
    border-radius: var(--radius-sm);
  }
  .modal-title {
    font-size: clamp(20px, 5vw, 28px);
  }
  .modal-close {
    width: 36px;
    height: 36px;
  }

  /* --- EVENT CARDS --- */
  .event-image {
    height: 150px;
  }
  .event-body {
    padding: 16px;
  }
  .event-title {
    font-size: 17px;
  }

  /* --- BUTTONS --- */
  .btn {
    padding: 12px 24px;
    font-size: 12px;
  }

  /* --- NAV PILLS --- */
  .nav-pill {
    padding: 6px 16px;
    font-size: 11px;
  }

  /* --- FOOTER --- */
  .footer-links {
    flex-direction: column;
    gap: 20px;
  }
  .social-icons {
    gap: 10px;
  }
  .social-link {
    width: 36px;
    height: 36px;
  }
  .social-link svg {
    width: 16px;
    height: 16px;
  }
  .footer-bottom p {
    font-size: 11px;
  }
  .footer-domains a {
    font-size: 10px;
  }

  /* --- INTRO SCREEN --- */
  .intro-logo img {
    width: 120px;
    height: 120px;
  }
  .intro-tagline {
    font-size: 11px;
    letter-spacing: 4px;
  }

  /* --- SCROLLING BG --- */
  .scrolling-row {
    font-size: 10vh;
    height: 12vh;
  }

  /* --- MEMBERSHIP PERKS --- */
  .membership-perks {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   RESPONSIVE - SMALL MOBILE (≤ 360px)
   ========================================== */
@media (max-width: 360px) {
  .vinyl-container {
    width: 220px;
    height: 220px;
  }
  .vinyl-hero {
    padding: 20px 12px;
  }
  .vinyl-hero-title {
    max-width: 95%;
  }
  .vinyl-hero.split-left .vinyl-container {
    transform: translateX(-12vw) scale(0.4);
  }
  .vinyl-hero.split-right .vinyl-container {
    transform: translateX(12vw) scale(0.4);
  }
  .modal-wrapper {
    padding: 20px 12px;
  }
  .grid-card {
    padding: 16px 12px;
  }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent effects on touch devices */
  .grid-card:hover {
    transform: none;
  }
  /* Give tap targets minimum comfortable size */
  .cta-arrow,
  .back-btn-fixed,
  .social-link,
  .footer-col a,
  .nav-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Active states instead of hover for touch feedback */
  .grid-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  .cta-arrow:active {
    opacity: 0.7;
  }
  .back-btn-fixed:active {
    opacity: 0.7;
  }
}

/* ==========================================
   DARK MODE TOGGLE BUTTON
   ========================================== */
.dark-mode-toggle {
  position: fixed;
  top: 44px;
  left: 100px;
  z-index: 3001;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #222;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.dark-mode-toggle:active {
  transform: scale(0.95);
}
.dm-icon {
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* On Side B, shift toggle to right side (mirrored) */
body.split-b .dark-mode-toggle {
  left: auto;
  right: 100px;
}

/* Dark mode: restyle the toggle button itself */
body.dark-mode .dark-mode-toggle {
  background: rgba(30, 30, 30, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
body.dark-mode .dark-mode-toggle:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   DARK MODE - All Overrides
   ========================================== */

/* --- Vinyl Hero (white page → dark) --- */
body.dark-mode .vinyl-hero {
  background-color: var(--black);
  color: var(--light);
}

/* Scrolling background text - match light mode visual weight */
body.dark-mode .scrolling-bg-container {
  opacity: 0.02;
}
body.dark-mode .scrolling-row {
  color: #ffffff;
}

/* Navigation arrows - invert from black to white */
body.dark-mode .cta-arrow-left,
body.dark-mode .cta-arrow-right {
  color: var(--light) !important;
}
body.dark-mode .cta-arrow-left:hover,
body.dark-mode .cta-arrow-right:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Back buttons - invert from black to white */
body.dark-mode .back-btn-fixed {
  color: var(--light) !important;
}
body.dark-mode.split-a .back-btn-fixed,
body.dark-mode.split-b .back-btn-fixed {
  color: var(--light) !important;
}
body.dark-mode.split-a .back-btn-fixed:hover,
body.dark-mode.split-b .back-btn-fixed:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Side section cards: text goes from black to light */
body.dark-mode .side-section .card-icon {
  color: var(--gray);
}
body.dark-mode .side-section .card-title {
  color: var(--white);
}
body.dark-mode .side-section .card-desc {
  color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .side-section .card-cta {
  color: var(--gray);
}

/* Vinyl spindle hole - match dark bg */
body.dark-mode .vinyl-center {
  background: var(--black);
}

/* Vinyl glow - subtle in dark mode */
body.dark-mode .vinyl-glow {
  background: radial-gradient(
    circle,
    rgba(200, 200, 200, 0.15) 0%,
    transparent 70%
  );
}

/* --- Modals: override the light-theme to dark when dark mode is on --- */
body.dark-mode .modal-overlay.light-theme {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
}
body.dark-mode .modal-overlay.light-theme .modal-wrapper {
  background: var(--dark);
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
body.dark-mode .modal-overlay.light-theme .modal-close {
  background: var(--dark-2);
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .modal-title {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .modal-subtitle {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .event-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .event-title {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .sponsor-body p {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .sponsor-list li {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .sponsor-email-sub {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .membership-body p {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .perk-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .perk-card h4 {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .perk-card p {
  color: var(--gray);
}

/* Artists modal in dark mode */
body.dark-mode .modal-overlay.light-theme .artist-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .artist-name {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .artist-detail-name {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .artist-detail-bio {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .artist-releases-title {
  color: var(--cyan);
  opacity: 1;
}
body.dark-mode .modal-overlay.light-theme .detail-back {
  color: var(--cyan);
  opacity: 1;
}
body.dark-mode .modal-overlay.light-theme .detail-back:hover {
  color: var(--orange);
}

/* Releases modal in dark mode */
body.dark-mode .modal-overlay.light-theme .release-card {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .release-title {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .release-detail-info h3 {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .release-detail-meta {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .release-detail-meta span {
  color: var(--cyan);
  font-weight: 400;
}

/* Track player in dark mode */
body.dark-mode .modal-overlay.light-theme .track-item {
  background: var(--dark-2);
  border: 1px solid var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .track-name {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .track-duration {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .pitch-label {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .pitch-value {
  color: var(--cyan);
}

/* Demo form in dark mode */
body.dark-mode .modal-overlay.light-theme .demo-intro {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .form-group label {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .form-group input,
body.dark-mode .modal-overlay.light-theme .form-group textarea {
  background: var(--dark-2);
  color: var(--white);
  border-color: var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .form-group input::placeholder,
body.dark-mode .modal-overlay.light-theme .form-group textarea::placeholder {
  color: var(--gray);
  opacity: 0.5;
}

/* Upload zone in dark mode */
body.dark-mode .modal-overlay.light-theme .upload-zone {
  border-color: var(--glass-border);
}
body.dark-mode .modal-overlay.light-theme .upload-icon {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .upload-text {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .upload-subtext {
  color: var(--gray);
}
body.dark-mode .modal-overlay.light-theme .upload-filename {
  color: var(--cyan);
}
body.dark-mode .modal-overlay.light-theme .upload-remove {
  color: var(--gray);
}

/* Bandcamp / Merch modal in dark mode */
body.dark-mode .modal-overlay.light-theme .bandcamp-promo p,
body.dark-mode .modal-overlay.light-theme .merch-promo p {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .bandcamp-note,
body.dark-mode .modal-overlay.light-theme .merch-note {
  color: var(--gray);
}

/* About modal in dark mode */
body.dark-mode .modal-overlay.light-theme .about-lead {
  color: var(--white);
}
body.dark-mode .modal-overlay.light-theme .about-text p {
  color: var(--light);
}
body.dark-mode .modal-overlay.light-theme .about-text strong {
  color: var(--white);
}

/* --- Intro screen (already dark, but ensure consistency) --- */
body.dark-mode .intro-screen {
  background: var(--black);
}

/* ==========================================
   DARK MODE - Responsive adjustments
   ========================================== */
@media (max-width: 980px) {
  .dark-mode-toggle {
    width: 38px;
    height: 38px;
  }
  .dm-icon {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 480px) {
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
  }
  .dm-icon {
    width: 16px;
    height: 16px;
  }
}