/* The ferrofluid slider: the bass of a speaker on a white page. A pale glass shelf, and on it a puddle of black
   ferrofluid; the script reads from here the fluid's own colour and the three lights it reflects. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #16171b;           /* the words and the focus ring */
  --muted: #8d9099;         /* the scale under the shelf */
  --glass: #f3f5f6;         /* the top of the glass shelf */
  --glass-edge: #cfe2db;    /* the edge of the glass, green like float glass */
  --film: #0c0c0f;          /* the thin film the fluid leaves on the glass */
  --fluid: #060607;         /* the ferrofluid itself */
  --key: #fff3e4;           /* the warm softbox the fluid reflects, up on the left */
  --rim: #9cc2ff;           /* the cool strip light on the right */
  --room: #ffffff;          /* the white room all round */
}

* {
  box-sizing: border-box;
}

/* the canvas runs a little past the slider on both sides: never a sideways scroll for it */
html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

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

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.bass {
  width: min(400px, 100%);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the name and the value */
.bass__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bass__label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bass__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.bass__number {
  font-size: 24px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.bass__unit {
  color: var(--muted);
  font-size: 15px;
  font-weight: 520;
}

/* ---------------------------------------------------------------- the shelf, the fluid and the magnet's mark */
/* the whole strip is the slider: pressed anywhere, the magnet goes there. No scrolling on it: a finger drags */
.bass__track {
  position: relative;
  height: 120px;
  touch-action: none;
  outline: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

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

/* the glass shelf seen a little from above: its top, then its edge. The script reads where the top is, to stand
   the fluid in the middle of it */
.bass__shelf {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  height: 17px;
  border-radius: 7px;
}

/* the top of the glass: almost nothing, a fine line at the back where it catches the light and a faint sheen */
.bass__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 11px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #dfe4e6 0, #eef1f2 1.5px, var(--glass) 45%, #fafbfb 100%);
  box-shadow: inset 1px 0 0 rgba(22, 23, 27, 0.05), inset -1px 0 0 rgba(22, 23, 27, 0.05);
}

/* its edge, green like the edge of float glass, lit along the top and darker underneath */
.bass__edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 6px;
  border-radius: 1px 1px 5px 5px;
  background: linear-gradient(180deg, #ffffff 0 1px, #e3f1ec 1px, var(--glass-edge) 45%, #a9c7bb 100%);
  box-shadow: 0 7px 12px -7px rgba(22, 23, 27, 0.22);
}

/* the film of fluid it leaves on the glass, from the left end to the puddle */
.bass__film {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 94px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a3b42 0%, var(--film) 60%);
  pointer-events: none;
}

/* the magnet under the glass: a small steel mark right on the value, which the fluid chases */
.bass__mark {
  position: absolute;
  left: 0;
  top: 109px;
  width: 18px;
  height: 5px;
  margin-left: -9px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d9dbe0 0%, #9ea2ab 55%, #6d717a 100%);
  box-shadow: 0 1px 2px rgba(22, 23, 27, 0.25);
  opacity: 0;
  pointer-events: none;
}

/* the canvas runs past the strip on both sides, for the spikes leaning out at the ends */
.bass__fluid {
  position: absolute;
  left: -16px;
  top: 0;
  width: calc(100% + 32px);
  height: 100%;
  pointer-events: none;
}

/* the keys' ring goes round the shelf */
.bass__shelf::after {
  content: '';
  position: absolute;
  inset: -5px -6px;
  border-radius: 11px;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  transition: opacity 0.15s;
}

.bass__track:focus-visible .bass__shelf::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- the two ends */
.bass__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}