/*
 * Hi-fi turntable. A belt-drive deck seen from directly above.
 * Every length is in cqw: the script places parts in millimetres of a 452mm
 * wide scene and converts them, so 1mm is 100/452 cqw.
 */
.dsp-hifi-turntable {
  background: #17181b;
}

.dsp-hifi-turntable svg,
.dsp-hifi-turntable canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.dsp-hifi-turntable svg {
  overflow: visible;
}

.dsp-hifi-turntable .hf-groundsvg,
.dsp-hifi-turntable .hf-base,
.dsp-hifi-turntable .hf-hardware {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dsp-hifi-turntable .hf-layer {
  position: absolute;
  pointer-events: none;
}

.dsp-hifi-turntable .hf-clipbox {
  overflow: hidden;
}

.dsp-hifi-turntable .hf-clipbox > div {
  position: absolute;
  inset: 0;
}

/* Holds a rotating part so its layout box never widens the stage. */
.dsp-hifi-turntable .hf-hold {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dsp-hifi-turntable .hf-move {
  will-change: transform;
}

.dsp-hifi-turntable .hf-fade {
  will-change: transform, opacity;
}

/* ---- platter rim: strobe dots ---------------------------------------- */

.dsp-hifi-turntable .hf-blur-ring {
  border-radius: 50%;
  opacity: 0;
  will-change: opacity;
  background: radial-gradient(
    circle closest-side,
    transparent 95.05%,
    rgba(255, 255, 255, 0.3) 95.25%,
    rgba(255, 255, 255, 0.3) 96.45%,
    transparent 96.65%,
    transparent 97.2%,
    rgba(255, 255, 255, 0.32) 97.4%,
    rgba(255, 255, 255, 0.32) 98.65%,
    transparent 98.85%
  );
}

/* Only the part of the rim under the strobe lamp shows the lit, frozen dots. */
.dsp-hifi-turntable .hf-strobe {
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle 8.6cqw at 8.1% 74.2%, #000 0, #000 38%, transparent 100%);
  mask-image: radial-gradient(circle 8.6cqw at 8.1% 74.2%, #000 0, #000 38%, transparent 100%);
}

.dsp-hifi-turntable .hf-strobe-tint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    transparent 94.35%,
    rgba(52, 6, 0, 0.78) 94.55%,
    rgba(52, 6, 0, 0.78) 99.25%,
    transparent 99.5%
  );
}

.dsp-hifi-turntable .hf-lit {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ---- arm shadow that falls on the platter and record ------------------ */

.dsp-hifi-turntable .hf-shadow-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: circle(36.5cqw at 42.035cqw 50cqw);
}

/* ---- controls ---------------------------------------------------------- */

.dsp-hifi-turntable button {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}

.dsp-hifi-turntable button:focus {
  outline: none;
}

.dsp-hifi-turntable button:focus-visible {
  outline: max(2px, 0.55cqw) solid #ffd58a;
  outline-offset: 0.35cqw;
}

/* Start and stop key */
.dsp-hifi-turntable .hf-key,
.dsp-hifi-turntable .hf-rkey {
  border-radius: 1cqw;
}

.dsp-hifi-turntable .hf-cap {
  position: absolute;
  inset: 0.2cqw;
  transform-origin: 50% 50%;
  transition: transform 80ms ease-out;
  will-change: transform;
}

.dsp-hifi-turntable .hf-key:active .hf-cap,
.dsp-hifi-turntable .hf-rkey:active .hf-cap,
.dsp-hifi-turntable .hf-rkey.is-pressed .hf-cap {
  transform: translate(0.07cqw, 0.09cqw) scale(0.982);
}

.dsp-hifi-turntable .hf-cap-press {
  position: absolute;
  inset: 0;
  border-radius: 0.8cqw;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12));
  opacity: 0;
  transition: opacity 80ms ease-out;
}

.dsp-hifi-turntable .hf-key:active .hf-cap-press,
.dsp-hifi-turntable .hf-rkey:active .hf-cap-press,
.dsp-hifi-turntable .hf-rkey.is-pressed .hf-cap-press {
  opacity: 1;
}

.dsp-hifi-turntable .hf-lamp {
  position: absolute;
  left: 3.4%;
  top: 1%;
  width: 22%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    #fffbe9 0,
    #ffd98a 14%,
    rgba(255, 170, 52, 0.85) 26%,
    rgba(255, 140, 20, 0.34) 48%,
    rgba(255, 130, 10, 0) 100%
  );
  opacity: 0.12;
  will-change: opacity;
  transition: opacity 0.25s ease-out;
}

.dsp-hifi-turntable .hf-key.is-idle .hf-lamp {
  animation: dsp-hifi-turntable-breathe 2.4s ease-in-out infinite;
}

.dsp-hifi-turntable .hf-key.is-on .hf-lamp {
  opacity: 1;
}

@keyframes dsp-hifi-turntable-breathe {
  0%,
  100% {
    opacity: 0.16;
  }
  50% {
    opacity: 0.95;
  }
}

/* Speed selector: drawn, resting on 33, and inert. */
.dsp-hifi-turntable .hf-speed {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.dsp-hifi-turntable .hf-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.6cqw;
  height: 5.6cqw;
  margin: -2.8cqw 0 0 -2.8cqw;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #4d4f53 0 3deg, #d4d6d9 3deg 6deg);
  box-shadow:
    0.5cqw 0.55cqw 0.8cqw rgba(0, 0, 0, 0.62),
    0.14cqw 0.18cqw 0.25cqw rgba(0, 0, 0, 0.55);
}

.dsp-hifi-turntable .hf-knob::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 0, 0, 0.1) 0deg,
    rgba(0, 0, 0, 0.42) 60deg,
    rgba(255, 255, 255, 0.28) 135deg,
    rgba(0, 0, 0, 0.5) 215deg,
    rgba(255, 255, 255, 0.1) 280deg,
    rgba(255, 255, 255, 0.55) 315deg,
    rgba(0, 0, 0, 0.1) 360deg
  );
}

.dsp-hifi-turntable .hf-knob-top {
  position: absolute;
  inset: 0.5cqw;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #a7aaaf 0deg,
    #74777c 48deg,
    #b9bcc1 108deg,
    #f2f3f5 135deg,
    #b3b6bb 162deg,
    #70737a 228deg,
    #b4b7bc 288deg,
    #ffffff 315deg,
    #bcbfc4 342deg,
    #a7aaaf 360deg
  );
  box-shadow:
    inset 0 0 0 max(0.5px, 0.07cqw) rgba(255, 255, 255, 0.55),
    0 0 0.16cqw 0.05cqw rgba(0, 0, 0, 0.6);
}

.dsp-hifi-turntable .hf-knob-pointer {
  position: absolute;
  inset: 0;
  transform: rotate(-38deg);
  transition: transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
  will-change: transform;
}

.dsp-hifi-turntable .hf-knob-pointer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 0.4cqw;
  height: 31%;
  margin-left: -0.2cqw;
  border-radius: 0.2cqw;
  background: #141518;
  box-shadow: 0.05cqw 0.05cqw 0 rgba(255, 255, 255, 0.65);
}

/* Cueing lever */
.dsp-hifi-turntable .hf-cue {
  border-radius: 1cqw;
}

.dsp-hifi-turntable .hf-cue-stem {
  position: absolute;
  left: 50%;
  top: 26%;
  width: 0.66cqw;
  height: 4.6cqw;
  margin-left: -0.33cqw;
  border-radius: 0.3cqw;
  transform-origin: 50% 0;
  background: linear-gradient(90deg, #f6f7f8 0, #c4c7cb 30%, #8c8f94 62%, #4d4f53 100%);
  box-shadow: 0.4cqw 0.45cqw 0.5cqw rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.6, 1);
  will-change: transform;
}

.dsp-hifi-turntable .hf-cue-tip {
  position: absolute;
  left: 50%;
  top: calc(26% + 3.5cqw);
  width: 1.9cqw;
  height: 2.6cqw;
  margin-left: -0.95cqw;
  border-radius: 0.9cqw;
  background:
    radial-gradient(ellipse 60% 45% at 34% 26%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #3d3e42 0, #17181a 55%, #050506 100%);
  box-shadow:
    0.5cqw 0.55cqw 0.6cqw rgba(0, 0, 0, 0.48),
    inset 0 0 0 max(0.5px, 0.06cqw) rgba(255, 255, 255, 0.12);
  transition: transform 0.22s cubic-bezier(0.3, 1.5, 0.6, 1);
  will-change: transform;
}

.dsp-hifi-turntable .hf-cue.is-up .hf-cue-stem {
  transform: scaleY(0.46);
}

.dsp-hifi-turntable .hf-cue.is-up .hf-cue-tip {
  transform: translateY(-2.5cqw) scale(1.1);
}

/* The headshell is the grab point for seeking. */
.dsp-hifi-turntable .hf-handle {
  border-radius: 2.4cqw;
  cursor: grab;
  touch-action: none;
}

.dsp-hifi-turntable.is-dragging .hf-handle {
  cursor: grabbing;
}

/* ---- scene: the mat runs out to the band's edges --------------------------- */

.dsp-backdrop-hifi-turntable .hf-bd {
  position: absolute;
  inset: 0;
  background-repeat: repeat, no-repeat;
}

.dsp-scene .dsp-hifi-turntable {
  background: transparent;
}

.dsp-scene .dsp-hifi-turntable .hf-ground {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .dsp-hifi-turntable .hf-key.is-idle .hf-lamp {
    animation: none;
    opacity: 0.6;
  }
  .dsp-hifi-turntable .hf-knob-pointer,
  .dsp-hifi-turntable .hf-cue-stem,
  .dsp-hifi-turntable .hf-cue-tip {
    transition-duration: 0.01s;
  }
}

/* ---- dedication card: the owner's words, handwritten -------------------- */

/* A cream note card on the mat, its lower edge slid under the plinth. */
.dsp-hifi-turntable .hf-card,
.dsp-hifi-turntable .hf-plaque {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 50%;
  /* Off by default. The owner switches either one on; it fades in place. */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.dsp-hifi-turntable .hf-card.is-on,
.dsp-hifi-turntable .hf-plaque.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

.dsp-hifi-turntable .hf-card-paper {
  position: absolute;
  inset: 0;
  border-radius: 0.35cqw;
  background:
    radial-gradient(ellipse 70% 120% at 18% 0%, rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0) 70%),
    linear-gradient(170deg, #f7efdc 0%, #efe3c6 55%, #e2d2ae 100%);
  box-shadow:
    0.55cqw 0.65cqw 1cqw rgba(0, 0, 0, 0.55),
    0.12cqw 0.16cqw 0.22cqw rgba(0, 0, 0, 0.5),
    inset 0 0 0 max(0.5px, 0.06cqw) rgba(255, 255, 255, 0.6),
    inset -0.3cqw -0.3cqw 0.6cqw rgba(120, 90, 40, 0.12);
}

/* Paper fibre. */
.dsp-hifi-turntable .hf-card-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.35' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 0 0.16  0 0 0 1.1 -0.5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 14cqw 14cqw;
}

/* A thin printed gold rule, inset from the edge. The bottom one hides under the plinth. */
.dsp-hifi-turntable .hf-card-paper::after {
  content: "";
  position: absolute;
  inset: 0.7cqw 1.1cqw 0.4cqw; /* the bottom rule lies under the plinth */
  border: max(0.5px, 0.12cqw) solid rgba(178, 132, 52, 0.7);
  border-radius: 0.2cqw;
}

.dsp-hifi-turntable .hf-card-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsp-hifi-turntable .hf-note {
  display: block;
  max-width: 100%;
  font-family: Caveat, "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight: 600;
  font-size: 3.4cqw;
  line-height: 1;
  color: #1d2742;
  /* Centre the ink, not the line boxes: Caveat's ink sits 0.112em low in a 1em box. */
  position: relative;
  top: calc(-0.112em + 0.12cqw); /* and a hair low, since descender tips read lighter than cap tops */
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* The name stays on one line; the message wraps after it. */
.dsp-hifi-turntable .hf-note-to {
  white-space: nowrap;
}

.dsp-hifi-turntable .hf-note-sep {
  color: #6d5a3a;
}

/* ---- presentation plaque: the owner's words, engraved in brass ---------- */

/* A dark walnut board with a chamfered edge, lying on the mat. */
.dsp-hifi-turntable .hf-plq-wood {
  position: absolute;
  inset: 0;
  border-radius: 0.5cqw;
  background:
    linear-gradient(135deg, rgba(255, 226, 190, 0.16) 0, rgba(255, 226, 190, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(91deg, rgba(0, 0, 0, 0) 0 0.9cqw, rgba(0, 0, 0, 0.13) 0.9cqw 1.05cqw, rgba(0, 0, 0, 0) 1.05cqw 2.3cqw),
    linear-gradient(180deg, #3b2416, #24140b 60%, #1a0e07);
  box-shadow:
    0.6cqw 0.75cqw 1.1cqw rgba(0, 0, 0, 0.6),
    0.15cqw 0.2cqw 0.25cqw rgba(0, 0, 0, 0.55),
    inset 0.14cqw 0.14cqw 0 rgba(255, 220, 180, 0.22),
    inset -0.16cqw -0.16cqw 0 rgba(0, 0, 0, 0.45);
}

/* Brushed brass with a bevelled edge, lit from the upper left. */
.dsp-hifi-turntable .hf-plq-brass {
  position: absolute;
  border-radius: 0.25cqw;
  background:
    linear-gradient(118deg, rgba(255, 250, 225, 0.42) 0, rgba(255, 250, 225, 0) 32%, rgba(255, 255, 255, 0) 62%, rgba(255, 240, 200, 0.16) 78%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, #ecd391 0%, #d4b064 42%, #b98f42 100%);
  box-shadow:
    0.1cqw 0.14cqw 0.2cqw rgba(0, 0, 0, 0.6),
    inset 0.16cqw 0.16cqw 0 rgba(255, 248, 220, 0.75),
    inset -0.16cqw -0.16cqw 0 rgba(96, 66, 20, 0.7),
    inset 0.42cqw 0.42cqw 0.3cqw -0.2cqw rgba(255, 246, 214, 0.35),
    inset -0.42cqw -0.42cqw 0.3cqw -0.2cqw rgba(90, 60, 18, 0.35);
}

/* Hairline brushing along the plate. */
.dsp-hifi-turntable .hf-plq-brass::before {
  content: "";
  position: absolute;
  inset: 0.3cqw;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.24  0 0 0 0 0.06  1.4 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 44cqw 13cqw;
  mix-blend-mode: multiply;
}

.dsp-hifi-turntable .hf-plq-screw {
  position: absolute;
  width: 1.9cqw;
  height: 1.9cqw;
  margin: -0.95cqw 0 0 0;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0) 44%, rgba(58, 40, 10, 0.85) 44% 56%, rgba(0, 0, 0, 0) 56%),
    radial-gradient(circle at 34% 30%, #fff6d8 0, #e2c27a 30%, #a37c34 72%, #6b4c18 100%);
  box-shadow:
    0.18cqw 0.22cqw 0.25cqw rgba(0, 0, 0, 0.55),
    inset 0 0 0 max(0.5px, 0.06cqw) rgba(70, 48, 12, 0.7);
}

.dsp-hifi-turntable .hf-plq-text {
  position: absolute;
}

/* Each line is placed by its baseline from the script, so the ink sits centred. */
.dsp-hifi-turntable .hf-plq-text > .hf-plq-to,
.dsp-hifi-turntable .hf-plq-text > .hf-plq-line {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1;
}

/* Engraved: a dark cut, with a thin highlight on its lower right wall. */
.dsp-hifi-turntable .hf-plq-to,
.dsp-hifi-turntable .hf-plq-line,
.dsp-hifi-turntable .hf-plq-probe {
  display: block;
  font-family: Marcellus, "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #2a1a07;
  white-space: nowrap;
  text-shadow:
    0.05cqw 0.07cqw 0 rgba(255, 244, 210, 0.85),
    -0.03cqw -0.04cqw 0 rgba(70, 44, 8, 0.35);
}

.dsp-hifi-turntable .hf-plq-to,
.dsp-hifi-turntable .hf-plq-probe.is-caps {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
}

.dsp-hifi-turntable .hf-plq-line,
.dsp-hifi-turntable .hf-plq-probe {
  line-height: 1;
  letter-spacing: 0;
}

.dsp-hifi-turntable .hf-plq-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: none;
  visibility: hidden;
  font-size: 10cqw;
}

/* Engraved hairlines either side of the name, each ending in a small lozenge. */
.dsp-hifi-turntable .hf-plq-rule {
  position: absolute;
  left: 50%;
  display: block;
  height: 0;
  --len: 7cqw;
}

.dsp-hifi-turntable .hf-plq-rule::before,
.dsp-hifi-turntable .hf-plq-rule::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--len);
  height: max(1px, 0.13cqw);
  margin-top: -0.065cqw;
  box-shadow: 0.04cqw 0.07cqw 0 rgba(255, 244, 210, 0.75);
}

.dsp-hifi-turntable .hf-plq-rule::before {
  left: 0;
  background: linear-gradient(90deg, rgba(42, 26, 7, 0), #2a1a07 70%);
}

.dsp-hifi-turntable .hf-plq-rule::after {
  right: 0;
  background: linear-gradient(270deg, rgba(42, 26, 7, 0), #2a1a07 70%);
}

.dsp-hifi-turntable .hf-plq-rule i {
  display: none;
}