/* ============================================
   MUSIC PAGE PREMIUM ENHANCEMENTS (V2026)
   ============================================ */

/* --- Variables & Utilities --- */
:root {
  --glass-bg: rgba(10, 10, 15, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(6, 182, 212, 0.15);
  --card-radius: 16px;
  --transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --accent-primary: #06b6d4;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #ec4899;
  --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.4);
  --glow-cyan: 0 0 30px rgba(6, 182, 212, 0.2);
  --glow-purple: 0 0 30px rgba(139, 92, 246, 0.2);
}

/* Global smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection styling */
.music-page ::selection {
  background: rgba(6, 182, 212, 0.3);
  color: #fff;
}

/* Global link hover underline animation */
.music-page a:not(.system-button):not(.release-link):not(.platform-pill) {
  position: relative;
}

/* Focus visible for accessibility */
.music-page *:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

/* Image hover zoom effect */
.music-page img {
  transition: transform 0.4s var(--transition-smooth);
}

/* Card hover lift animation */
.premium-card,
.release-card,
.faq-card {
  transition: all 0.4s var(--transition-smooth);
  will-change: transform, box-shadow;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* --- Gradient Placeholders for Release Cards --- */
.gradient-1 {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  position: relative;
  overflow: hidden;
}

.gradient-2 {
  background: linear-gradient(135deg, #0a0a0a 0%, #064e3b 50%, #059669 100%);
  position: relative;
  overflow: hidden;
}

.gradient-3 {
  background: linear-gradient(135deg, #000000 0%, #450a0a 50%, #7f1d1d 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Shimmer Effect */
.cover-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Texture Overlay for Gradients (Noise) */
.cover-placeholder {
  position: relative;
}

.cover-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Abstract Pattern Overlay */
.gradient-1::after,
.gradient-2::after,
.gradient-3::after {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.03) 0%, transparent 40%);
}

/* --- Premium Cards (Glass) --- */
.premium-glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  transition: all 0.4s var(--transition-smooth);
}

.premium-glass-card:hover {
  border-color: var(--glass-highlight);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* --- Hero Typography Enhancements --- */
.music-hero-title-text {
  /* Fallback if clamp fails or for older browsers */
  font-size: 4rem;
}

/* --- Platform Icons (Matches Footer Style) --- */
.platform-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem !important;
}

.platform-pill {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  backdrop-filter: blur(8px);
  position: relative;
}

.platform-pill span {
  display: none !important;
}

.platform-pill img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 0.5 !important;
  transition: all 0.4s ease !important;
  filter: grayscale(100%) brightness(1.2);
}

.platform-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(6, 182, 212, 0.1) !important;
}

.platform-pill:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.1);
}

/* --- Premium FAQ Section --- */
.faq-section {
  padding: 5rem 0;
  position: relative;
}

.faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 2rem auto 0;
}

.faq-card {
  background: rgba(15, 15, 20, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.faq-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 10px;
  color: var(--jazer-cyan);
  font-weight: 800;
  font-size: 1.1rem;
  font-family: 'Courier New', monospace;
}

.faq-content {
  flex: 1;
}

.faq-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.faq-card:hover {
  border-color: rgba(6, 182, 212, 0.2);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(6, 182, 212, 0.08);
  transform: translateY(-4px);
}

.faq-card:hover::before {
  opacity: 1;
}

.faq-card:hover .faq-icon {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.4);
}

.faq-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  position: relative;
}

.faq-card p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  position: relative;
}

/* FAQ Mobile Optimization */
@media (max-width: 768px) {
  .faq-section {
    padding: 3rem 0;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
  }

  .faq-card {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    gap: 0.75rem;
  }

  .faq-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 1rem;
    border-radius: 8px;
  }

  .faq-card h3 {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }

  .faq-card p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .faq-card:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 2rem 0;
  }

  .faq-grid {
    gap: 0.5rem;
    margin: 1rem 0 0;
  }
}

/* Email Signup Section Enhancement */
.join-beam-section {
  position: relative;
  padding: 4rem 1.5rem !important;
  max-width: 650px !important;
}

@media (max-width: 768px) {
  .join-beam-section {
    padding: 2.5rem 1rem !important;
  }
}

@media (max-width: 480px) {
  .join-beam-section {
    padding: 1.5rem 1rem !important;
  }
}

.join-beam-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-animate="fade-up"] {
  animation: fadeInUp 0.7s var(--transition-smooth) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

[data-animate="fade-scale"] {
  animation: fadeInScale 0.6s var(--transition-smooth) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

/* Staggered animations for grid items */
.release-card,
.faq-card {
  animation: fadeInUp 0.6s var(--transition-smooth) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

/* Fix for when JS isn't loaded yet or strictly CSS based fallbacks */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .release-card,
  .faq-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Premium CTA Buttons --- */
.system-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  color: var(--jazer-cyan);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

/* Animated border glow */
.system-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  filter: blur(8px);
}

.system-button:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--jazer-cyan);
  box-shadow:
    0 0 30px rgba(6, 182, 212, 0.3),
    0 10px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
  text-decoration: none;
  color: #fff;
}

.system-button:hover::before {
  opacity: 1;
}

/* Button Focus State */
.system-button:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(15, 15, 20, 1),
    0 0 0 4px rgba(6, 182, 212, 0.5),
    0 0 30px rgba(6, 182, 212, 0.3);
}

/* Button Active State */
.system-button:active {
  transform: translateY(0);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  background: rgba(6, 182, 212, 0.2);
}

/* Secondary variant (Get Updates) */
.system-button[style*="transparent"] {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
}
.system-button[style*="transparent"]:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* --- Featured Track Section (Vinyl Visualizer) --- */
.featured-track-section {
  padding: 4rem 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .featured-track-section {
    padding: 2rem 0;
  }
}

.featured-track-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9),
    rgba(88, 28, 135, 0.3),
    rgba(6, 182, 212, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 3rem;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 100px -20px rgba(6, 182, 212, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Ambient glow behind the container */
.featured-track-container::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(88, 28, 135, 0.15) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 50%,
    rgba(6, 182, 212, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

.featured-track-container > * {
  position: relative;
  z-index: 1;
}

/* Hover state enhancement */
.featured-track-container:hover {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 120px -30px rgba(6, 182, 212, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.featured-track-container:hover .vinyl-record {
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(6, 182, 212, 0.15);
}

.featured-track-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vinyl-container {
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1 !important;
  height: auto;
  position: relative;
  flex-shrink: 0;
}

.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
  position: relative;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(6, 182, 212, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.05);
  animation: spin 30s linear infinite;
  aspect-ratio: 1 / 1 !important;
}

.vinyl-grooves {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 3px
    ),
    repeating-radial-gradient(
      circle at center,
      #0d0d0d 0,
      #0d0d0d 4px,
      #151515 4px,
      #151515 8px
    );
}

/* Realistic vinyl reflection bands */
.vinyl-grooves::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(6, 182, 212, 0.08) 30deg,
      transparent 60deg,
      rgba(139, 92, 246, 0.06) 120deg,
      transparent 150deg,
      rgba(6, 182, 212, 0.05) 220deg,
      transparent 250deg,
      rgba(236, 72, 153, 0.04) 300deg,
      transparent 330deg
    );
  animation: vinyl-reflect 8s linear infinite;
}

@keyframes vinyl-reflect {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  overflow: hidden;
  border: 3px solid #222;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.vinyl-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.1);
}

.vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 20%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.02) 80%,
      rgba(255, 255, 255, 0.08) 100%
    );
  pointer-events: none;
}

/* Outer ring highlight */
.vinyl-record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

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

/* Vinyl paused state - only spin when playing */
.vinyl-record.paused {
  animation-play-state: paused;
}

/* Subtle glow effect when playing */
.featured-track-container.is-playing {
  box-shadow: 0 0 60px rgba(6, 182, 212, 0.15);
}

.featured-track-container.is-playing .vinyl-record {
  box-shadow: 0 10px 40px rgba(6, 182, 212, 0.3);
}

.featured-track-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.featured-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(6, 182, 212, 0.15);
  color: var(--jazer-cyan);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  border: 1px solid rgba(6, 182, 212, 0.2);
  animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(6, 182, 212, 0); }
  50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); }
}

.featured-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, #a5f3fc 50%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.featured-artist {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-bottom: 1rem;
}

.audio-visualizer {
  display: flex;
  gap: 6px;
  margin: 1.5rem 0;
  height: 40px;
  align-items: center;
}

.audio-visualizer .bar {
  width: 6px;
  height: var(--h, 50%);
  background: var(--jazer-cyan);
  border-radius: 4px;
  animation: visualize 1s ease-in-out infinite alternate;
  animation-delay: calc(var(--h) * 0.1s);
}

@keyframes visualize {
  0% {
    height: 20%;
    opacity: 0.5;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

.featured-meta-row {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1rem;
}

.meta-tag {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.meta-tag.highlight {
  color: var(--jazer-cyan);
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.2);
}

/* --- Mobile Optimizations --- */
@media (max-width: 768px) {
  .music-hero-title-text {
    font-size: 3.5rem; /* Tighter on mobile */
  }

  .platform-grid {
    gap: 1rem;
  }

  .platform-pill {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .featured-track-section {
    padding: 2rem 0;
  }
  /* Mobile: Single column with horizontal card layout */
  .discography-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .release-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    min-width: 0;
  }

  .release-cover {
    aspect-ratio: 1;
    min-height: 100px;
  }

  .release-details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .release-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
  }

  .release-meta {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
  }

  .release-details p {
    display: none; /* Hide for cleaner mobile look */
  }

  .release-link {
    font-size: 0.8rem;
  }

  .status-badge {
    font-size: 0.55rem;
    padding: 0.2rem 0.5rem;
  }



  /* Compact Featured Track Section */
  .featured-track-container {
    display: grid;
    grid-template-columns: 80px 1fr;
    padding: 1.75rem 1rem;
    padding-right: 4rem; /* Space for the absolute button */
    gap: 1rem;
    text-align: left;
    align-items: center;
    position: relative;
  }
  .featured-track-visual {
    margin-bottom: 0;
    justify-content: flex-start;
  }
  .vinyl-container {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    margin: 0;
  }
  .featured-track-info {
    gap: 0.25rem;
  }
  .featured-header {
    display: block;
    margin-bottom: 0.25rem;
  }
  .featured-badge-pill {
    font-size: 0.55rem;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0;
  }
  .featured-title {
    font-size: 1.1rem;
    margin-bottom: 0;
    line-height: 1.2;
  }
  .featured-artist {
    font-size: 0.85rem;
  }
  .audio-visualizer {
    display: none; /* Hide visualizer on mobile to save space */
  }
  .play-btn-circle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    margin: 0;
  }
  .play-icon, .pause-icon { width: 16px; height: 16px; }
  .featured-meta-row {
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
  }

  /* Join Beam Fix */
  #join-beam {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem !important;
    margin: 2rem 0;
    overflow: hidden;
  }
  #join-beam svg {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1rem;
  }
  #join-beam h2 {
    font-size: 1.5rem;
  }
  #join-beam p {
    font-size: 0.9rem;
  }
  #join-beam form {
    width: 100%;
    max-width: 100%;
  }
  #join-beam input,
  #join-beam button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   ULTRA-WIDE PROFESSIONAL LAYOUT (MAXIMIZE SPACE)
   ============================================ */
@media (min-width: 1400px) {
  /* Unlock Container Width */
  .discography-section .container,
  .featured-track-section .container,
  .music-hero-content {
    max-width: 1800px !important;
    width: 95%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Make the grid look premium with wider cards */
  .discography-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 2rem;
  }

  /* Cinematic Featured Track */
  .featured-track-container {
    padding: 3rem 4rem !important; /* Luxurious padding */
    grid-template-columns: 400px 1fr !important; /* Larger vinyl area */
    gap: 4rem !important;
  }

  /* Allow vinyl to be slightly larger on huge screens */
  .vinyl-container {
    max-width: 400px !important; 
  }
}