.album-bg {
  position: fixed;
  inset: -40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(80px) saturate(1.8);
  opacity: 0;
  transition: opacity 1.2s ease, background-image 0.8s ease;
  z-index: -1;
  transform: scale(1.1);
}
.album-bg.active {
  opacity: 0.45;
}

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.06;
  will-change: transform;
}
.bg-blob:nth-child(1) {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%);
  top: -15%; left: -8%;
  animation: drift1 26s ease-in-out infinite alternate;
}
.bg-blob:nth-child(2) {
  width: 42vw; height: 42vw;
  background: radial-gradient(circle, rgba(210,210,210,0.4) 0%, transparent 70%);
  bottom: -12%; right: -6%;
  animation: drift2 30s ease-in-out infinite alternate;
}
.bg-blob:nth-child(3) {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(180,180,180,0.35) 0%, transparent 70%);
  top: 38%; left: 30%;
  animation: drift3 22s ease-in-out infinite alternate;
}
.bg-blob:nth-child(4) {
  width: 24vw; height: 24vw;
  background: radial-gradient(circle, rgba(220,220,220,0.3) 0%, transparent 70%);
  top: 55%; right: 15%;
  animation: drift4 28s ease-in-out infinite alternate;
}

@keyframes drift1 { to { transform: translate(6%, 8%) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-5%, -7%) scale(1.09); } }
@keyframes drift3 { to { transform: translate(-4%, 6%) scale(1.14); } }
@keyframes drift4 { to { transform: translate(7%, -4%) scale(1.1); } }

.bg-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    radial-gradient(ellipse at 20% 12%, rgba(255,255,255,0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 50%, rgba(200,200,200,0.35) 0%, transparent 40%),
    radial-gradient(ellipse at 48% 80%, rgba(180,180,180,0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 75% 25%, rgba(210,210,210,0.3) 0%, transparent 35%);
}

.spotlight {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 28%, transparent 52%);
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: opacity 0.45s;
}

.album-glow {
  position: absolute;
  inset: -20px;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
  z-index: 0;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }