/* The waterfall (BGA 54 and 57): things fall down a pinned scene past a line of checks, and each check strikes in order
   and keeps what it found. The styles for /brand/motion/waterfall.js, loaded only by pages that use it, after
   /brand/tokens.css and /brand/base.css. One full, deliberate scene per page at most (BGA 57).
   Still first, for scripts off and reduced motion: the headline, what fell (finished), every check with its result,
   and the payoff. In motion the stage pins for --wf-len screens: the headline at the top, the zone where things fall
   past the checks, the readout at the foot. The checks' names stay in a column of their own (--wf-col) and what falls
   takes the rest of the width, so nothing that moves ever passes over words. */
.wf { position: relative; --wf-col: clamp(84px, 27vw, 128px); }
.wf-stage { position: relative; padding: 56px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.wf-head, .wf-zone, .wf-out { position: relative; z-index: 2; max-width: 1176px; margin-inline: auto; }
.wf-head h2 { margin-top: 10px; font-size: clamp(30px, 8.6vw, 54px); line-height: 1.06; max-width: 15ch; }
[data-time="night"] .wf-head h2 { color: var(--white); }
.wf-sample { display: inline-block; margin-top: 14px; padding: 7px 11px 8px; border: 1px solid currentColor; font: 500 12.5px/1.45 var(--mono); }
.wf-zone { display: grid; gap: 26px; margin-top: 28px; }
.wf-checks > li { position: relative; display: grid; gap: 3px; padding: 12px 0 14px 18px; border-top: 1px solid var(--rule); }
[data-time="day"] .wf-checks > li { border-top-color: rgba(35, 31, 26, 0.24); }
.wf-checks > li::before { content: ""; position: absolute; left: -5.5px; top: -6px; width: 11px; height: 11px; background: var(--x) center / 11px no-repeat; }
[data-time="day"] .wf-checks > li::before { background-image: var(--x-ink); }
.wf-k { font: 600 16px/1.3 var(--sans); }
[data-time="night"] .wf-k { color: var(--white); }
.wf-q { font-size: 15px; line-height: 1.45; color: var(--cream-2); }
[data-time="day"] .wf-q { color: var(--ink-2); }
.wf-r { font-size: 15px; line-height: 1.45; }
.wf-r > b { margin-right: 8px; font: 600 12px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--gold-bright); }
[data-time="day"] .wf-r > b { color: var(--gold-ink); }
.wf-out { margin-top: 30px; }
.wf-now, .wf-tag, .wf-fx, .wf-sky { display: none; }
.pay-big { font: 400 clamp(23px, 6.4vw, 36px)/1.12 var(--display); }
[data-time="night"] .pay-big { color: var(--white); }
.pay-big .n { font: 400 0.74em/1 var(--mono); letter-spacing: -0.02em; }
.pay-say { margin-top: 8px; font: 400 12.5px/1.55 var(--mono); color: var(--cream-2); }
[data-time="day"] .pay-say { color: var(--ink-2); }

.m .wf { height: calc(var(--wf-len, 7) * 100vh); height: calc(var(--wf-len, 7) * 100svh); }
.m .wf-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(72px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.m .wf-head, .m .wf-zone, .m .wf-out { width: 100%; }
.m .wf-head h2 { font-size: clamp(28px, 8.2vw, 46px); }
.m .wf-zone { display: block; margin-top: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 8px, #000 28px, #000 calc(100% - 22px), transparent calc(100% - 6px)); mask-image: linear-gradient(transparent 8px, #000 28px, #000 calc(100% - 22px), transparent calc(100% - 6px)); } /* the edges clear, so no sliced line shows at rest (2026-10-24) */
.m .wf-checks { position: relative; will-change: transform; }
.m .wf-checks > li { gap: 1px; padding: 9px calc(100% - var(--wf-col)) 10px 17px; transition: border-color 0.4s; }
.m .wf-checks > li::before { left: 0; }
.m .wf-checks > li.wf-on { border-top-color: rgba(244, 196, 90, 0.62); }
.m [data-time="day"] .wf-checks > li.wf-on { border-top-color: rgba(125, 90, 26, 0.7); }
.m .wf-k { font-size: 15px; line-height: 1.25; }
.m .wf-checks .wf-q, .m .wf-r > span { display: none; }
.m .wf-r > b { display: block; font-size: 11.5px; opacity: 0; transition: opacity 0.3s; }
.m .wf-on .wf-r > b { opacity: 1; }
.m .wf-fall { position: absolute; z-index: 2; top: 0; left: calc(var(--wf-col) + 12px); right: 0; }
.m .wf-fall > * { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.m .wf-fx, .m .wf-sky { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m .wf-sky { z-index: 0; }
.m .wf-fx { z-index: 3; }
.m .wf-out { display: grid; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.m [data-time="day"] .wf-out { border-top-color: rgba(35, 31, 26, 0.24); }
.m .wf-out > * { grid-area: 1 / 1; transition: opacity 0.45s; }
.m .wf-pay { opacity: 0; }
.m .wf-end .wf-pay { opacity: 1; }
.m .wf-end .wf-now, .m .wf-end .wf-during { opacity: 0; }
.m .wf-now { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 10px; }
.wf-ni { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.wf-nk { font: 600 16.5px/1.3 var(--sans); color: var(--white); }
.wf-nb { font: 600 12px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--gold-bright); }
.wf-nt { grid-column: 1 / -1; min-height: calc(3 * 1.45em); font-size: 16px; line-height: 1.45; color: var(--cream); }
.wf-tk { grid-column: 1 / -1; display: flex; gap: 4px; }
.wf-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.24); transition: background-color 0.3s; }
.wf-tk i.on { background: var(--gold-bright); }
[data-time="day"] .wf-ni { color: var(--ink-2); }
[data-time="day"] .wf-nk, [data-time="day"] .wf-nt { color: var(--ink); }
[data-time="day"] .wf-nb { color: var(--gold-ink); }
[data-time="day"] .wf-tk i { background: rgba(35, 31, 26, 0.18); }
[data-time="day"] .wf-tk i.on { background: var(--gold-ink); }
.m .wf-now.wf-in { animation: wf-in 0.35s ease-out backwards; }
@keyframes wf-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.m .wf-tag { display: block; position: absolute; left: 0; top: 0; z-index: 4; padding: 5px 9px 6px; font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.02em; white-space: nowrap; color: var(--gold-bright); background: var(--canvas); border: 1px solid rgba(244, 196, 90, 0.7); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.m [data-time="day"] .wf-tag { color: var(--gold-ink); background: var(--paper-hi); border-color: var(--gold-ink); }
.m .wf-end .wf-tag { opacity: 1; }
@media (min-width: 900px) {
  .wf { --wf-col: 168px; }
  .wf-stage { padding: 96px var(--read-x) 96px; }
  .wf-zone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 48px; }
  .wf-checks > li { padding: 14px 0 16px 20px; }
  .m .wf-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(40px, 5vw, 88px); padding-top: 104px; padding-bottom: 44px; }
  .m .wf-head { grid-column: 1; grid-row: 1; }
  .m .wf-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .m .wf-zone { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .m .wf-out { grid-column: 1; grid-row: 3; align-self: end; }
  .m .wf-checks > li { padding-top: 12px; padding-bottom: 14px; }
  .m .wf-k { font-size: 17px; }
  .m .wf-r > b { font-size: 12.5px; }
  .wf-ni { font-size: 12.5px; }
  .wf-nk { font-size: 20px; }
  .wf-nt { font-size: 21px; line-height: 1.4; min-height: calc(2 * 1.4em); }
  .pay-say { font-size: 13.5px; }
}