/* Record sleeve + vinyl disc, shared by library, player, mini player, bookmarks and auth.
   Colours come from --cover-* set per book (web/js/sleeve-palette.js). SVG fills use classes, not
   presentation attributes, because var() in SVG attributes is unreliable in Safari. */

/* ——— Sleeve (square cover) ——— */
.sleeve {
  position: relative; aspect-ratio: 1; width: 100%; border-radius: var(--radius-sm); overflow: hidden;
  container-type: inline-size;
  background:
    repeating-linear-gradient(32deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 3px),
    radial-gradient(110% 110% at 40% 35%, var(--cover-bg), var(--cover-bg-deep));
  box-shadow: inset -2px 0 0 rgba(0, 0, 0, .22), inset 1px 1px 0 rgba(255, 255, 255, .11), 0 1px 1px rgba(0, 0, 0, .18), 0 8px 16px -6px rgba(0, 0, 0, .36);
}
.sleeve-ornament { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cover-ornament); }
.sleeve-ring-wear { fill: none; stroke: currentColor; stroke-opacity: .13; stroke-width: 3; }
.sleeve-title {
  position: absolute; inset: 31% 17%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); font-weight: 600; line-height: 1.22; color: var(--cover-ink);
  font-size: calc(var(--title-scale, 1) * 9.5cqw); text-wrap: balance; overflow-wrap: anywhere;
}
.sleeve-title span { padding-top: .12em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ——— Disc ——— */
.disc { position: relative; aspect-ratio: 1; width: 100%; border-radius: 50%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.disc svg { display: block; width: 100%; height: 100%; }
.disc-vinyl { fill: var(--vinyl); }
.disc-rim { fill: none; stroke: var(--vinyl-rim); stroke-width: 1.2; }
.disc-grooves circle { fill: none; stroke: #fff; stroke-opacity: .035; stroke-width: .6; }
.disc-grooves circle.is-major { stroke-opacity: .075; }
.disc-gap { fill: none; stroke: #000; stroke-width: 1.6; }
.disc-label { fill: var(--cover-bg); }
.disc-label-rule { fill: none; stroke: var(--cover-ornament); stroke-width: .8; }
.disc-label-rule.is-thin { stroke-width: .3; }
.disc-label-lozenge { fill: var(--cover-ornament); }
.disc-label-title { fill: var(--cover-ink); font-family: var(--font-display); font-weight: 600; }
.disc-label-small { fill: var(--cover-ornament); font-family: var(--font-ui); }
.disc-label-ornament { color: var(--cover-ornament); }
.disc-hole { fill: var(--bg); }
.disc-sheen { fill: #fff; fill-opacity: .07; }

/* 33⅓ rpm ≈ 1.8 s per turn. Paused keeps the current angle, so stopping never snaps back to 0°. */
.disc-spin { transform-box: fill-box; transform-origin: center; animation: disc-spin 1.8s linear infinite; animation-play-state: paused; }
.disc.is-spinning .disc-spin { animation-play-state: running; }
@keyframes disc-spin { to { transform: rotate(360deg); } }

/* app.css shrinks every animation to 0.001ms under reduced motion; an infinite 0.001ms spin would
   flicker, so the record is explicitly still instead. */
@media (prefers-reduced-motion: reduce) {
  .disc-spin { animation: none; }
}