/* The turntable player: a lacquered deck on a white page, with the turntable on top and the song below it. The
   deck is drawn 352 units wide and the script places the platter, the record and the arm on it. */
:root {
  --page: #ffffff;          /* the page */
  --deck: #f3f0ea;          /* the deck's lacquer */
  --deck-low: #e6e1d8;      /* the lacquer where it turns away from the light */
  --ink: #1c1b19;           /* the writing and the play button */
  --muted: #8a857b;         /* the smaller writing */
  --vinyl: #0f0f11;         /* the record */
  --label: #dd5331;         /* the record's label, and the part of the side already played */
  --print: #f8efe0;         /* the printing on the label */
  --metal: #c9ccd1;         /* the aluminium of the platter and the arm */
  --groove: #d3cdc2;        /* the bands of the side not played yet */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 28px 16px;
}

/* ---------------------------------------------------------------- the card: one lacquered deck */
.player {
  position: relative;
  width: min(380px, 100%);
  padding: 14px 14px 24px;
  border-radius: 30px;
  background:
    linear-gradient(168deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 34%),
    linear-gradient(180deg, var(--deck) 55%, var(--deck-low));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(0 0 0 / 0.06),
    0 0 0 1px rgb(60 48 30 / 0.08),
    0 2px 4px rgb(60 48 30 / 0.07),
    0 26px 50px -20px rgb(60 46 28 / 0.42);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the turntable */
.deck {
  --light: -135deg;         /* where the light comes from: the script moves it with the pointer */
  position: relative;
  width: 100%;
  aspect-ratio: 352 / 338;
}

/* the platter's aluminium rim, round the record: brushed, so its light stays where the light is */
.platter {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(0 0 0 / 0) 93%, rgb(0 0 0 / 0.22) 96.5%, rgb(0 0 0 / 0) 99%),
    conic-gradient(from calc(var(--light) + 90deg),
      color-mix(in srgb, var(--metal), #ffffff 78%),
      color-mix(in srgb, var(--metal), #000000 20%) 9%,
      var(--metal) 19%,
      color-mix(in srgb, var(--metal), #000000 37%) 30%,
      color-mix(in srgb, var(--metal), #000000 9%) 41%,
      color-mix(in srgb, var(--metal), #ffffff 68%) 50%,
      color-mix(in srgb, var(--metal), #000000 26%) 60%,
      color-mix(in srgb, var(--metal), #000000 3%) 70%,
      color-mix(in srgb, var(--metal), #000000 34%) 80%,
      color-mix(in srgb, var(--metal), #ffffff 32%) 91%,
      color-mix(in srgb, var(--metal), #ffffff 78%));
  box-shadow:
    0 0 0 1px rgb(40 34 26 / 0.18),
    0 0 0 5px rgb(40 34 26 / 0.035),
    3px 8px 14px -2px rgb(40 32 20 / 0.38),
    10px 22px 36px -8px rgb(40 32 20 / 0.28);
}

.disc {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* the label, the etching and the dust turn with the record */
.disc--spin {
  will-change: transform;
}

/* the hand holds the record anywhere on it */
.disc-hit {
  position: absolute;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.disc-hit.is-held {
  cursor: grabbing;
}

.spindle {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #ffffff, color-mix(in srgb, var(--metal), #ffffff 30%) 28%, color-mix(in srgb, var(--metal), #000000 32%) 62%, color-mix(in srgb, var(--metal), #000000 63%));
  box-shadow: 0.5px 1px 1.5px rgb(0 0 0 / 0.55);
  pointer-events: none;
}

/* the arm and everything on the deck that stands above the record */
.arm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}

.arm__grip {
  pointer-events: all;
  fill: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.arm__grip.is-held {
  cursor: grabbing;
}

/* ---------------------------------------------------------------- the song */
.info {
  padding: 20px 8px 0;
}

.info p {
  margin: 0;
}

.info__title {
  font-size: 24px;
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.info p + p {
  margin-top: 2px;
}

.info__by {
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 450;
}

.roll {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

/* a long title ends in an ellipsis instead of leaving the card */
.roll > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------- the side, unrolled: one band per song */
.side {
  position: relative;
  height: 30px;
  margin: 20px 8px 0;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.side__bands {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

/* each band is drawn as grooves, the played part in the label's colour; the band playing stands up */
.band {
  position: relative;
  height: 100%;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--groove) 0 1.5px, transparent 1.5px 3.5px);
  transform: scaleY(0.56);
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.band.is-on {
  transform: scaleY(1);
}

.band__done {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--label) 0 1.5px, transparent 1.5px 3.5px);
}

.band__head {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.band.is-on .band__head {
  opacity: 1;
}

/* where a click would put the needle */
.side__hover {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .side:hover .side__hover {
    opacity: 0.35;
  }
}

.side:focus-visible {
  box-shadow: 0 0 0 3px var(--deck), 0 0 0 5px var(--ink);
}

html[data-using='pointer'] .side:focus-visible {
  box-shadow: none;
}

.times {
  display: flex;
  justify-content: space-between;
  margin: 8px 8px 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the buttons */
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 14px;
}

.btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:active {
  transform: scale(0.92);
}

.btn--play {
  width: 64px;
  height: 64px;
  background: var(--ink);
  color: var(--deck);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 2px 3px rgb(30 22 10 / 0.22), 0 10px 18px -8px rgb(30 22 10 / 0.5);
}

.btn--play svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.4;
}

@media (hover: hover) {
  .btn:not(.btn--play):hover {
    background: rgb(60 48 30 / 0.07);
  }

  .btn--play:hover {
    transform: translateY(-1px);
  }

  .btn--play:active {
    transform: scale(0.94);
  }
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

html[data-using='pointer'] .btn:focus-visible {
  outline: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .band,
  .btn {
    transition: none;
  }
}