@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --dark-bg: #111111;
  --text-color: #f0f0f0;
  --neon-blue: #00ffff;
  --neon-purple: #9900ff;
  --glow-spread: 5px;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-color);
  scroll-behavior: smooth;
}

.bg-dark {
  background: #111111;
}

.text-primary {
  color: var(--neon-purple) !important;
  text-shadow: 0 0 var(--glow-spread) var(--neon-purple), 0 0 calc(var(--glow-spread) * 2) var(--neon-blue);
  animation: neonPulse 3s infinite alternate;
}

.text-accent {
  color: var(--neon-blue) !important;
  text-shadow: 0 0 5px var(--neon-blue);
}

.bg-secondary {
  background: var(--neon-purple) !important;
}

.bg-primary {
  background: var(--neon-blue) !important;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.hero-content {
  animation: fadeInUp 1s ease-out forwards;
}

.album-cover {
  transition: all 0.3s ease;
  filter: brightness(0.9);
}

.album-cover:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.bg-gradient-to-r.from-dark.to-gray-900 {
  background: linear-gradient(90deg, #111111, #1a1a1a) !important;
}

.glow {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.25);
}

.tracklist-wrapper {
  max-height: 540px;
  overflow-y: auto;
}

.track-row {
  padding: 0.5rem 0.75rem;
  min-height: 44px;
}

.track-title {
  font-size: 0.9rem;
  line-height: 1.1;
}

.track-time {
  font-size: 0.7rem;
}

.track-row:hover {
  background: rgba(15, 23, 42, 0.35);
}

@media (max-width: 1023px) {
  .tracklist-wrapper {
    max-height: none;
  }
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dark-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--neon-purple);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-blue);
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-blue);
  }
  50% {
    text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-blue);
  }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.merch-card {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(153,0,255,0.25);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.merch-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 25px rgba(0,0,0,0.35);
}

.merch-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #0f172a;
}
.merch-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease, transform .3s ease;
}
.merch-image-wrap .front {
  opacity: 0;
  transform: scale(1.02);
}
.merch-card:hover .merch-image-wrap .front {
  opacity: 1;
  transform: scale(1);
}
.merch-card:hover .merch-image-wrap .back {
  opacity: 0;
}

.merch-card-body {
  padding: 1.5rem;
}

.add-to-cart {
  width: 100%;
  display: block;
  text-align: center;
  background: var(--neon-blue);
  color: #0f0f0f;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
}
.add-to-cart:hover {
  background: var(--neon-purple);
  color: #fff;
}

footer {
  border-top: 1px solid rgba(153,0,255,0.25);
  padding: 2.5rem 0 2.5rem;
  background: rgba(0,0,0,0.35);
}