/* The egg timer: an egg cut in half on a black page, the time under it, the three ways to have it and the two
   buttons. The colours of the egg are read by the script, which paints it. */
:root {
  --page: #000000;          /* the page */
  --ink: #f4eee2;           /* the time, the words, the chosen way */
  --muted: #a0988a;         /* the state under the time, the times of the three ways */
  --line: #2c2924;          /* the rings round the choice and the start over button */
  --on-ink: #1c170f;        /* the words on the chosen way */
  --on-ink-muted: #6b6252;  /* its time */
  --button: #ffa62b;        /* the main button */
  --on-button: #2a1600;     /* the words on it */
  --white-raw: #c3ccb6;     /* the raw white, see-through */
  --white-milky: #e2e4da;   /* the white as it starts to set */
  --white-set: #fbf8f0;     /* the white set firm */
  --yolk-raw: #ffa21d;      /* the runny yolk */
  --yolk-jammy: #ee7d12;    /* the yolk thick as jam */
  --yolk-fudgy: #f6a637;    /* the yolk just set */
  --yolk-set: #f8cf63;      /* the yolk set firm */
  --shell: #d4ae86;         /* the cut edge of a brown shell */
  --membrane: #efe6d6;      /* the skin under the shell */
}

* {
  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: 'Rubik Variable', system-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;
}

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

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

/* ---------------------------------------------------------------- the egg */
.egg__pan {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 248;
}

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

/* ---------------------------------------------------------------- the time */
.egg__readout {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 4px;
}

.egg__time {
  display: block;
}

.egg__digits {
  display: flex;
  font-size: 64px;
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

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

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

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

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

.egg__state {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 420;
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
}

.egg__word {
  color: var(--ink);
  font-weight: 540;
}

.egg__word,
.egg__detail {
  display: block;
}

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

.egg__detail:empty {
  display: none;
}

/* ---------------------------------------------------------------- the three ways */
.kinds {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  margin: 24px 0 0;
  padding: 4px;
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

/* the chosen way: a pill that slides, with a dark copy of the words inside it that slides the other way, so the
   words change colour exactly at its edge */
.kinds__pill {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--count, 3));
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink);
  pointer-events: none;
}

.kinds__copy {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
  width: calc(var(--count, 3) * 100%);
  height: 100%;
  color: var(--on-ink);
}

.kinds__copy > span {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
}

.kinds__copy .kind__time {
  color: var(--on-ink-muted);
}

.kind {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  height: 52px;
  border-radius: 16px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease, opacity 0.3s ease;
}

.kind input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}

.kind__name {
  font-size: 15px;
  font-weight: 560;
  line-height: 19px;
}

.kind__time {
  font-size: 13px;
  font-weight: 450;
  line-height: 17px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}

.kind:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* while the egg is in the water the way is fixed */
.kinds:disabled .kind {
  cursor: default;
}

.kinds:disabled .kind:not(.is-on) {
  opacity: 0.4;
}


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

.egg__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;
}

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

.egg__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) */
.egg__turn {
  display: grid;
  place-items: center;
  transition: rotate 0.5s cubic-bezier(0.3, 1.7, 0.5, 1);
}

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

.egg__go {
  position: relative;
  width: 168px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  /* the same orange as a runny yolk, with the light on it */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%),
    var(--button);
  box-shadow: inset 0 -2px 0 rgba(120, 50, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--on-button);
  font: inherit;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform 0.16s ease-out, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.egg__go:active {
  transform: scale(0.97);
}

.egg__go::before {
  content: '';
  position: absolute;
  inset: -40% 30% -40% -30%;
  background: radial-gradient(50% 50% at 50% 40%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

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

.egg__balance {
  width: 48px;
}

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

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

  .egg__go:hover {
    filter: brightness(1.06) saturate(1.05);
  }

  .kinds:not(:disabled) .kind:not(.is-on):hover {
    background: rgba(244, 238, 226, 0.07);
  }

  .kinds:not(:disabled) .kind:not(.is-on):hover .kind__time {
    color: var(--ink);
  }

  /* the light slides across the yolk-coloured button */
  .egg__go:hover::before {
    transform: translateX(62%);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .egg__turn,
  .egg__go,
  .egg__reset {
    transition: opacity 0.3s ease;
  }

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

  .egg__go::before {
    transition: none;
  }
}