/* The steeping tea: the card of a green tea on a white page. The picture is a warm grey wall and a pale table with a
   glass cup of hot water on it; the tea is a yellow-green liquor, and the card's button takes the deep green of the
   leaves. */
:root {
  --page: #ffffff;          /* the page */
  --card: #ffffff;          /* the card */
  --ink: #1d241f;           /* the words */
  --muted: #68706a;
  --line: rgba(29, 36, 31, 0.12);
  --wall: #c8cfc5;          /* the wall behind the cup */
  --wall-light: #e7eae2;    /* the same wall where the window light falls */
  --table: #f2ede3;         /* the table the cup stands on */
  --table-far: #e4dccd;
  --glass: #22352b;         /* the colour of the glass's edges */
  --liquor: #c2b54a;        /* the tea at its full strength, seen against white */
  --silk: #f7f2e7;          /* the silk pyramid */
  --leaf: #5a7a2b;          /* the tea leaves inside it */
  --tag: #fbf8f0;           /* the paper tag */
  --button: #26432f;        /* Add to cart */
  --button-lit: #2f5239;    /* Add to cart under the pointer */
  --added: #ebeed1;         /* Add to cart once the tea is in the cart */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

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

/* ---------------------------------------------------------------- the card */
.tea {
  width: min(340px, 100%);
  padding: 8px;
  border-radius: 26px;
  background: var(--card);
  box-shadow:
    0 0 0 1px rgba(29, 36, 31, 0.07),
    0 2px 6px -2px rgba(29, 36, 31, 0.08),
    0 30px 50px -26px rgba(29, 36, 31, 0.32);
}

/* the picture: a canvas the script draws. A tap on it steeps the tea or lifts it */
.tea__shot {
  position: relative;
  aspect-ratio: 324 / 300;
  overflow: hidden;
  border-radius: 19px;
  background: var(--wall);
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.tea__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(29, 36, 31, 0.06);
  pointer-events: none;
}

.tea__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tea__body {
  padding: 16px 14px 14px;
}

.tea__kind {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.tea__head,
.tea__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.tea__name {
  margin: 0;
  font-family: 'Fraunces Variable', 'Georgia', serif;
  font-size: 29px;
  font-weight: 480;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'WONK' 0;
  line-height: 1.05;
  letter-spacing: -0.012em;
}

.tea__price {
  margin: 0;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.tea__meta {
  margin-top: 6px;
}

.tea__notes,
.tea__weight {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.tea__weight {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the brewing guide and Steep */
.brew {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.brew__guide {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.brew__label {
  margin-right: 4px;
  color: var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------- the buttons: elastic pills */
.buy {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.pill {
  --bg: var(--button);
  --fg: #ffffff;
  --edge: 0 0 0 0 transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: 600 15.5px/1 'Mona Sans Variable', system-ui, sans-serif;
  font-stretch: 100%;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.25s ease;
}

/* the pill itself is a layer of its own: it swells past its edges and springs back, so nothing round it moves */
.pill::before,
.pill__clip {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transition: inset 0.6s cubic-bezier(0.34, 1.9, 0.45, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}

.pill::before {
  z-index: -2;
  background: var(--bg);
  box-shadow: var(--edge);
}

/* Add to cart fills like a cup while it works: the fill is clipped to the pill */
.pill__clip {
  overflow: hidden;
}

.add__fill {
  position: absolute;
  inset: 0 -12px;
  background: rgba(206, 199, 112, 0.36);
  transform: translateY(130%);
}

.add__wave {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 200%;
  height: 7px;
  fill: rgba(206, 199, 112, 0.36);
}

.pill__icon {
  position: relative;
  flex: none;
  width: 19px;
  height: 19px;
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.pill__icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add__tick {
  stroke-width: 2.1;
  opacity: 0;
}

/* the word grows wider on the font's width axis: it has the room for its widest form already */
.pill__label {
  position: relative;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.pill--add {
  flex: 1 1 auto;
}

.pill--add.is-done {
  --bg: var(--added);
  --fg: var(--ink);
}

/* Steep: a smaller pill, outlined, wide enough for Steep and Lift at their widest */
.pill--steep,
.pill--undo {
  --bg: var(--card);
  --fg: var(--ink);
  --edge: inset 0 0 0 1.5px var(--line);
}

.pill--steep {
  flex: none;
  width: 104px;
  height: 42px;
  gap: 6px;
  padding: 0 14px 0 12px;
  font-size: 14.5px;
}

.pill--steep .pill__icon {
  width: 20px;
  height: 20px;
}

.steep-icon {
  stroke-width: 1.7;
}

.steep-icon__water {
  opacity: 0.55;
}

.steep-icon__bag {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

/* with the tea in the water the button says Lift: the arrow turns round and points up, with a spring */
.pill--steep.is-down .steep-icon__bag {
  transform: rotate(180deg);
}

.pill--undo {
  flex: none;
  padding: 0 18px;
}

.pill--undo[hidden] {
  display: none;
}

/* pointed at, the pill swells past its edges and springs back, and the word grows wider on its axis */
@media (hover: hover) and (pointer: fine) {
  .pill--add:not(.is-done):not([aria-disabled='true']):hover {
    --bg: var(--button-lit);
  }

  .pill--steep:hover,
  .pill--undo:hover {
    --edge: inset 0 0 0 1.5px rgba(29, 36, 31, 0.28);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pill:not([aria-disabled='true']):hover::before,
  .pill:not([aria-disabled='true']):hover .pill__clip {
    inset: -2px -5px;
  }

  .pill:not([aria-disabled='true']):hover .pill__label {
    font-stretch: 112%;
  }

  .pill--add:not([aria-disabled='true']):hover .pill__icon {
    transform: translateX(-1px) rotate(-10deg);
  }

  /* the little bag dips towards its water */
  .pill--steep:hover .steep-icon__bag {
    transform: translateY(1.6px);
  }

  .pill--steep.is-down:hover .steep-icon__bag {
    transform: rotate(180deg) translateY(1.6px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pill:not([aria-disabled='true']):active::before {
    transform: scale(1.03, 0.9);
  }
}

.pill[aria-disabled='true'] {
  cursor: default;
}

.pill:focus-visible {
  outline: none;
}

.pill:focus-visible::before {
  box-shadow: var(--edge), 0 0 0 2px var(--card), 0 0 0 4.5px var(--ink);
}

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

/* on the narrowest phones the words keep inside */
@media (max-width: 359px) {
  .tea__name {
    font-size: 24px;
  }

  .pill {
    gap: 6px;
    padding: 0 14px;
    font-size: 14.5px;
  }

  .pill--steep {
    width: 96px;
    padding: 0 12px 0 10px;
  }

  .pill--undo {
    padding: 0 14px;
  }
}

/* ---------------------------------------------------------------- less motion */
@media (prefers-reduced-motion: reduce) {
  .pill::before,
  .pill__clip {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .pill__icon,
  .pill__label,
  .steep-icon__bag {
    transition: none;
  }
}