/* The cassette player: a brushed aluminium deck on a white page, with a clear smoked cassette on top, the side's
   card written by hand under it and four piano keys. The deck is drawn 352 units wide and 252 high (the cassette is
   224 of them, the slot with the head under it the rest); the script paints the reels and the tape in it. */
:root {
  --page: #ffffff;          /* the page */
  --alu: #e6e6e8;           /* the deck's brushed aluminium */
  --alu-low: #c8c9cd;       /* the aluminium where it turns away from the light */
  --ink: #1d1d21;           /* the printing on the deck */
  --muted: #74757c;         /* the smaller printing */
  --smoke: #2c2a30;         /* the cassette's smoked plastic */
  --tape: #5b2f17;          /* the brown tape */
  --leader: #e9e4d6;        /* the clear leader at the start of the tape */
  --hub: #f2eee4;           /* the white nylon of the hubs and the rollers */
  --paper: #f7f1e2;         /* the label and the card */
  --pen: #24409a;           /* the ballpoint the songs are written with */
  --stripe: #e2552a;        /* the printed stripe on the label, and the play key */
  --marker: #ffe25a;        /* the highlighter on the song playing */
  --key: #2b2b30;           /* the black keys */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans 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 deck: one block of brushed aluminium */
.player {
  position: relative;
  width: min(380px, 100%);
  padding: 14px 14px 20px;
  border-radius: 28px;
  background:
    linear-gradient(172deg, rgb(255 255 255 / 0.65), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 62%, rgb(255 255 255 / 0.3) 78%, rgb(255 255 255 / 0) 92%),
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.18) 0 1px, rgb(0 0 0 / 0.025) 1px 2px, rgb(255 255 255 / 0.1) 2px 3.5px, rgb(0 0 0 / 0.035) 3.5px 4px),
    linear-gradient(180deg, var(--alu) 40%, var(--alu-low));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 0 0 1px rgb(40 42 48 / 0.12),
    0 2px 4px rgb(30 32 38 / 0.08),
    0 28px 50px -22px rgb(26 28 36 / 0.45);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the cassette on the deck */
.deck {
  --light: 0;               /* where the light is, from -1 (left) to 1 (right): the script moves it with the pointer */
  position: relative;
  width: 100%;
  aspect-ratio: 352 / 252;
}

.slot,
.shell,
.inside {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* the hand turns the reels anywhere on the cassette */
.grip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% * 224 / 252);
  border-radius: 10px;
  outline: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

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

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

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

/* ---------------------------------------------------------------- the card of side A, written by hand */
.card {
  position: relative;
  margin: 12px 0 0;
  padding: 8px 12px 8px 40px;
  list-style: none;
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 29px, rgb(214 70 60 / 0.42) 29px 30px, transparent 30px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgb(70 110 190 / 0.2) 29px 30px),
    linear-gradient(176deg, #fffdf6, var(--paper) 60%, color-mix(in srgb, var(--paper), #c9b48a 14%));
  background-position: 0 0, 0 8px, 0 0;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    0 0 0 1px rgb(90 70 40 / 0.1),
    0 1px 2px rgb(60 46 20 / 0.14),
    0 8px 16px -10px rgb(60 46 20 / 0.4);
}

.card li {
  margin: 0;
}

.song {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  height: 30px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--pen), #f7f1e2 22%);
  font-family: 'Caveat Variable', cursive;
  font-size: 22px;
  line-height: 30px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.song__name {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: 0 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 430;
  transition: font-weight 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), color 0.3s ease;
}

/* the highlighter, swiped along the song as it plays */
.song__mark {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 8px;
  width: 100%;
  height: 17px;
  border-radius: 3px 8px 4px 9px / 7px 4px 8px 5px;
  background: linear-gradient(176deg, color-mix(in srgb, var(--marker), #ffffff 20%), var(--marker) 40%, color-mix(in srgb, var(--marker), #f0a020 18%));
  opacity: 0.85;
  mix-blend-mode: multiply;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.song__len {
  flex: none;
  margin-left: auto;
  font-size: 19px;
  font-weight: 420;
  opacity: 0.8;
}

.song.is-on .song__name {
  color: var(--pen);
  font-weight: 690;
}

@media (hover: hover) {
  .song:hover .song__name {
    color: var(--pen);
    font-weight: 560;
  }

  .song.is-on:hover .song__name {
    font-weight: 700;
  }
}

.song:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: -1px;
  border-radius: 4px;
}

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

/* ---------------------------------------------------------------- the time */
.times {
  display: flex;
  justify-content: space-between;
  margin: 10px 4px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 560;
  font-stretch: 88%;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the piano keys */
.keys {
  display: flex;
  gap: 5px;
  height: 64px;
  margin-top: 8px;
  padding: 6px 6px 0;
  overflow: hidden;
  border-radius: 14px 14px 12px 12px;
  background: linear-gradient(180deg, #151517, #26262a 40%, #1c1c1f);
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 0.65),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    0 1px 0 rgb(255 255 255 / 0.8);
}

.key {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the key travels down by --press (0 up, 1 right down): its cap sinks and the front face under it gets shorter */
.key__body {
  --press: 0;
  position: relative;
  display: block;
  height: 100%;
  transform: translateY(calc(var(--press) * 7px));
}

.key__cap {
  position: relative;
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 8px 8px 5px 5px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--key), #ffffff 12%), var(--key));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -1px 0 rgb(0 0 0 / 0.4),
    0 calc(10px - var(--press) * 7px) 0 color-mix(in srgb, var(--key), #000000 45%),
    0 calc(11px - var(--press) * 7px) 3px rgb(0 0 0 / 0.5);
  color: #e8e2d4;
}

.key--play .key__cap {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--stripe), #ffffff 8%), var(--stripe));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -1px 0 rgb(0 0 0 / 0.25),
    0 calc(10px - var(--press) * 7px) 0 color-mix(in srgb, var(--stripe), #000000 40%),
    0 calc(11px - var(--press) * 7px) 3px rgb(0 0 0 / 0.5);
  color: #fff6ea;
}

.key svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.92;
  filter: drop-shadow(0 -0.5px 0 rgb(0 0 0 / 0.45)) drop-shadow(0 0.5px 0 rgb(255 255 255 / 0.15));
}

@media (hover: hover) {
  .key:hover .key__cap {
    filter: brightness(1.12);
  }
}

.key:focus-visible {
  outline: none;
}

.key:focus-visible .key__cap {
  outline: 2px solid #f4efe4;
  outline-offset: -4px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .song__name {
    transition: color 0.3s ease;
  }
}