.card-preview--music {
  border-color: rgba(255, 235, 200, 0.12);
  background: rgba(24, 24, 28, 0.78);
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}

.card-preview--music:hover {
  border-color: rgba(255, 235, 200, 0.28);
  background: rgba(28, 28, 32, 0.88);
  transform: translateY(-6px);
}

.card-art--music {
  position: absolute;
  inset: -10%;
  opacity: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 220, 160, 0.32), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(140, 190, 255, 0.34), transparent 65%);
  overflow: hidden;
  transition: opacity 0.6s ease;
}

.card-preview--music:hover .card-art--music {
  opacity: 0.24;
}

.card-art-layer--glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25), transparent 70%);
  animation: cardMusicGlow 6s ease-in-out infinite;
  animation-play-state: paused;
}

.card-art-layer--bars {
  position: absolute;
  inset: -10% -20%;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.1) 8px,
    transparent 8px,
    transparent 24px
  );
  opacity: 0.9;
  filter: blur(1px);
  animation: cardMusicBars 14s linear infinite;
  animation-play-state: paused;
}

.card-art-layer--pulse {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: cardMusicPulse 9s ease-in-out infinite;
  animation-play-state: paused;
}

.card-preview--music:hover .card-art-layer--pulse {
  opacity: 0.75;
}

.card-preview--music:hover .card-art-layer--glow,
.card-preview--music:hover .card-art-layer--bars,
.card-preview--music:hover .card-art-layer--pulse {
  animation-play-state: running;
}

@keyframes cardMusicGlow {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes cardMusicBars {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-160px);
  }
}

@keyframes cardMusicPulse {
  0%,
  100% {
    transform: scale(0.9);
  }
  35% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(0.98);
  }
}