/* The ripening tomato timer: a tomato on its vine on a white page, the time under it and the buttons. The colours of
   the tomato, the vine and the flower are read by the script, which paints them. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1f1a16;           /* the time and the words */
  --muted: #8b8279;         /* the second word under the time */
  --line: #e7e1da;          /* the ring round the small buttons */
  --button: #dd3420;        /* the main button, ripe tomato red */
  --button-deep: #a9180e;   /* its shaded side */
  --on-button: #fff7f1;     /* the words on it */
  --green: #5a9330;         /* the tomato, mature green */
  --pale: #a3c266;          /* the green paling, just before it turns */
  --breaker: #e2bd7a;       /* breaker: the first blush at the blossom end */
  --turning: #f2a446;       /* turning */
  --pink: #f4823a;          /* pink */
  --light-red: #ef4b2c;     /* light red */
  --red: #e2301f;           /* red, ripe */
  --deep-red: #d0231a;      /* the deepest red, fully ripe */
  --leaf: #3f7b2a;          /* the leaves and the sepals */
  --leaf-light: #6fa543;    /* the side of the leaves that takes the light */
  --stem: #5b8b32;          /* the vine */
  --petal: #f6c81c;         /* the flower that comes for the next round */
}

* {
  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: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

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

/* the timer sits in the middle of the page; in a real app it would be the main thing on its screen, so it stays
   there: give .stage the size of that screen */
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.pomo {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(360px, 100%);
}

/* ---------------------------------------------------------------- the vine */
.pomo__vine {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 284;
  touch-action: pan-y;
}

.pomo__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the time */
.pomo__readout {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 2px;
}

.pomo__time {
  display: block;
}

/* the figures soften and fill out as the tomato ripens: the script moves SOFT and wght */
.pomo__digits {
  display: flex;
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 72;
}

/* every figure in its own place, so the time never shifts sideways */
.fig {
  position: relative;
  display: block;
  width: 0.62em;
  height: 1.06em;
  overflow: hidden;
}

.fig--colon {
  width: 0.3em;
}

.fig > span {
  position: absolute;
  inset: 0;
  padding-top: 0.03em;
  text-align: center;
}

.fig--colon > span {
  top: -0.04em;
}

.pomo__state {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 22px;
  margin: 0;
  font-size: 16px;
  font-weight: 420;
  line-height: 22px;
  font-variation-settings: 'opsz' 16;
  color: var(--muted);
  white-space: nowrap;
}

.pomo__word {
  color: var(--ink);
  font-weight: 600;
}

.pomo__word,
.pomo__detail {
  display: block;
}

.pomo__detail::before {
  content: '\00B7';
  margin-right: 8px;
  color: var(--muted);
}

.pomo__detail:empty {
  display: none;
}

/* ---------------------------------------------------------------- the buttons */
.pomo__controls {
  display: grid;
  grid-template-columns: 48px auto 48px;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.pomo__reset {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer;
  transition: box-shadow 0.25s ease, opacity 0.3s ease, transform 0.16s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.pomo__reset[aria-disabled='true'] {
  opacity: 0.32;
  cursor: default;
}

.pomo__reset:not([aria-disabled='true']):active {
  transform: scale(0.94);
}

/* the arrow turns back a little under the mouse (the wrapper, for the CSS) and a whole turn when pressed (the
   drawing, for GSAP) */
.pomo__turn {
  display: grid;
  place-items: center;
  transition: rotate 0.5s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.pomo__reset svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the main button is ripe tomato skin: a deep red with a window of light on it that slides under the mouse */
.pomo__go {
  position: relative;
  width: 168px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 140, 110, 0.45), rgba(255, 140, 110, 0) 55%),
    linear-gradient(180deg, var(--button) 0%, var(--button) 45%, var(--button-deep) 100%);
  box-shadow:
    inset 0 -3px 6px rgba(90, 8, 4, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px -12px rgba(170, 30, 15, 0.7);
  color: var(--on-button);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: 'opsz' 18, 'SOFT' 60;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.2s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.pomo__go:active {
  transform: scale(0.96);
}

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

/* the light on the skin: a soft streak across the top that slides along under the mouse */
.pomo__shine {
  position: absolute;
  top: 5px;
  left: 18px;
  width: 64px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  opacity: 0.8;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}

.pomo__go-words {
  position: relative;
  display: block;
}

/* the tomatoes picked today */
.pomo__picked {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

.pomo__mini {
  width: 34px;
  height: 34px;
  opacity: 0.28;
  filter: saturate(0.2);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.pomo__picked.is-some .pomo__mini {
  opacity: 1;
  filter: none;
}

.pomo__count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--page);
  font-size: 12px;
  font-weight: 650;
  font-variation-settings: 'opsz' 12;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pomo__count:empty {
  display: none;
}

@media (hover: hover) {
  .pomo__reset:not([aria-disabled='true']):hover {
    box-shadow: inset 0 0 0 1.5px var(--muted);
  }

  .pomo__reset:not([aria-disabled='true']):hover .pomo__turn {
    rotate: -50deg;
  }

  .pomo__go:not([aria-disabled='true']):hover {
    filter: brightness(1.05) saturate(1.06);
  }

  .pomo__go:not([aria-disabled='true']):hover .pomo__shine {
    transform: translateX(66px) scaleX(1.2);
    opacity: 0.95;
  }
}

.pomo__reset:focus-visible,
.pomo__go:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pomo__turn,
  .pomo__go,
  .pomo__reset,
  .pomo__shine {
    transition: opacity 0.3s ease, filter 0.3s ease;
  }

  .pomo__go:active,
  .pomo__reset:not([aria-disabled='true']):active {
    transform: none;
  }

  .pomo__go:not([aria-disabled='true']):hover .pomo__shine {
    transform: none;
  }
}