/* The vending machine button: a lacquered red pill on a black page, with a small lit window in its round right end.
   What is behind the glass (the spiral, the bars, the shelf, the light and the reflections on the glass) is drawn by
   script.js on a canvas, with the colours from here; the pill, the words and the states are CSS. */
:root {
  --page: #000000;          /* the page */
  --pill: #c7301f;          /* the pill's lacquer, at its top */
  --pill-deep: #8e1a10;     /* the lacquer, at its foot */
  --ink: #fff4e6;           /* the words */
  --muted: #f3b8a6;         /* the quieter words: while it vends, and the change */
  --frame: #2a0b07;         /* the frame round the window */
  --inside: #15161b;        /* the inside of the machine, behind the row */
  --light: #e9f3ff;         /* the strip of light at the top of the window */
  --steel: #d9dee4;         /* the spiral */
  --shelf: #4a4f58;         /* the shelf */
  --wrap: #2f2a7a;          /* the wrapper of the bars */
  --band: #f2e3c4;          /* the band across the wrapper */
  --stripe: #f0a52a;        /* the thin stripe on the wrapper */
  --wrap-left: #146f62;     /* the wrappers in the row on the left */
  --wrap-right: #c47a1c;    /* the wrappers in the row on the right */
  --foil: #c9ccd2;          /* the crimped foil at the ends */
  --focus: #ffffff;         /* 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: '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: 72px 16px;
}

.vend {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the pill */
.vend__btn {
  position: relative;
  display: block;
  width: 300px;
  max-width: calc(100vw - 32px);
  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;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

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

/* the fill is a layer of its own, so it can swell past the pill with a bounce without moving anything */
.vend__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    radial-gradient(80% 120% at 22% 0%, rgba(255, 220, 200, 0.16), transparent 60%),
    linear-gradient(180deg, var(--pill), var(--pill-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 220, 0.35),
    inset 0 -2px 3px rgba(60, 6, 2, 0.5),
    0 0 0 1px rgba(255, 120, 90, 0.08),
    0 18px 34px -16px rgba(199, 48, 31, 0.45);
  transition:
    inset 0.6s cubic-bezier(0.34, 1.9, 0.45, 1),
    box-shadow 0.4s ease;
}

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

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

/* ---------------------------------------------------------------- the window */
/* the glass in the round end of the pill: rounder on the right, where it follows the pill */
.vend__window {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 86px;
  height: 48px;
  border-radius: 12px 24px 24px 12px;
  overflow: hidden;
  background: var(--inside);
  box-shadow:
    0 0 0 1.5px var(--frame),
    0 1px 0 1.5px rgba(255, 220, 200, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.vend__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the words */
/* three faces on top of each other, left of the window: at rest, while it vends, and with the bar in the tray */
.vend__faces {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26px;
  right: 104px;
  pointer-events: none;
}

.vend__face {
  position: absolute;
  inset: 0 auto 0 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: left;
  white-space: nowrap;
}

.vend__face--busy,
.vend__face--done {
  opacity: 0;
  visibility: hidden;
}

/* the words at rest widen on the typeface's width axis under the pointer; the wide copy, invisible and zero high,
   holds their room */
.vend__word {
  display: inline-grid;
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.008em;
  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);
}

.vend__word::before {
  content: attr(data-wide);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 118%;
  font-weight: 700;
}

/* while it vends: the words in a quieter tone, with a sheen running through them */
.vend__shine {
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 580;
  letter-spacing: -0.004em;
  line-height: 1;
  background: linear-gradient(100deg, var(--muted) 0%, var(--muted) 38%, var(--ink) 50%, var(--muted) 62%, var(--muted) 100%);
  background-size: 260% 100%;
  background-position: var(--sheen, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* with the bar in the tray: Enjoy, and the change in a quieter tone, on one baseline */
.vend__line {
  padding-bottom: 1px;
  line-height: 1;
}

.vend__line > span {
  display: inline-block;
}

.vend__sep {
  margin: 0 1px;
}

.vend__enjoy {
  font-size: 17px;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1;
}

.vend__sep,
.vend__change {
  font-size: 14.5px;
  font-weight: 560;
  line-height: 1;
  color: var(--muted);
}

/* ---------------------------------------------------------------- under the pointer */
@media (hover: hover) and (pointer: fine) {
  .vend__btn:not([aria-disabled='true']):hover .vend__fill {
    inset: -2px -7px;
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 220, 0.42),
      inset 0 -2px 3px rgba(60, 6, 2, 0.5),
      0 0 0 1px rgba(255, 120, 90, 0.12),
      0 20px 40px -14px rgba(199, 48, 31, 0.6);
  }

  .vend__btn:not([aria-disabled='true']):hover .vend__word {
    font-stretch: 118%;
    font-weight: 700;
  }
}

/* the keys bring the focus: the words widen as under the pointer */
html[data-using='keys'] .vend__btn:focus-visible .vend__word {
  font-stretch: 118%;
  font-weight: 700;
}

/* ---------------------------------------------------------------- reduced motion: no swelling, no widening */
@media (prefers-reduced-motion: reduce) {
  .vend__fill,
  .vend__word {
    transition: box-shadow 0.3s ease, filter 0.3s ease;
  }

  html[data-using='keys'] .vend__btn:focus-visible .vend__word {
    font-stretch: 100%;
    font-weight: 640;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .vend__btn:not([aria-disabled='true']):hover .vend__fill {
    inset: 0;
    filter: brightness(1.15);
  }

  .vend__btn:not([aria-disabled='true']):hover .vend__word {
    font-stretch: 100%;
    font-weight: 640;
  }
}