/* The bike wheel button: a deep navy pill on a white page, with a gravel wheel bolted on its round left end. The
   wheel, its tyre, spokes, hub, disc brake and the price tag are drawn by script.js on a canvas (their colours come
   from here); the pill, the words and the states are CSS. */
:root {
  --page: #ffffff;            /* the page */
  --pill: #24406a;            /* the pill, at its top */
  --pill-deep: #142644;       /* the pill, at its foot */
  --band: #33598f;            /* the band that sweeps the pill while the wheel spins */
  --ink: #f7f1e5;             /* the words */
  --note: #f3b54a;            /* the small words, and the tick */
  --tyre: #1d1d1f;            /* the tread */
  --gumwall: #b98653;         /* the tan sidewall of the tyre */
  --gumwall-dark: #7e5530;    /* the sidewall, at its edges and the lettering */
  --rim-light: #f5f7f9;       /* the rim, where the light falls */
  --rim: #b6bec6;             /* the rim */
  --rim-dark: #5a636c;        /* the rim, in its shadow */
  --spoke: #8f99a3;           /* the spokes */
  --nipple: #c9a24c;          /* the brass nipples, the valve */
  --hub: #2a2c31;             /* the hub shell and the axle lever */
  --anodized: #e8642d;        /* the orange anodized flanges, the lever tip, the brake caliper */
  --rotor: #c9ced4;           /* the steel brake rotor */
  --heat-blue: #4a78d6;       /* the rotor, hot: the blue of tempered steel */
  --heat-gold: #d9a43c;       /* the rotor, hot: the straw gold */
  --plate: #9aa4ad;           /* the aluminium bracket that holds the wheel on the pill */
  --reflector: #f39a1f;       /* the amber reflector on the spokes */
  --tag: #f4ead4;             /* the price tag */
  --tag-ink: #24406a;         /* the price on it */
  --string: #9a7a55;          /* the string of the tag */
  --shadow: #1a2233;          /* the shadow under the wheel */
  --focus: #2f6fdb;           /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

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

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

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

/* the component: the wheel stands left of the pill, held by its bracket; room above and below for the swinging tag */
.wheel {
  position: relative;
  padding: 52px 0 52px 128px;
  transform-origin: 50% 50%;
}

/* ---------------------------------------------------------------- the pill */
.wheel__btn {
  position: relative;
  display: block;
  width: 200px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.wheel__btn[aria-disabled='true'] {
  cursor: progress;
}

.wheel__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(90% 140% at 30% 0%, rgba(255, 255, 255, 0.1), transparent 62%),
    linear-gradient(180deg, var(--pill), var(--pill-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 22px -12px rgba(20, 38, 68, 0.7);
  transition: inset 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

/* the band that sweeps from the wheel to the end of the pill as the wheel speeds up: the script sets its width */
.wheel__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.22)),
    var(--band);
  border-radius: inherit;
}

.wheel__btn:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 5px;
}

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

/* ---------------------------------------------------------------- the words */
.wheel__words {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  right: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
}

.wheel__line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wheel__word {
  display: inline-block;
  font-size: 16.5px;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.9, 0.45, 1), font-weight 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.wheel__tick {
  flex: none;
  width: 0;
  height: 17px;
  fill: none;
  stroke: var(--note);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  margin-right: -5px;
}

.wheel__note {
  color: var(--note);
  font-size: 12px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ---------------------------------------------------------------- the wheel */
.wheel__art {
  position: absolute;
  left: 0;
  top: 2px;
  width: 160px;
  height: 160px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- under the pointer */
@media (hover: hover) and (pointer: fine) {
  .wheel[data-hover] .wheel__btn:not([aria-disabled='true']) .wheel__fill {
    inset: -2px -6px -2px -2px;
  }

  .wheel[data-hover] .wheel__btn:not([aria-disabled='true']) .wheel__word {
    font-stretch: 114%;
    font-weight: 700;
  }
}

html[data-using='keys'] .wheel__btn:focus-visible .wheel__word {
  font-stretch: 114%;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .wheel__fill,
  .wheel__word {
    transition: none;
  }

  .wheel[data-hover] .wheel__btn .wheel__word,
  html[data-using='keys'] .wheel__btn:focus-visible .wheel__word {
    font-stretch: 100%;
    font-weight: 640;
  }
}