/*
 * The record on Lokust Records' page (/work/lokust-records): scratch it, flick it, spin it
 * (behaviour in minis.js).
 */

/* ---------- Lokust vinyl ---------- */
.vinyl {
  --vinyl-ink: #121113;
  --vinyl-lime: #dee48c;
  --vinyl-gold: #f1cb4e;
  --vinyl-olive: #576f3d;
  --vinyl-angle: 0deg;
  --vinyl-font: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  position: relative;
  width: var(--vinyl-size, min(100%, 26rem));
  aspect-ratio: 1;
  flex: none;
}

.vinyl__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden; /* clips the spinning layer, so its corners never widen the page */
  background: #0c0c0d;
  box-shadow: 0 1.4rem 3rem -0.6rem rgb(0 0 0 / 0.55);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.vinyl.is-scratching .vinyl__disc { cursor: grabbing; }

.vinyl__spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33.6%, rgb(255 255 255 / 0.06) 34%, transparent 34.6%),
    radial-gradient(circle, transparent 0 47%, rgb(255 255 255 / 0.035) 47.4%, transparent 48%),
    radial-gradient(circle, transparent 0 62%, rgb(255 255 255 / 0.035) 62.4%, transparent 63%),
    repeating-radial-gradient(circle, #19191b 0 1px, #0c0c0d 1px 2.6px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 0 0 0.6rem #0b0b0c;
  transform: rotate(var(--vinyl-angle));
  will-change: transform;
}

/* Light catching the grooves: it sits on the still disc, so it never turns */
.vinyl__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    transparent 0 6%, rgb(255 255 255 / 0.13) 11%, transparent 17% 50%,
    rgb(255 255 255 / 0.09) 59%, transparent 66% 100%);
  pointer-events: none;
}

.vinyl__label {
  position: absolute;
  inset: 33%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--vinyl-ink) 0 5%, transparent 5.5%),
    radial-gradient(circle, transparent 0 40%, rgb(0 0 0 / 0.12) 40.5% 42%, transparent 42.5%),
    var(--vinyl-lime);
  color: var(--vinyl-ink);
  font: 900 clamp(0.55rem, 3.4cqi, 1.25rem)/0.9 var(--vinyl-font);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  pointer-events: none;
}
.vinyl { container-type: inline-size; }
.vinyl__label span,
.vinyl__label small {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.vinyl__label span { top: 25%; }
.vinyl__label small {
  bottom: 23%;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.vinyl__label::after { /* gold rim */
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  border: 0.18rem solid var(--vinyl-gold);
}

.vinyl__readout {
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  font: 600 0.72rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}