/* The noise cancelling switch: a pill with the sound going by inside it, and a white knob. The sound is drawn on a
   canvas with the colours below; the silence spreading out of the knob is the colour of the track when it is on. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141418;           /* the words */
  --track: #e7e7eb;         /* the track, off */
  --quiet: #2b2bd1;         /* the track, on: the silence spreading out of the knob */
  --noise: #6f707b;         /* the sound while the noise of the street comes in */
  --music: #ffffff;         /* the sound once only the music is left */
  --anti: #ffb84d;          /* the mirror image of the noise that cancels it */
  --knob: #ffffff;          /* the knob */
  --focus: #2b2bd1;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  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: 40px 16px;
}

.anc {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.anc__label {
  font-size: 19px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.012em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the track */
.anc__switch {
  position: relative;
  flex: none;
  width: 140px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--track);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* a finger dragged across moves the knob; up and down the page still scrolls */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.anc__switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

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

.anc__sound {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the sound as it was, fading away over the new one when the motion is reduced */
.anc__was {
  opacity: 0;
}

/* the track is a little sunk into the page */
.anc__shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.16),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.07);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the knob */
/* two boxes: the knob moves along the track and gets wider while it is held and while it runs, and the puck
   squashes against the end of the track */
.anc__knob {
  position: absolute;
  left: 0;
  top: 3px;
  width: 50px;
  height: 50px;
  pointer-events: none;
}

.anc__puck {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
    var(--knob);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.05),
    0 1px 1px rgba(0, 0, 0, 0.09),
    0 3px 8px rgba(0, 0, 0, 0.16),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.4s ease;
}

/* on the coloured track the knob's shadow takes the colour, deeper, instead of a dirty grey */
.anc__switch[aria-checked='true'] .anc__puck {
  box-shadow:
    0 0 0 0.5px color-mix(in srgb, color-mix(in srgb, var(--quiet), #000 50%) 30%, transparent),
    0 1px 1px color-mix(in srgb, color-mix(in srgb, var(--quiet), #000 60%) 40%, transparent),
    0 3px 9px color-mix(in srgb, color-mix(in srgb, var(--quiet), #000 55%) 55%, transparent),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}