/* The tuning knob: the face of a radio on a black page, with the backlit scale above and the screen and the knob
   below. Everything is drawn at 360 units wide and scales with the radio (--u is one unit). */
:root {
  --page: #000000;          /* the page */
  --cabinet: #1d1915;       /* the radio's face, a warm black */
  --sheet-cold: #5f625c;    /* the scale's backlit sheet, between stations */
  --sheet-warm: #f7c47a;    /* the sheet when a station is tuned in: the light warms */
  --ink: #1b130c;           /* the printing on the scale */
  --needle: #d8381a;        /* the needle, and the station it is on */
  --phosphor: #ffc982;      /* the screen's warm glow, and the station's name */
  --snow: #b9c6cf;          /* the static between stations */
  --print: #ece3d4;         /* the light printing on the face */
  --print-soft: #9a9083;    /* the smaller printing */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--print);
  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: 32px 16px;
}

.wrap {
  width: min(360px, 100%);
  container-type: inline-size;
}

/* ---------------------------------------------------------------- the radio's face */
.tuner {
  --u: calc(100cqw / 360);
  position: relative;
  display: grid;
  gap: calc(14 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(28 * var(--u));
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 214 160 / 0.07), rgb(255 214 160 / 0) 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cabinet), #ffffff 4%), var(--cabinet) 40%, color-mix(in srgb, var(--cabinet), #000000 30%));
  box-shadow:
    inset 0 calc(1 * var(--u)) 0 rgb(255 240 220 / 0.12),
    inset 0 calc(-1 * var(--u)) 0 rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(255 255 255 / 0.04);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the scale behind its glass */
.scale {
  position: relative;
  aspect-ratio: 328 / 148;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  background: #0b0907;
  box-shadow: 0 0 0 calc(1.5 * var(--u)) #050403, 0 calc(1 * var(--u)) 0 calc(1.5 * var(--u)) rgb(255 240 220 / 0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.scale__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* the glass over the sheet: a soft reflection and the shade of the bezel */
.scale::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(104deg, rgb(255 255 255 / 0) 8%, rgb(255 255 255 / 0.13) 16%, rgb(255 255 255 / 0.02) 27%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / 0.05) 70%, rgb(255 255 255 / 0) 76%);
  box-shadow:
    inset 0 calc(6 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u)) rgb(0 0 0 / 0.7),
    inset 0 calc(-3 * var(--u)) calc(6 * var(--u)) calc(-2 * var(--u)) rgb(0 0 0 / 0.5),
    inset 0 0 0 calc(1 * var(--u)) rgb(0 0 0 / 0.6);
}

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

/* a station printed on the sheet: a tap tunes the radio to it. --lit is how well it is tuned in, from the script */
.mark {
  --lit: 0;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: calc(6 * var(--u)) calc(5 * var(--u));
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--ink), var(--needle) calc(var(--lit) * 100%));
  font: inherit;
  font-size: calc(10 * var(--u));
  font-weight: 640;
  font-stretch: 112%;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  translate: -50% -50%;
  -webkit-tap-highlight-color: transparent;
}

.mark span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: calc(0.78 + var(--lit) * 0.22);
}

@media (hover: hover) {
  .mark:hover span {
    transform: translateY(calc(-1.5 * var(--u))) scale(1.08);
    opacity: 1;
  }
}

.mark:active span {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

/* ---------------------------------------------------------------- the screen and the reading */
.tuner__low {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(140 * var(--u));
  align-items: center;
  column-gap: calc(16 * var(--u));
}

.panel {
  min-width: 0;
  display: grid;
  gap: calc(10 * var(--u));
}

.screen {
  position: relative;
  aspect-ratio: 172 / 92;
  border-radius: calc(10 * var(--u));
  overflow: hidden;
  background: #050605;
  box-shadow: 0 0 0 calc(1.5 * var(--u)) #050403, 0 calc(1 * var(--u)) 0 calc(1.5 * var(--u)) rgb(255 240 220 / 0.07);
}

.screen__noise {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 34%);
  box-shadow: inset 0 0 calc(14 * var(--u)) rgb(0 0 0 / 0.85), inset 0 0 0 calc(1 * var(--u)) rgb(0 0 0 / 0.7);
}

/* the station's name, letter by letter: the script works out each letter's light as the station comes in */
.screen__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 calc(12 * var(--u));
  color: var(--phosphor);
  font-size: calc(19 * var(--u));
  font-weight: 560;
  font-stretch: 104%;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.screen__name span {
  display: inline-block;
  white-space: pre;
}

.read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  row-gap: calc(4 * var(--u));
  padding: 0 calc(2 * var(--u));
}

.read p {
  margin: 0;
}

.read__freq {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  color: var(--print);
  font-size: calc(30 * var(--u));
  font-weight: 330;
  font-stretch: 92%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.read__unit {
  color: var(--print-soft);
  font-size: calc(11 * var(--u));
  font-weight: 560;
  font-stretch: 110%;
  letter-spacing: 0.06em;
}

.read__bars {
  width: calc(23 * var(--u));
  height: calc(14 * var(--u));
  margin-bottom: calc(2 * var(--u));
  overflow: visible;
}

.read__bars rect {
  fill: var(--print-soft);
  opacity: 0.28;
  transition: opacity 0.18s ease, fill 0.18s ease;
}

.read__bars rect.is-on {
  fill: var(--phosphor);
  opacity: 1;
}

.read__line {
  grid-column: 1 / -1;
  color: var(--print-soft);
  font-size: max(11px, calc(12 * var(--u)));
  font-weight: 460;
  font-stretch: 104%;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- the knob */
/* a round area the finger turns without scrolling the page; the knob and its shadow are on the canvas, which is
   larger than the knob so the shadow has room */
.knob {
  position: relative;
  width: calc(140 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  outline: none;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

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

.knob__canvas {
  position: absolute;
  inset: calc(-16 * var(--u));
  width: calc(100% + 32 * var(--u));
  height: calc(100% + 32 * var(--u));
  pointer-events: none;
}

/* the keyboard's ring, round the knob */
.knob::after {
  content: '';
  position: absolute;
  inset: calc(-5 * var(--u));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--phosphor);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.knob:focus-visible::after {
  opacity: 1;
}

html[data-using='pointer'] .knob:focus-visible::after {
  opacity: 0;
}

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