/* PIPO — sweetener layer (ADDITIVE). Fills the routed views so short sections
   don't read as empty, without touching style.css / app.js / router.js / wall.js.
   Three degradation paths: JS on, JS off (nothing hidden), reduced-motion (inert).
   Motif = falling snow: the product is literally penguins huddling for warmth.
   Snow is drawn as toon snowballs (paper-white fill + ink border + inset
   highlight) so it reads on the warm-paper base and matches the site's sticker
   language — NOT a soft-glow particle field. Lime stays reserved for the art. */

/* ── reveal-on-mount ──────────────────────────────────────────────────────
   Only bites once fx.js adds html.fx-on, so JS-off / JS-error = full page. */
.fx-on .fx-rev{opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
.fx-on .fx-rev.in{opacity:1;transform:none}

/* stagger children of a container via nth-child delay — no per-element JS */
.fx-on .fx-stagger.in > *{animation:fxPop .46s cubic-bezier(.34,1.56,.64,1) both}
.fx-on .fx-stagger.in > *:nth-child(1){animation-delay:.04s}
.fx-on .fx-stagger.in > *:nth-child(2){animation-delay:.11s}
.fx-on .fx-stagger.in > *:nth-child(3){animation-delay:.18s}
.fx-on .fx-stagger.in > *:nth-child(4){animation-delay:.25s}
.fx-on .fx-stagger.in > *:nth-child(5){animation-delay:.32s}
.fx-on .fx-stagger.in > *:nth-child(6){animation-delay:.39s}
.fx-on .fx-stagger > *{opacity:0}
.fx-on .fx-stagger.in > *{opacity:1}
@keyframes fxPop{
  0%{opacity:0;transform:translateY(20px) scale(.97)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}

/* count-up chips shouldn't jitter width as digits change */
.stats .n{font-variant-numeric:tabular-nums}

/* ── ambient snow ─────────────────────────────────────────────────────────
   fixed, behind all content, click-through. Hidden by opaque dark sections
   (footer) naturally via z-index:-1. */
#fx-snow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Fill must differ from the paper base in HUE, not just brightness: the first
   pass used #fbf8f0 over #f4efe4 paper — 9 units of brightness apart — so only
   the border read and every flake looked like a hollow ring. A cool blue-white
   is measurably distinct against warm cream while still reading as snow. */
#fx-snow i{position:absolute;top:-70px;display:block;border-radius:50%;
  background:#e8f4ff;border:2.5px solid rgba(32,36,26,.62);
  box-shadow:inset 5px 5px 0 rgba(255,255,255,.85), 2px 2px 0 rgba(32,36,26,.22);
  opacity:0;animation:fxFall var(--dur) linear var(--del) infinite}
@keyframes fxFall{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  8%{opacity:.92}
  50%{transform:translate(calc(var(--drift) * .6),52vh) rotate(160deg)}
  92%{opacity:.92}
  100%{transform:translate(var(--drift),108vh) rotate(320deg);opacity:0}
}
/* Keep content above the snow. NOTE: this page has NO <main> element (measured:
   0) — the views are direct children of body and position:static, so raising
   `main` raised nothing and the snow painted over content. Raise what exists. */
nav.nav, body > [data-view], footer.foot, .ticker, .stats{position:relative;z-index:1}
body{position:relative}

@media(prefers-reduced-motion:reduce){
  .fx-on .fx-rev,.fx-on .fx-stagger > *{opacity:1!important;transform:none!important;
    transition:none!important;animation:none!important}
  #fx-snow{display:none}
}