/* The unhinged layer, on top of site.css (the getponzi.com homepage, verbatim).
   Numbers too big for the page: they overlap their neighbours and run off the screen edge.
   `clip` (not `hidden`) so they leave the screen without the page ever scrolling sideways. */
main { overflow-x: clip; }

/* A light scroll fade, in the spirit of the homepage's load-in .reveal. */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js [data-reveal].in { opacity: 1; transform: none; }

/* A number wider than the screen drifts along its own length, back and forth (fx.js sets --dist). */
.fx-crawl { display: inline-block; will-change: transform; }
.fx-crawl.on { animation: fx-crawl var(--dur, 40s) linear infinite alternate; }
@keyframes fx-crawl { to { transform: translateX(var(--dist, 0px)); } }

/* § 03 — what Charles promised you, at a size the page cannot hold. app.js sets --cols (characters
   per line) and --fs so a line is ~104vw wide: every digit shows until the last one, which the right
   edge cuts. Long numbers (since 1920: ~200 characters) wrap into a block. Tilted, over the
   certificate's foot and the numbers below; clicks go through. */
.fx-huge { position: relative; z-index: 6; pointer-events: none; margin: -1vw 0 -2.4vw -2vw; transform: rotate(-1.8deg); transform-origin: 0 50%; }
.fx-huge-num.fz-bignum { display: block; font-size: var(--fs, 17vw); line-height: .92; width: calc(var(--cols, 9) * 0.6em + 0.05em); white-space: normal; word-break: break-all; overflow-wrap: anywhere; mix-blend-mode: multiply; }

/* § 05 — the 155-digit debt, one line, red, flickering, crawling past. */
.fx-owed { position: relative; z-index: 5; margin: 0 0 -0.2em; }
.fx-owed-num.fz-num { font-size: clamp(76px, 13vw, 210px); white-space: nowrap; line-height: .95; padding-left: 7vw; transform: rotate(1.8deg); transform-origin: 0 50%; }
.fx-owed-cap { position: relative; z-index: 6; max-width: var(--maxw); margin: 6px auto 0; padding: 0 24px; text-align: left;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.fx-owed-cap strong { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .fx-owed-cap { padding: 0 16px; font-size: 10px; } }

/* § 01 step 03 — "top 50" in bold; fx.js draws the red marker arrow that comes in from off-screen. */
.fx-top50 { font-weight: 700; }
@media (max-width: 768px) { .fx-has-arrow { margin-bottom: 78px; } } /* the band the phone arrow lives in */
.lev-canvas { position: relative; }
.fx-rich { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 8; color: var(--fed); }
.fx-rich .stroke { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fx-rich .ghost { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .55; stroke-linecap: round; }
.fx-rich text { fill: currentColor; font-family: var(--font-display); font-style: italic; paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .fx-rich.draw .stroke, .fx-rich.draw .ghost { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: fx-ink 1.1s cubic-bezier(.5,0,.2,1) forwards; }
  .fx-rich.draw text { opacity: 0; animation: fx-fade .5s .8s forwards; }
}
@keyframes fx-ink { to { stroke-dashoffset: 0; } }
@keyframes fx-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .fx-rich.draw-wait { visibility: hidden; } }