/* The tape deck: recessed door frame, the bay, the cassette with its two
   sides, and the hinged door. Each is its own layer so the flip can open the
   door, lift the cassette out and turn it over. */

.deck {
  position: relative;
  min-height: 0;
  border-radius: calc(var(--u) * 5.4);
  background: linear-gradient(178deg, #a3bcd2, #8eaac3);
  box-shadow:
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 0.6) rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--u) * -0.6) calc(var(--u) * 0.8) rgba(43, 66, 94, 0.5),
    0 0 0 calc(var(--u) * 0.2) rgba(43, 66, 94, 0.45),
    0 calc(var(--u) * 0.5) calc(var(--u) * 0.5) rgba(255, 255, 255, 0.35);
  perspective: calc(var(--u) * 420);
  perspective-origin: 50% 30%;
}

/* Recessed cross-head screws. */
.screw {
  position: absolute;
  top: calc(var(--u) * 1.5);
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: 50%;
  background:
    linear-gradient(40deg, transparent 44%, rgba(60, 35, 5, 0.85) 45% 55%, transparent 56%),
    linear-gradient(-50deg, transparent 44%, rgba(60, 35, 5, 0.85) 45% 55%, transparent 56%),
    radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  box-shadow:
    0 0 0 calc(var(--u) * 0.45) rgba(43, 66, 94, 0.5),
    0 calc(var(--u) * 0.35) calc(var(--u) * 0.3) rgba(255, 255, 255, 0.45),
    inset 0 calc(var(--u) * -0.3) calc(var(--u) * 0.3) rgba(60, 35, 5, 0.6);
}

.screw--tl {
  left: calc(var(--u) * 1.7);
}

.screw--tr {
  right: calc(var(--u) * 1.7);
  transform: rotate(28deg);
}

/* The well the cassette sits in. */
.bay {
  position: absolute;
  inset: calc(var(--u) * 5.6) calc(var(--u) * 4.6) calc(var(--u) * 4.4);
  border-radius: calc(var(--u) * 3);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(120, 85, 55, 0.35), transparent 60%),
    linear-gradient(180deg, #1a120c, #2c1f15 70%, #1e150e);
  box-shadow: inset 0 calc(var(--u) * 1.4) calc(var(--u) * 2.2) #000;
}

.bay__spindles {
  position: absolute;
  inset: 0;
}

.bay__spindles i {
  position: absolute;
  top: 61%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  margin: calc(var(--u) * -3) 0 0 calc(var(--u) * -3);
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, #6b6156 0 8%, #2b2520 8% 33%, #6b6156 33% 41%, #2b2520 41% 66%, #6b6156 66% 74%, #2b2520 74% 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 0.5) #0d0906,
    inset 0 0 0 calc(var(--u) * 1.6) rgba(20, 15, 12, 0.85);
}

.bay__spindles i:first-child {
  left: 31%;
}

.bay__spindles i:last-child {
  left: 69%;
}

/* ---- cassette ------------------------------------------------------------------ */

.cassette-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: calc(var(--u) * 130);
  z-index: 1;
}

.device[data-flipping] .cassette-stage {
  z-index: 4; /* out of the bay and above the open door while it turns */
}

.cassette {
  position: relative;
  width: calc(var(--u) * 76);
  height: calc(var(--u) * 44.6);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Side B is the back of the same object. At rest on side B the cassette simply
   stays turned over. */
.cassette[data-side='B'] {
  transform: rotateY(180deg);
}

.cassette__face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--u) * 2.2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Smoky clear shell: the tape packs show through it. */
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 46%),
    linear-gradient(180deg, rgba(176, 150, 118, 0.46), rgba(104, 84, 64, 0.5));
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.3) rgba(255, 248, 230, 0.28),
    inset 0 calc(var(--u) * 0.7) calc(var(--u) * 0.9) rgba(255, 255, 255, 0.2),
    inset 0 calc(var(--u) * -0.8) calc(var(--u) * 1) rgba(0, 0, 0, 0.35),
    0 calc(var(--u) * 0.9) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cassette__face--a {
  transform: rotateY(0deg); /* its own 3D layer, so WebKit honours the hidden back */
}

.cassette__face--b {
  transform: rotateY(180deg);
}

/* The side facing away is hidden outright. iPhone browsers (all WebKit) can
   ignore backface-visibility and show the far label through, mirrored. During
   a flip the cassette view swaps the faces at the moment it is edge-on. */
.cassette__face[data-away] {
  visibility: hidden;
}

/* Tape packs: wound tape whose size follows the listening position. */
.pack {
  position: absolute;
  top: 61%;
  width: calc(var(--u) * 30 * var(--size, 1));
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 calc(var(--u) * 0.35), rgba(0, 0, 0, 0.16) calc(var(--u) * 0.35) calc(var(--u) * 0.6)),
    radial-gradient(circle, #6a4630 0%, #54341f 62%, #3d2414 100%);
  box-shadow: 0 0 calc(var(--u) * 0.6) rgba(0, 0, 0, 0.6);
}

.pack--l {
  left: 31%;
}

.pack--r {
  left: 69%;
}

/* The tape itself, threaded from the supply pack round the two guide rollers,
   along the bottom past the head, and onto the take-up pack. */
.tape-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tape-path path {
  fill: none;
}

.tape-path__tape {
  stroke: #6e4429;
  stroke-width: 5.4;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Light catching the moving tape: this is what shows it feeding across. */
.tape-path__sheen {
  stroke: rgba(244, 208, 164, 0.7);
  stroke-width: 2.4;
  stroke-dasharray: 9 31;
  stroke-linecap: round;
}

.tape-path__roller circle {
  fill: #e9dfc6;
  stroke: #8f8166;
  stroke-width: 2;
}

.tape-path__roller path {
  stroke: #8f8166;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.reel {
  position: absolute;
  top: 61%;
  width: calc(var(--u) * 13.8);
  height: calc(var(--u) * 13.8);
  margin: calc(var(--u) * -6.9) 0 0 calc(var(--u) * -6.9);
  will-change: transform;
}

.reel--l {
  left: 31%;
}

.reel--r {
  left: 69%;
}

.reel svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(var(--u) * 0.3) calc(var(--u) * 0.4) rgba(0, 0, 0, 0.55));
}

/* The strip of paper stuck across the top: the editable label. */
.tape-label {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  top: 6%;
  height: 34%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2) calc(var(--u) * 1) calc(var(--u) * 1.4);
  border: 0;
  border-radius: calc(var(--u) * 0.5);
  text-align: left;
  color: #26314a;
  background:
    url('../assets/wear-stain.svg') 40% 20% / calc(var(--u) * 44) auto,
    linear-gradient(178deg, #f6eedb, #ecdfc2);
  box-shadow:
    0 calc(var(--u) * 0.35) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.5),
    inset 0 0 calc(var(--u) * 1.6) rgba(150, 110, 60, 0.28);
  /* A slightly uneven hand-cut edge. */
  clip-path: polygon(0.6% 3%, 34% 0%, 71% 2.5%, 99.5% 0.5%, 100% 97%, 62% 100%, 27% 97.5%, 0% 99.5%);
  z-index: 2;
  touch-action: manipulation;
}

.tape-label__side {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: calc(var(--u) * 8.4);
  padding: 0 calc(var(--u) * 1);
  border-right: calc(var(--u) * 0.3) solid rgba(38, 49, 74, 0.55);
  font-family: var(--font-label);
  font-weight: 700;
  line-height: 1;
  gap: calc(var(--u) * 0.5);
}

.tape-label__side small {
  display: block;
  font-size: max(8px, calc(var(--u) * 2.1));
  letter-spacing: 0.16em;
}

.tape-label__side b {
  display: block;
  font-family: var(--font-slab);
  font-size: calc(var(--u) * 5.8);
  line-height: 0.82;
  padding-top: calc(var(--u) * 0.5);
}

.tape-label__text {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
}

.tape-label__title {
  align-self: end;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: calc(var(--u) * 5.4);
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: calc(var(--u) * 0.3);
  border-bottom: calc(var(--u) * 0.3) solid #c2463a;
}

.tape-label__title[data-long] {
  font-size: calc(var(--u) * 4.2);
}

.tape-label__meta {
  font-family: var(--font-hand);
  font-size: max(9px, calc(var(--u) * 2.9));
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.25em;
  color: #3a4662;
}

.tape-label[data-empty] .tape-label__title {
  color: #5c5a55;
  font-weight: 400;
}

.tape-label:focus-visible {
  outline: max(3px, calc(var(--u) * 0.8)) solid var(--focus-on-dark);
  outline-offset: calc(var(--u) * -1);
}

/* Moulded details of the shell. */
.shell__foot {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 17%;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 22% 55%, rgba(20, 15, 12, 0.7) 0 calc(var(--u) * 0.9), transparent calc(var(--u) * 1)),
    radial-gradient(circle at 78% 55%, rgba(20, 15, 12, 0.7) 0 calc(var(--u) * 0.9), transparent calc(var(--u) * 1)),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.2) 0 calc(var(--u) * 1.1), transparent calc(var(--u) * 1.2)),
    linear-gradient(180deg, rgba(40, 32, 27, 0.75), rgba(22, 17, 14, 0.85));
  box-shadow: inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.18);
}

.shell__screw {
  position: absolute;
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.5), rgba(60, 50, 44, 0.75) 60%);
  box-shadow: 0 0 0 calc(var(--u) * 0.25) rgba(0, 0, 0, 0.3);
}

.shell__screw:nth-of-type(1) {
  left: 2.2%;
  top: 3.5%;
}

.shell__screw:nth-of-type(2) {
  right: 2.2%;
  top: 3.5%;
}

.shell__screw:nth-of-type(3) {
  left: 2.2%;
  bottom: 3.5%;
}

.shell__screw:nth-of-type(4) {
  right: 2.2%;
  bottom: 3.5%;
}

/* ---- paper tags: "Add a cassette" in an empty bay, "Add Side B" on an empty side */

.tag {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  min-height: max(40px, calc(var(--u) * 10.5));
  padding: 0 calc(var(--u) * 4);
  border: 0;
  border-radius: calc(var(--u) * 0.8);
  color: #26314a;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: max(15px, calc(var(--u) * 4.6));
  white-space: nowrap;
  background:
    url('../assets/wear-stain.svg') 10% 70% / calc(var(--u) * 40) auto,
    linear-gradient(178deg, #f8f0dc, #eadcbd);
  box-shadow:
    0 calc(var(--u) * 0.6) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.65),
    inset 0 0 0 calc(var(--u) * 0.3) rgba(38, 49, 74, 0.35);
}

.tag::before {
  content: '+';
  margin-right: 0.35em;
  font-family: var(--font-slab);
}

.tag--first {
  top: 50%;
  margin-top: calc(max(40px, var(--u) * 10.5) / -2);
}

.tag--side {
  bottom: calc(var(--u) * 3.4);
}

.tag:active {
  transform: translateX(-50%) rotate(-2deg) scale(0.97);
}

.tag:focus-visible {
  outline: max(3px, calc(var(--u) * 0.8)) solid var(--focus-on-dark);
  outline-offset: calc(var(--u) * 0.6);
}

/* ---- the door: brass frame and glass, hinged along the bottom ------------------- */

.door {
  position: absolute;
  inset: calc(var(--u) * 4.5) calc(var(--u) * 3.5) calc(var(--u) * 3.3);
  border-radius: calc(var(--u) * 4);
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}

.door__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: calc(var(--u) * 1.15);
  background:
    url('../assets/wear-stain.svg') 0 0 / calc(var(--u) * 30) auto,
    linear-gradient(165deg, var(--brass-hi) 0%, var(--brass) 28%, #a67a32 62%, var(--brass-lo) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.door::before {
  /* Shadow the frame throws on the body, and the lip inside it. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 calc(var(--u) * 0.5) calc(var(--u) * 0.8) rgba(20, 30, 45, 0.6),
    inset 0 0 0 calc(var(--u) * 1.15) transparent,
    inset 0 calc(var(--u) * 1.6) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.5);
}

.door__glass {
  position: absolute;
  inset: calc(var(--u) * 1.15);
  border-radius: calc(var(--u) * 2.9);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 38%, transparent 70%, rgba(255, 255, 255, 0.07) 100%),
    url('../assets/wear-speckle.svg') 0 0 / calc(var(--u) * 60) auto;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.25) rgba(255, 255, 255, 0.22),
    inset 0 0 calc(var(--u) * 2.4) rgba(255, 240, 210, 0.12);
  opacity: 0.9;
}

/* Reduced motion: no swinging door or turning cassette, just a brief, clear
   change of side. */
@media (prefers-reduced-motion: reduce) {
  .cassette,
  .door {
    will-change: auto;
  }
}