/* ─ Album Card ─ */
.album-card {
  position: relative;
  cursor: pointer;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  /* Instant shadow change — same WebKitGTK jitter as animated box-shadow on .artist-card. */
  transform: translateZ(0);
}

.album-card:hover {
  box-shadow: inset 0 0 0 1px var(--card-hover-border), var(--shadow-md);
}

.album-card-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--card-placeholder-bg);
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
}

.album-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  position: relative;
  z-index: 0;
  transform: translateZ(0) scale(1);
  transition: opacity 0.15s ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.album-card:hover .album-card-cover img {
  transform: translateZ(0) scale(1.02);
}

.album-card-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.album-card--skeleton {
  pointer-events: none;
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.album-card--skeleton:hover {
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.album-card-cover--skeleton {
  background: linear-gradient(
    90deg,
    var(--card-placeholder-bg) 0%,
    color-mix(in srgb, var(--card-placeholder-bg) 70%, var(--text-muted)) 50%,
    var(--card-placeholder-bg) 100%
  );
  background-size: 200% 100%;
  animation: album-card-skeleton-shimmer 1.4s ease-in-out infinite;
}

.album-card-skeleton-line {
  height: 0.65rem;
  margin: 0.35rem 0.75rem 0;
  border-radius: var(--radius-sm);
  background: var(--card-placeholder-bg);
}

.album-card-skeleton-line--title {
  width: 72%;
  margin-top: 0.55rem;
}

.album-card-skeleton-line--artist {
  width: 48%;
  margin-bottom: 0.65rem;
}

@keyframes album-card-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.album-card-info {
  transform: translateZ(0);
}
