/* 00 · falling (sections/falling.js). Too many zeros: the receipt continues on the left; on the right, a drawn in-tray on
   the stage. Zeros fall into it and can be thrown about. "Make room" files them into one quadrillion across the upper half. */

/* the copy is taller than the stage, so the stage stays on screen while the visitor plays */
.part--falling .part__copy { min-height: 130svh; }

.stage--falling .falling {
  --floor: 5%;                                        /* the floor line, up from the bottom of the stage */
  --num: min(calc(100cqw / 10.2), 5rem);              /* "1,000,000,000,000,000" is 9.9em wide; one row */
  --zs: 1.25rem;                                      /* the block of extra zeros, to the side */
  position: relative; container-type: size; overflow: clip;
  user-select: none; -webkit-user-select: none;
}

/* the floor line, the tray on it, the zeros behind its bars */
.falling__floor { position: absolute; z-index: 0; left: 1%; right: 1%; bottom: var(--floor); border-top: 1px solid var(--gray-line); }
.falling__tray { position: absolute; z-index: 2; left: 50%; bottom: var(--floor); width: min(84cqw, 86cqh); margin: 0; translate: -50% 7.5%; pointer-events: none; }
.falling__tray img { display: block; width: 100%; height: auto; max-height: none; -webkit-user-drag: none; }
.falling.is-inked .falling__tray img { visibility: hidden; }   /* with gravity, the drawing's ink is on the canvas, over the zeros */
/* lights off: the sheet of paper behind the drawing is drawn on the canvas, so the zeros in the tray sit on it */
html[data-lights="off"] .part--falling .falling__tray img[src] { background: none; padding: 0; mix-blend-mode: normal; }

/* the canvas takes no pointer: zeros are picked up from window listeners, so the page keeps scrolling on a phone */
.falling__zeros { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.falling__zeros--page { position: fixed; z-index: 36; inset: 0; width: 100vw; height: 100vh; }
.falling__zeros--page[hidden] { display: none; }
.stage--falling .falling { overflow: visible; }
.falling.is-still .falling__zeros { display: none; }
html.falling-over, html.falling-over * { cursor: grab !important; }
html.falling-holding, html.falling-holding * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* the shelf in the upper half: the number, the stamp, and a small block for whatever is left over */
.falling__shelf { position: absolute; z-index: 3; left: 0; right: 0; top: 2%; display: grid; row-gap: 0.9rem; pointer-events: none; }
.falling__line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 0.1em; font-size: var(--num); line-height: 1; letter-spacing: 0; }
.falling__g { display: inline-block; white-space: nowrap; }
.falling__aside { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-right: 2%; }
.falling__blk { display: grid; grid-template-columns: repeat(5, 0.98em); grid-auto-rows: 1.14em; font: 800 var(--zs)/1 var(--serif); }
.falling__blk:empty { display: none; }
.falling__blk span { display: block; text-align: center; line-height: 1.14em; }
.falling__stamp { --tilt: -5deg; margin: 0.2rem 0 0 0.35em; font-size: clamp(1.1rem, 1.7vw, 1.6rem); opacity: 0; mix-blend-mode: multiply; }
.falling__stamp.is-pressed { opacity: 1; }
html[data-lights="off"] .falling__stamp { mix-blend-mode: normal; }

/* with gravity: the DOM digits are only slots; the canvas zeros land exactly on them, then the 1 and the commas appear */
.falling.is-live .falling__d, .falling.is-live .falling__blk span { color: transparent; }
.falling.is-live .falling__one, .falling.is-live .falling__c { opacity: 0; transition: opacity 0.45s var(--settle); }
.falling.is-live.is-filed .falling__one, .falling.is-live.is-filed .falling__c { opacity: 1; }

/* narrow screens: the stage sits under the copy; the line breaks into two rows, "1,000,000," and "000,000,000" */
@media (max-width: 880px) {
  .part--falling .part__copy { min-height: 0; }
  .stage--falling .falling { height: 62svh; min-height: 62svh; --num: min(calc(100cqw / 5.7), 4rem); --zs: 1.05rem; --floor: 4%; }
  .falling__tray { width: min(94cqw, 66cqh); }
  .falling__shelf { top: 1.5%; row-gap: 0.7rem; }
  .falling__stamp { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .falling__stamp { opacity: 1; }
}