/* The haptics switch: a pill of black steel with a little sand on it, and a white knob. The sand is drawn on a canvas
   with the colour below; turned on, the plate takes the colour of the plate on, following the knob along the track. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #131418;           /* the words */
  --plate: #17181c;         /* the steel plate, off */
  --plate-on: #1b2c6e;      /* the steel plate, on */
  --sand: #efe3c8;          /* the sand */
  --knob: #ffffff;          /* the knob */
  --focus: #2f4fd8;         /* 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: 'Schibsted Grotesk Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* on one line down to a phone of 390 pixels; on a narrower screen the words go above the switch */
.hap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
}

.hap__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 plate */
.hap__switch {
  position: relative;
  flex: none;
  width: 168px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--plate);
  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;
}

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

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

/* satin steel: lighter where the light from above catches it, deeper towards the bottom */
.hap__plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 120% at 28% -30%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--plate), #ffffff 7%), var(--plate) 45%, color-mix(in srgb, var(--plate), #000000 30%));
}

/* the plate on: its opacity follows the knob along the track */
.hap__fill {
  background:
    radial-gradient(70% 120% at 28% -30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--plate-on), #ffffff 8%), var(--plate-on) 45%, color-mix(in srgb, var(--plate-on), #000000 32%));
  opacity: 0;
}

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

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

/* the plate sits a little into the page */
.hap__shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the knob */
/* two boxes: the knob runs along the plate and shakes while it buzzes, and the puck inside squashes against the end
   of the track and sinks a little under a finger */
.hap__knob {
  position: absolute;
  left: 0;
  top: 4px;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.hap__puck {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 62%),
    radial-gradient(100% 100% at 50% 100%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 55%),
    var(--knob);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 1px 1.5px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.08);
}