/* The cocktail card: the recipe of a tequila sunset on a black page. The card is a warm near-black; in its picture a
   bar lit from behind, a highball with ice and a steel shaker. The drink's colours come from its ingredients. */
:root {
  --page: #000000;          /* the page */
  --card: #15110f;          /* the card */
  --ink: #f6ede3;           /* the words */
  --muted: #a3978b;
  --line: rgba(246, 237, 227, 0.12);
  --wall: #241815;          /* the wall behind the bar */
  --backlight: #f29a4a;     /* the light behind the bottles */
  --bar: #120d0b;           /* the bar top */
  --steel: #cfc8bf;         /* the shaker and the jigger */
  --tequila: #f3e2a2;       /* the ingredients: the drink is mixed from these */
  --blood: #f2662d;
  --lime: #c8db6c;
  --grenadine: #b0123a;
  --foam: #fbe2c4;          /* the froth the shaking leaves on top */
  --rind: #e2551f;          /* the blood orange wheel on the rim */
  --button: #f2662d;        /* Back to the glass */
}

* {
  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: the script turns it over */
.drink {
  position: relative;
  width: min(340px, 100%);
  perspective: 1400px;
}

.drink__turn {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  will-change: transform;
}

.face {
  grid-area: 1 / 1;
  border-radius: 26px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px rgba(246, 237, 227, 0.08),
    inset 0 1px 0 rgba(246, 237, 227, 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face--front {
  padding: 8px;
}

.face--back {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 22px;
  transform: rotateY(180deg);
}

/* the picture: a canvas the script draws, inside a button that mixes the drink */
.shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 324 / 300;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 19px;
  background: var(--wall);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(246, 237, 227, 0.07);
  pointer-events: none;
}

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

.shot:focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--ink);
}

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

.face__body {
  padding: 16px 14px 6px;
}

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

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

.drink__name,
.back__name {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

.drink__abv {
  margin: 0;
  flex: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the ingredients: each line fills in its colour
   as it goes into the glass */
.pour {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.pour__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0 7px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.4s ease;
}

.pour__row.is-in {
  color: var(--ink);
}

.pour__ml {
  font-variant-numeric: tabular-nums;
}

.pour__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}

.pour__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: left center;
}

.drink__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.drink__time {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
}

/* ---------------------------------------------------------------- the back: the method */
.back__name {
  margin-bottom: 18px;
}

.steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
}

.step__icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--blood);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step__verb {
  margin: 1px 0 2px;
  font-size: 15.5px;
  font-weight: 640;
}

.step__text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

/* three facts in a row, over the button */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

.facts dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 620;
}

.face--back .pill {
  align-self: stretch;
}

/* ---------------------------------------------------------------- the buttons: elastic pills */
.pill {
  --bg: var(--button);
  --fg: #1a0e08;
  --edge: 0 0 0 0 transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: 620 15px/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;
}

/* the pill itself is a layer of its own: it swells past its edges and springs back, so nothing round it moves */
.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bg);
  box-shadow: var(--edge);
  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--line {
  --bg: transparent;
  --fg: var(--ink);
  --edge: inset 0 0 0 1.5px var(--line);
  height: 42px;
  padding: 0 16px 0 13px;
  gap: 7px;
  font-size: 14.5px;
}

.pill--full {
  margin-top: 22px;
}

.pill__icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  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.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (hover: hover) and (pointer: fine) {
  .pill--line:hover {
    --edge: inset 0 0 0 1.5px rgba(246, 237, 227, 0.32);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pill:hover::before {
    inset: -2px -5px;
  }

  .pill:hover .pill__label {
    font-stretch: 112%;
  }

  .pill--line:hover .pill__icon {
    transform: rotate(180deg);
  }

  .pill--full:hover .pill__icon {
    transform: translateX(-2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pill:active::before {
    transform: scale(1.03, 0.9);
  }
}

.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;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

  .face--back {
    padding: 22px 18px 18px;
  }

  .steps {
    gap: 12px;
  }

  .step__text {
    font-size: 13.5px;
  }
}

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

  .pill__icon,
  .pill__label,
  .pour__row {
    transition: none;
  }
}