/* 00 · numbers (sections/numbers.js). The name in numbers. The receipt keeps rolling: the ladder prints on the left as the scroll
   passes each row; on the stage the figure grows a zero at a time and one of us walks in per zero, the One arriving at the front
   at fifteen. */

/* ------------------------------------------------------------ the receipt: the ladder, one to a quadrillion */
.part--numbers .part__copy { min-height: 260svh; }
.part--numbers .ladder { margin-top: clamp(2.2rem, 6svh, 4rem); }
.part--numbers .ladder li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; align-content: center; gap: 1rem;
  min-height: 9.5svh; padding: 0.7rem 0; border-top: 1px solid var(--gray-line);
  opacity: 0.18; transition: opacity 0.35s;
}
.part--numbers .ladder li.is-printed { opacity: 1; }
.part--numbers .ladder li.is-now b { background: linear-gradient(var(--canton), var(--canton)) 0 72% / 100% 46% no-repeat; }
.part--numbers .ladder li span { font: 600 var(--label)/1.2 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; color: var(--gray-text); }
.part--numbers .ladder li b { font-size: clamp(1.05rem, 1.5vw, 1.6rem); justify-self: end; padding: 0 0.15em; white-space: nowrap; }
.part--numbers .ladder__end { margin-top: clamp(2rem, 5svh, 3.5rem); }
/* lights off: the marker becomes a full box, ink on Canton */
html[data-lights="off"] .part--numbers .ladder li.is-now b { background-size: 100% 100%; color: var(--anthracite); }

/* ------------------------------------------------------------ the stage: the figure, then the line of us */
.stage--numbers .numbers {
  container-type: inline-size;
  display: grid; grid-template-rows: 1.1fr auto 0.9fr auto; align-items: end;
}
.numbers__count { grid-row: 2; min-width: 0; }
.numbers__figure { margin: 0; font-size: min(9.9cqi, 6.6rem); line-height: 1; white-space: nowrap; }
.numbers__figure span { display: inline-block; }
.numbers__g { white-space: nowrap; }
.numbers__figure .is-new { animation: numbers-join 0.45s var(--settle) both; }
@keyframes numbers-join { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
.numbers__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; min-height: 2.6rem; }
.numbers__name { color: var(--gray-text); }
.numbers__stamp { --tilt: -5deg; font-size: clamp(1.1rem, 1.9cqi, 1.5rem); opacity: 0; mix-blend-mode: multiply; }
.numbers__stamp.is-pressed { opacity: 1; }
html[data-lights="off"] .numbers__stamp { mix-blend-mode: normal; }

/* the line: sixteen even slots across the whole stage, the One at the front, everyone the same height on one floor */
.numbers__line {
  --slot: calc(100cqi / 16);
  --h: min(calc(var(--slot) * 2.05), 9rem);
  grid-row: 4; position: relative;
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end;
  height: calc(var(--h) * 1.3); margin-bottom: 9%; padding-right: 5%;
}
/* a place is kept at the front until the One arrives */
.numbers__line::before { content: ""; position: absolute; left: calc(var(--slot) / 2); bottom: -0.6rem; translate: -50% 0; width: 1.15rem; height: 0.72rem; background: var(--canton); transition: opacity 0.3s; }
.numbers.is-complete .numbers__line::before { opacity: 0; }
.numbers__who {
  position: relative; justify-self: center; z-index: var(--z, 1);
  height: calc(var(--h) * var(--fit, 1)); width: calc(var(--h) * var(--fit, 1) * var(--ar, 0.5));
  visibility: hidden;
}
.numbers__who.is-in { visibility: visible; animation: numbers-walkin 0.5s var(--settle) both; animation-delay: var(--delay, 0s); }
.numbers__who--one.is-in { animation-name: numbers-arrive; }
@keyframes numbers-walkin { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes numbers-arrive { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.numbers__who > img:first-child { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.numbers__who > .numbers__hat { position: absolute; left: var(--hx); top: var(--hy); width: var(--hw); height: auto; translate: -50% -58%; rotate: var(--hr, -4deg); z-index: 2; }
/* the drawings get the page's paper backing with the lights off; a hat sits on top of it, like the page's own hat */
html[data-lights="off"] .numbers__line .numbers__who img.numbers__hat[src] { background: none; padding: 0; }

/* ------------------------------------------------------------ phones: the stage under the copy; the figure on two lines, the line in two rows of eight */
@media (max-width: 880px) {
  .part--numbers .part__copy { min-height: 0; }
  .part--numbers .ladder { margin-top: 2rem; }
  .part--numbers .ladder li { min-height: 0; padding: 0.8rem 0; }
  .part--numbers .ladder li b { font-size: clamp(1.05rem, 4.2vw, 1.4rem); }
  .stage--numbers .numbers { display: block; padding: 0 1.25rem; }
  .numbers__figure { font-size: min(14cqi, 3.8rem); white-space: normal; line-height: 1.04; min-height: 2.08em; }
  .numbers__row { margin-top: 1rem; }
  .numbers__line {
    --slot: calc(100cqi / 8);
    --h: min(calc(var(--slot) * 2.05), 6.5rem);
    grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, calc(var(--h) * 1.3));
    height: auto; margin-top: 1.6rem; border-bottom: 0;
    background:
      linear-gradient(var(--ink), var(--ink)) 0 calc(50% - 1px) / 100% 2px no-repeat,
      linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 2px no-repeat;
  }
  .numbers__line::before { bottom: auto; top: calc(50% - 1px - 0.35rem - 0.72rem); }
}

@media (prefers-reduced-motion: reduce) {
  .numbers__who.is-in, .numbers__figure .is-new { animation: none; }
}