/* The pizza button: a pill of soft dough on a black page. The dough, the sauce, the mozzarella, the basil, the oven
   and the fire are drawn by script.js on a canvas (their colours come from here); the button and its words are
   HTML on top. */
:root {
  --page: #000000;          /* the page */
  --dough: #f6e7cb;         /* the dough, where the light falls */
  --dough-deep: #dcbf92;    /* the dough, at its foot */
  --crust: #eab066;         /* the baked crust, where the light falls */
  --crust-deep: #b66a2b;    /* the baked crust, at its foot */
  --char: #2b1208;          /* the charred spots on the crust */
  --sauce: #d02a1b;         /* the tomato */
  --sauce-deep: #8c140c;    /* the tomato, in its swirls */
  --mozzarella: #fffdf7;    /* the mozzarella */
  --mozzarella-edge: #eadcc0;   /* the mozzarella, at its torn edge */
  --basil: #4aa83c;         /* the basil leaves */
  --basil-deep: #1c5a1c;    /* the basil, in its shadow */
  --brick: #b9532f;         /* the bricks of the oven */
  --brick-light: #d8764a;   /* the bricks, where the light falls */
  --brick-dark: #7f321d;    /* the bricks, in their shadow */
  --mortar: #231009;        /* the mortar between them */
  --hearth: #6d625b;        /* the stone floor of the oven */
  --oven: #4a1a09;          /* the inside of the oven, lit by the fire */
  --flame: #ff9a2e;         /* the fire */
  --flame-hot: #fff0b5;     /* the fire, at its hottest */
  --flame-deep: #d2330e;    /* the fire, at its tips */
  --ink: #4a1d0c;           /* the words on the dough */
  --ink-done: #3a1406;      /* the words on the baked crust */
  --focus: #f6e7cb;         /* 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(--dough);
  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;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* room above the pill for the oven's arch and for the toppings falling in */
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 150px 16px 60px;
}

.pizza {
  position: relative;
  /* the script sets the width from the words; this is the width before it does */
  width: 232px;
  height: 60px;
}

/* the canvas: the pill, the oven round it, and the air above where the toppings fall */
.pizza__art {
  position: absolute;
  left: -56px;
  top: -150px;
  width: calc(100% + 112px);
  height: 250px;
  pointer-events: none;
}

.pizza__btn {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

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

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

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

/* ---------------------------------------------------------------- the words */
.pizza__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  pointer-events: none;
}

.pizza__face--done {
  color: var(--ink-done);
  opacity: 0;
  visibility: hidden;
}

/* the words widen on the typeface's width axis under the pointer, like the dough leaning out */
.pizza__word {
  display: inline-block;
  padding-bottom: 1px;
  font-size: 17px;
  font-weight: 650;
  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);
}

.pizza__tick {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .pizza__btn:not([aria-disabled='true']):hover [data-face='rest'] .pizza__word {
    font-stretch: 116%;
    font-weight: 700;
  }
}

html[data-using='keys'] .pizza__btn:focus-visible [data-face='rest'] .pizza__word {
  font-stretch: 116%;
  font-weight: 700;
}

/* ---------------------------------------------------------------- reduced motion: no widening */
@media (prefers-reduced-motion: reduce) {
  .pizza__word {
    transition: none;
  }

  .pizza__btn:not([aria-disabled='true']):hover [data-face='rest'] .pizza__word,
  html[data-using='keys'] .pizza__btn:focus-visible [data-face='rest'] .pizza__word {
    font-stretch: 100%;
    font-weight: 650;
  }
}