/* ==========================================================================
   The Pecking Order: a scroll-driven story in five scenes.
   Loaded after base.css. Without scripts, or with reduced motion, the five
   still panels are shown; html.po-live swaps them for the pinned stage.

   Every moving part of the world reads its pose from a custom property. A
   still panel carries those properties as an inline style on the group the
   part sits in; on the live stage the script writes the same poses (straight
   onto the part where it can). The fallback after each var() is the rest pose.
   Transforms on SVG parts are in world units (1px = one unit of the viewBox).
   ========================================================================== */
.po{background:var(--sky-1)}
.po-head{position:relative; padding:calc(var(--bar-h) + clamp(48px,9svh,120px)) 0 clamp(36px,6svh,80px); overflow:hidden; --fs-h1:clamp(52px,min(8.4vw,15svh),180px)}
.po-head-in{position:relative; display:grid; gap:clamp(12px,2svh,24px); justify-items:start}
.po-head h1{max-width:none}
.po-head h1,.po-head-in > :not(.po-skip){animation:rise .85s var(--ease) both}
.po-lead{max-width:30em; font-size:clamp(18px,1.4vw,28px); color:var(--text-2)}
.po-skip{display:none}
html.po-live .po-skip{display:block}

/* ---------- the world: sky, far layers, ground ---------- */
.po-world{display:block; width:100%; height:100%}
.po-l--stars{opacity:var(--st,.5)}
.po-star{fill:#F1F4F0; opacity:.6}
.po-glow{opacity:var(--gw,1)}
.po-cloud-b{fill:#1B4435}
.po-cloud-h{fill:#255A47}
.po-cloud--far .po-cloud-b{fill:rgba(184,255,224,.06)}
.po-cloud--far .po-cloud-h{fill:rgba(184,255,224,.05)}
.po-cloud--near .po-cloud-b{fill:rgba(30,77,60,.55)}
.po-cloud--near .po-cloud-h{fill:rgba(46,110,88,.4)}
.po-cloud--floor .po-cloud-b{fill:#1F5744}
.po-cloud--floor .po-cloud-h{fill:#2A6B55}
.po-cloud--floor2 .po-cloud-b{fill:#256350}
.po-cloud--floor2 .po-cloud-h{fill:#30775F}
.po-cloud--fringe .po-cloud-b{fill:#2C7059}
.po-cloud--fringe .po-cloud-h{fill:#3A866C}
.po-streaks{opacity:var(--sk,0)}
.po-streak{fill:none; stroke:#CFF7E6; stroke-width:3; stroke-linecap:round; opacity:.45}
.po-pf{fill:#3A866C; opacity:var(--pfo,0); transform:translate(calc(var(--a) * var(--pfk,0) * 1px),calc(var(--b) * var(--pfk,0) * 1px)) scale(calc(.45 + var(--pfk,0) * .8))}
.po-ridge{fill:#0B1B15; stroke:#234238; stroke-width:2}
.po-lit{fill:none; stroke:#56705F; stroke-width:5}
.po-hill{fill:#07120E; stroke:#152A22; stroke-width:2}
.po-horizon{fill:none; stroke:#4A6A58; stroke-width:2}
.po-tuft{fill:none; stroke:#3A5A47; stroke-width:3; stroke-linecap:round}
.po-earth{fill:#070B09}
.po-edge{fill:none; stroke:#54735F; stroke-width:2}
.po-strata{fill:none; stroke:#0E1713; stroke-width:3}
.po-pebble{fill:#0E1713}
.po-pipe{fill:none; stroke:#1E3229; stroke-width:24; stroke-linejoin:round}
.po-pipe-hi{fill:none; stroke:#3A5A49; stroke-width:3}
.po-joint{fill:none; stroke:#2C4438; stroke-width:9}
.po-gush{fill:#4E7C6C; stroke:#9AD9C6; stroke-width:3; opacity:0}
.po-gush--0{transform:var(--gs0,none); opacity:var(--go0,0)}
.po-gush--1{transform:var(--gs1,none); opacity:var(--go1,0)}
.po-gush--2{transform:var(--gs2,none); opacity:var(--go2,0)}
.po-gush--3{transform:var(--gs3,none); opacity:var(--go3,0)}
.po-lump{fill:#2E4D40; stroke:#6FA08E; stroke-width:3; opacity:0}
.po-lump--0{transform:var(--sb0,none); opacity:var(--so0,0)}
.po-lump--1{transform:var(--sb1,none); opacity:var(--so1,0)}
.po-lump--2{transform:var(--sb2,none); opacity:var(--so2,0)}
.po-lump--3{transform:var(--sb3,none); opacity:var(--so3,0)}
.po-shadow,.po-sp-shadow{fill:#010202}
.po-shadow{opacity:calc(.6 * var(--sh,1))}
.po-sp-shadow{opacity:.55}
.po-fg{fill:#020403}

/* the cistern the sparrow flushes with */
.po-feed{fill:none; stroke:#4E5F56; stroke-width:12; stroke-linecap:round}
.po-feed-hi{fill:none; stroke:#74867C; stroke-width:3; stroke-linecap:round}
.po-tank{transform:var(--tk,none)}
.po-tank-l{transform:var(--tkl,none)}
.po-lever{transform:var(--lv,none)}
.po-gauge{transform:var(--ga,none)}
.po-tank-t{font:500 20px var(--f-mono); letter-spacing:.14em; fill:#17231D}
.po-link{fill:none; stroke:#C4CEC7; stroke-width:5; stroke-dasharray:3 8; stroke-linecap:round}
.po-handle{transform:var(--hn,translate(156px,226px))}

/* ---------- a toilet: the ground breaks, it punches up, fills, swirls, slams ---------- */
.po-hole{fill:#010202; stroke:#54735F; stroke-width:2.5; transform:translateY(92px) scale(var(--gp,0)) translateY(-92px)}
.po-crk{fill:none; stroke:#7FA08E; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:var(--crk,1)}
.po-slabs{fill:#3A5747; transform:translateY(96px) scale(var(--gp,0)) translateY(-96px)}
.po-slab-hi{fill:none; stroke:#8FB09E; stroke-width:2.5; stroke-linecap:round}
.po-wc{transform:var(--wc,translateY(400px)); opacity:var(--wo,0)}
.po-tl{transform:var(--tl,none)}
.po-lu{transform:var(--lu,none)}
.po-lc{transform:var(--lc,translateY(-114px) scaleY(0) translateY(114px)); opacity:var(--lco,0)}
.po-wt{transform:var(--wt,none)}
.po-deep{fill:#2E8C88; opacity:calc(var(--vo,0) * .55)}
.po-und{fill:#0E3B3A; opacity:var(--uo,0); transform:var(--un,none)}
.po-drain{fill:#2E4F49}
.po-vx{opacity:var(--vo,0)}
.po-vr1{transform:rotate(calc(var(--v1,0) * 1deg))}
.po-vr2{transform:rotate(calc(var(--v2,0) * 1deg))}
.po-vr3{transform:rotate(calc(var(--v3,0) * 1deg))}
.po-funnel{transform:scale(var(--fn,0))}
.po-jets{fill:none; stroke:#F6F8F5; stroke-width:6; stroke-linecap:round; stroke-dasharray:26; stroke-dashoffset:var(--jd,0); opacity:var(--jt,0)}
.po-bub{opacity:var(--bu,0)}
.po-bub circle{fill:rgba(246,248,245,.3); stroke:#F6F8F5; stroke-width:2; transform-box:fill-box; transform-origin:50% 50%}
.po-foam{transform:var(--fm,none); opacity:var(--fmo,0)}
.po-foam path{fill:none; stroke:#F6F8F5; stroke-width:3.5; stroke-linecap:round}
.po-foam path + path{opacity:.45}
.po-tg{transform:scale(calc(var(--cx,1) * var(--k)),calc(var(--cw,0) * var(--k)))}
.po-tg--f{transform:scale(calc(var(--cx,1) * var(--k)),calc(var(--cw2,0) * var(--k)))}
.po-ov{transform:scale(var(--k),calc(var(--ov,0) * var(--k)))}
.po-drop{fill:#D6EFEA; opacity:var(--so,0); transform:translate(calc(var(--su,0) * var(--a) * var(--sa,1) * 1px),calc((var(--su,0) * var(--b) * var(--sa,1) + var(--su2,0) * 620) * 1px))}
.po-db{fill:#6F8F7E; opacity:var(--dbo,0); transform:translate(calc(var(--x0) * 1px + var(--du,0) * var(--a) * 1px),calc(88px + (var(--du,0) * var(--b) + var(--du2,0) * 520) * 1px)) rotate(calc(var(--du,0) * var(--rr) * 1deg))}
.po-wet{fill:#8FC4BA; opacity:calc(var(--wet,0) * .3)}
.po-drp{fill:#8FC4BA; transform:var(--dd,none); opacity:var(--ddo,0)}
.po-drp-r{fill:none; stroke:#8FC4BA; stroke-width:3; transform:translate(46px,104px) scale(var(--dg,0)) translate(-46px,-104px); opacity:var(--dgo,0)}
.po-imp{fill:none; stroke:#F6F8F5; stroke-width:5; stroke-linecap:round; opacity:var(--im,0); transform:translateY(-66px) scale(var(--ims,1)) translateY(66px)}

/* ---------- the signs and what lands on them ---------- */
.po-t{font:500 16px var(--f-mono); letter-spacing:.06em; fill:#EEF2EE}
.po-name{font-size:11px; letter-spacing:.12em; fill:#9FB3A8}
.po-mid{font-size:14.5px; letter-spacing:.04em}
.po-big{font:600 58px var(--f-display); letter-spacing:-.02em}
.po-big--s{font-size:40px}
.po-fine{font-size:13px; fill:#9FB3A8}
.po-say{font-size:15px; letter-spacing:0; fill:#17231D}
.po-brd{stroke:#54735F; stroke-width:2}
.po-post{fill:none; stroke:#6F8379; stroke-width:8; stroke-linecap:round}
.po-post-hi{fill:none; stroke:#A9B7AE; stroke-width:2; stroke-linecap:round}
.po-board{transform:var(--sg,none)}
.po-splat{transform:var(--sp,scale(0))}
.po-small--1{transform:var(--s1,scale(0))}
.po-small--2{transform:var(--s2,scale(0))}
.po-small--3{transform:var(--s3,scale(0))}
.po-drip{fill:none; stroke:#FDFEFD; stroke-width:7; stroke-linecap:round}
.po-drip--1{transform:translate(14px,22px) scaleY(var(--d1,0)) translate(-14px,-22px)}
.po-drip--2{transform:translate(-8px,20px) scaleY(var(--d2,0)) translate(8px,-20px)}
.po-pd{fill:#F6F8F5; opacity:var(--po,0); transform:translate(calc(var(--pu,0) * var(--a) * 1px),calc((var(--pu,0) * var(--b) + var(--pu2,0) * 210) * 1px))}
.po-stuck{fill:#F6F8F5; opacity:var(--pk,0)}
.po-fall{fill:#F6F8F5; opacity:0}
.po-fall--0{transform:var(--fa,none); opacity:var(--fao,0)}
.po-fall--1{transform:var(--q1,none); opacity:var(--q1o,0)}
.po-fall--2{transform:var(--q2,none); opacity:var(--q2o,0)}
.po-fall--3{transform:var(--q3,none); opacity:var(--q3o,0)}
.po-os-arrow,.po-os-arrow2{fill:none; stroke:#E0705A; stroke-width:5; stroke-linecap:round}
.po-os-arrow{opacity:var(--aro,1)}
.po-os-arrow2{transform:var(--ar,translate(60px,-176px)); opacity:calc(1 - var(--aro,1))}

/* ---------- the Others: shared rig ---------- */
.po-c{transform:var(--c,none)}
.po-cp{transform:var(--cp,none)}
.po-pu{transform:translate(calc(var(--ex,0) * 1px),calc(var(--ey,0) * 1px)) scale(var(--pp,1))}
.po-lid{transform:translateY(calc(var(--r) * -1px)) scaleY(clamp(0,var(--ld,0) + var(--lk,0) * var(--m,1),1)) translateY(calc(var(--r) * 1px))}
.po-blk{transform:translateY(calc(var(--r) * -1px)) scaleY(0) translateY(calc(var(--r) * 1px))}
.po-brow{fill:none; stroke-width:3; stroke-linecap:round; opacity:var(--bo,1); transform:translateY(calc(var(--by,0) * 1px)) rotate(calc(var(--br,0) * var(--m,1) * 1deg))}
.po-hd{transform:var(--hd,none)}
.po-wa{transform:var(--wa,none)}
.po-wb{transform:var(--wb,none)}
.po-jw{transform:var(--jw,none)}
.po-cr{transform:var(--cr,none)}
.po-tl2{transform:var(--tl2,none)}
.po-dr{opacity:var(--dr,0)}
.po-grip{opacity:var(--gro,0)}
.po-gf{fill:none; stroke-linecap:round}
.po-gf--1{transform:translateY(calc(var(--g1,0) * -16px)); opacity:calc(1 - var(--g1,0))}
.po-gf--2{transform:translateY(calc(var(--g2,0) * -16px)); opacity:calc(1 - var(--g2,0))}
.po-gf--3{transform:translateY(calc(var(--g3,0) * -16px)); opacity:calc(1 - var(--g3,0))}

/* the peacock: each tail feather fans out by its own angle; the outer ones fold first */
.po-pk-fan{transform:var(--fs,none)}
.po-pk-f{transform:translateY(-78px) rotate(calc(var(--a) * clamp(.1,1 + (var(--fan,1) - 1 + .4 * (1 - var(--o))) * 1.636,max(1,var(--fan,1))) * 1deg)) translateY(78px)}
.po-pk-lf{opacity:0}
.po-pk-lf--0{transform:var(--f0,none); opacity:var(--f0o,0)}
.po-pk-lf--1{transform:var(--f1,none); opacity:var(--f1o,0)}
.po-pk-lf--2{transform:var(--f2,none); opacity:var(--f2o,0)}
.po-pk-lf--3{transform:var(--f3,none); opacity:var(--f3o,0)}
.po-pk-ll{transform:var(--fl2,translate(26px,-74px) rotate(64deg)); opacity:var(--fl,0)}
.po-pk-gw{fill:#2B544A; opacity:calc(1 - var(--g3,0))}
.po-rival--peacock .po-gf{stroke:#35655A; stroke-width:10}

/* the sloth: asleep until told otherwise */
.po-rival--sloth{--ld:1}
.po-sl-a1{transform:var(--a1,none)}
.po-sl-a2{transform:var(--a2,none)}
.po-sl-m0{opacity:var(--m0,1)}
.po-sl-m1{opacity:var(--m1,0)}
.po-sl-m2{opacity:var(--m2,0)}
.po-sl-m3{opacity:var(--m3,0)}
.po-sl-sh{opacity:var(--shh,1)}
.po-sl-zz{opacity:var(--zz,1)}
.po-sl-z{font-size:20px; fill:#D3CCBD}
.po-sl-z + .po-sl-z{font-size:24px}
.po-sl-z + .po-sl-z + .po-sl-z{font-size:30px}
.po-sl-ga{transform:var(--ga2,none)}
.po-sl-gh{transform:var(--gh,none)}
.po-rival--sloth .po-gf{stroke:#E2DCCF; stroke-width:5}

/* the parrot, its perch and its speech bubble */
.po-pr-perch{transform:var(--pe,none); opacity:var(--peo,1)}
.po-pr-bub{transform:var(--bb,none); opacity:var(--bbo,1)}
.po-pr-t0{opacity:var(--b0,1)}
.po-pr-t1{opacity:var(--b1,0)}
.po-pr-t2{opacity:var(--b2,0)}
.po-pr-t3{opacity:var(--b3,0)}

/* the ostrich: hips, knees, a neck that reaches the sand wherever the body goes, and a head we see once */
.po-os-l1{transform:var(--l1,none)}
.po-os-l2{transform:var(--l2,none)}
.po-os-k1{transform:var(--k1,none)}
.po-os-k2{transform:var(--k2,none)}
.po-os-nk{fill:none; stroke:#DDB3A6; stroke-width:calc(var(--nw,14) * 1px); stroke-linecap:round; opacity:var(--nko,1)}
.po-os-hd{transform:var(--oh,translate(-178px,-14px)); opacity:var(--oho,0)}
.po-os-pf{fill:#D9D2BF; opacity:var(--pfo2,0); transform:translate(calc(var(--pf,0) * var(--a) * 1px),calc((var(--pf,0) * var(--b) + var(--pf,0) * var(--pf,0) * 90) * 1px))}

/* ---------- the flock and the sparrow ---------- */
.po-wing,.po-fwing{transform:translate(1686px,302px) rotate(38deg) scale(1,var(--wf,1)) rotate(-38deg) translate(-1686px,-302px)}
.po-fb{fill:var(--amber)}
.po-fb-bird{overflow:visible}
.po-fb-r{transform:rotate(calc(var(--ba,0) * 1deg))}
.po-tag{font:400 13px var(--f-mono); letter-spacing:.06em; fill:var(--amber); opacity:var(--tg,0)}
.po-flock.has-tags .po-tag{opacity:1}
.po-you-tag{fill:var(--amber)}
.po-tag--you{font-size:13px; font-weight:500; letter-spacing:.1em; fill:var(--ink); opacity:1}
.po-you-slot{fill:none; stroke:var(--amber); stroke-width:2.5; stroke-dasharray:6 8; opacity:var(--ys,0)}
.po-sparrow{fill:var(--mint)}
.po-sp-eye{opacity:var(--eo,0)}
.po-sp-pu,.po-sp-gl{transform:translate(calc(var(--sx,0) * 1px),calc(var(--sy,0) * 1px))}
.po-sp-lid{fill:var(--mint); transform:translate(1478px,254px) scaleY(var(--sl,0)) translate(-1478px,-254px)}

/* ---------- idle life, only on the live stage ---------- */
@media (prefers-reduced-motion:no-preference){
  .po-stage .po-ci{animation:po-breathe 3.6s ease-in-out infinite}
  .po-stage .po-c--sloth .po-ci{animation-duration:5.6s}
  .po-stage .po-c--parrot .po-ci{animation-duration:2.6s}
  .po-stage .po-pk-fi{animation:po-shimmer 3.4s ease-in-out infinite; animation-delay:calc(var(--a) * -.023s)}
  .po-stage .po-pk-fj{animation:po-shimmy 6.5s ease-in-out infinite}
  .po-stage .po-pk-hi{animation:po-peck 5.2s ease-in-out infinite}
  .po-stage .po-sl-hi{animation:po-loll 7s ease-in-out infinite}
  .po-stage .po-pr-hi{animation:po-cock 3.4s cubic-bezier(.3,1.6,.5,1) infinite}
  .po-stage .po-sl-z{animation:po-zzz 3s linear infinite both}
  .po-stage .po-sl-z + .po-sl-z{animation-delay:-1s}
  .po-stage .po-sl-z + .po-sl-z + .po-sl-z{animation-delay:-2s}
  .po-stage .po-blk{animation:po-blink 4.4s linear infinite}
  .po-stage .po-rival--parrot .po-blk{animation-duration:3.7s; animation-delay:-1.3s}
  .po-stage .po-rival--sloth .po-blk{animation-duration:6.1s; animation-delay:-2.2s}
  .po-stage .po-board-i{animation:po-wobble 4.2s ease-in-out infinite}
  .po-stage .po-rival--sloth .po-board-i{animation-duration:5.6s}
  .po-stage .po-rival--parrot .po-board-i{animation-delay:-.8s}
  .po-stage .po-rival--ostrich .po-board-i{animation-delay:-1.9s; animation-duration:4.8s}
  .po-stage .po-os-dl{animation:po-kick 1.7s ease-in-out infinite alternate}
  .po-stage .po-os-dl--2{animation-delay:-.9s; animation-duration:2.1s}
  .po-stage .po-gl{animation:po-glint 3.2s ease-in-out infinite}
  .po-stage .po-bub circle{animation:po-bubble 1.1s ease-in infinite}
  .po-stage .po-bub circle:nth-child(2){animation-delay:-.3s; animation-duration:.9s}
  .po-stage .po-bub circle:nth-child(3){animation-delay:-.55s}
  .po-stage .po-bub circle:nth-child(4){animation-delay:-.75s; animation-duration:1.3s}
  .po-stage .po-bub circle:nth-child(5){animation-delay:-.15s; animation-duration:.8s}
  .po-stage .po-bub circle:nth-child(6){animation-delay:-.45s; animation-duration:1s}
  .po-stage .po-star--tw{animation:po-twinkle 3.8s ease-in-out infinite}
  .po-stage .po-star--tw:nth-child(10n){animation-delay:-1.7s}
  .po-stage .po-fwing{animation:wing-beat .26s ease-in-out infinite alternate; animation-delay:calc(var(--k) * -.07s)}
  .po-stage .po-fb--you .po-fwing{animation-duration:.21s}
  .po-stage .po-fb-bob{animation:po-bob 2.6s ease-in-out infinite; animation-delay:calc(var(--k) * -.37s)}
  .po-stage .po-streak{animation:po-streak .7s linear infinite; animation-delay:calc(var(--k) * -.13s)}
  .po-stage.is-sky .po-floor,.po-stage.is-sky .po-l--fg{display:none}
  .po-stage.is-ground .po-streaks{display:none}
  .po-stage.no-flock .po-flock{display:none}
  .po-stage .po-rival:not(.has-wc) .po-gl,.po-stage .po-rival:not(.is-fl) .po-bub circle,.po-stage .po-rival.is-shut .po-pk-fi,.po-stage .po-rival.is-shut .po-pk-fj{animation:none}
  .po-stage.is-off *{animation-play-state:paused !important}
}
@keyframes po-breathe{50%{transform:scale(1.02,1.045)}}
@keyframes po-shimmer{50%{transform:translateY(-78px) rotate(3.4deg) translateY(78px)}}
@keyframes po-shimmy{0%,84%,100%{transform:none} 87%,93%{transform:translateY(-78px) scale(1.06,1.03) rotate(-2.5deg) translateY(78px)} 90%,96%{transform:translateY(-78px) scale(1.06,1.03) rotate(2.5deg) translateY(78px)}}
@keyframes po-peck{0%,58%,70%,82%,100%{transform:none} 64%,76%{transform:translate(4px,-118px) rotate(9deg) translate(-4px,118px)}}
@keyframes po-loll{0%,100%{transform:translateY(-80px) rotate(-5deg) translateY(80px)} 50%{transform:translateY(-80px) rotate(5deg) translateY(80px)}}
@keyframes po-cock{0%,52%,100%{transform:none} 58%,90%{transform:translate(4px,-166px) rotate(-13deg) translate(-4px,166px)}}
@keyframes po-zzz{0%{transform:translate(-6px,14px); opacity:0} 25%{opacity:1} 100%{transform:translate(10px,-26px); opacity:0}}
@keyframes po-blink{0%,93%,100%{transform:translateY(calc(var(--r) * -1px)) scaleY(0) translateY(calc(var(--r) * 1px))} 96%{transform:translateY(calc(var(--r) * -1px)) scaleY(1) translateY(calc(var(--r) * 1px))}}
@keyframes po-wobble{0%,100%{transform:translateY(-150px) rotate(-1.6deg) translateY(150px)} 50%{transform:translateY(-150px) rotate(1.8deg) translateY(150px)}}
@keyframes po-glint{50%{transform:translateX(8px)}}
@keyframes po-kick{from{transform:translate(-30px,-22px) rotate(-8deg) translate(30px,22px)} to{transform:translate(-30px,-22px) rotate(10deg) translate(30px,22px)}}
@keyframes po-bubble{0%{transform:translateY(8px) scale(.3); opacity:0} 30%{opacity:1} 85%{opacity:1} 100%{transform:translateY(-18px) scale(1.15); opacity:0}}
@keyframes po-twinkle{50%{opacity:.15}}
@keyframes po-bob{50%{transform:translateY(-5px)}}
@keyframes po-streak{0%{transform:translate(-200px,-110px); opacity:0} 35%{opacity:.5} 100%{transform:translate(260px,140px); opacity:0}}

/* ---------- the pinned stage (scripts on, motion allowed) ---------- */
.po-stage{display:none}
html.po-live .po-story{height:calc((var(--po-len,5) + 1) * 100vh); height:calc((var(--po-len,5) + 1) * 100svh)}
html.po-live .po-stage{display:block; position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:linear-gradient(180deg,var(--po-sky-a,#040907),var(--po-sky-b,#0C2018) 64%)}
html.po-live .po-stage::before{content:""; position:absolute; inset:auto 0 0 0; height:44%; background:linear-gradient(180deg,rgba(3,9,7,0),rgba(3,9,7,.78)); opacity:var(--po-scrim,1); pointer-events:none}
html.po-live .po-panels{display:none}
.po-caps li{position:absolute; left:var(--pad); bottom:clamp(26px,6svh,72px); max-width:min(88vw,22em); font:500 clamp(30px,min(3.7vw,6.6svh),84px)/1.02 var(--f-display); letter-spacing:-.02em; text-wrap:balance; opacity:0; transform:translateY(22px); transition:opacity .18s, transform .3s var(--ease); pointer-events:none; will-change:opacity,transform}
.po-caps li.is-on{opacity:1; transform:none; transition:opacity .35s .16s, transform .5s var(--ease) .16s}
.po-caps li[data-cap="5"]{font-style:italic; font-weight:400; color:var(--mint)}
.po-n{display:block; margin-bottom:10px; font:400 var(--fs-mono)/1.5 var(--f-mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.po-caps .po-n{color:var(--text)}
.po-hud{position:absolute; top:calc(var(--bar-h) + 18px); font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text); opacity:0; transition:opacity .3s}
.po-hud.is-on{opacity:1}
.po-counter{left:50%; translate:-50% 0; padding:6px 12px; white-space:nowrap; border:1px solid var(--line-2); border-radius:999px; background:rgba(5,7,6,.6)}
.po-alt{right:var(--pad)}
.po-flushed{position:absolute; right:var(--pad); bottom:clamp(20px,5svh,64px); font:italic 500 clamp(64px,min(11vw,17svh),220px)/1 var(--f-display); transform-origin:100% 100%; letter-spacing:-.03em; color:var(--mint); opacity:0; scale:.6; transition:opacity .2s, scale .35s cubic-bezier(.3,1.7,.5,1); pointer-events:none; will-change:opacity,scale}
.po-flushed.is-on{opacity:1; scale:1}
.po-roll{position:absolute; left:var(--pad); right:var(--pad); top:calc(var(--bar-h) + 50px); max-width:34em; margin:0; font:400 11px/1.7 var(--f-mono); letter-spacing:.04em; color:var(--amber); opacity:0; transition:opacity .4s; pointer-events:none}
.po-roll.is-on{opacity:1}
.po-roll span:not(.po-n):not(:last-child)::after{content:" · "; color:var(--text-2)}
.po-roll .po-n{margin-bottom:2px}
.po-finale{position:absolute; right:var(--pad); bottom:clamp(26px,6svh,72px); display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .35s, transform .5s var(--ease), visibility 0s .35s; will-change:opacity,transform}
.po-finale.is-on{opacity:1; visibility:visible; transform:none; transition-delay:0s}

/* ---------- the five still panels (no scripts, or reduced motion) ---------- */
.po-panels{display:grid; gap:clamp(20px,3vw,48px); max-width:calc(var(--max) + 2 * var(--pad)); margin-inline:auto; padding:0 var(--pad) clamp(48px,8vh,100px)}
.po-panel figure{margin:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#040907,#0C2018 64%)}
.po-panel--4 figure{background:linear-gradient(180deg,#0B251D,#0F3227)}
.po-panel--5 figure{background:linear-gradient(180deg,#145040,#124636)}
.po-pan{overflow:hidden}
.po-panel .po-world{height:auto}
.po-panel figcaption{padding:clamp(16px,2vw,32px); border-top:1px solid var(--line); font:500 clamp(24px,2.6vw,48px)/1.08 var(--f-display); letter-spacing:-.015em}
.po-swipe{display:none}

/* ---------- after the story ---------- */
.po-end{padding:clamp(40px,7vh,96px) 0 clamp(56px,9vh,120px); background:linear-gradient(180deg,#124636,var(--sky-8))}
.po-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3)}
.po-replay{min-height:44px; padding:0; border:0; background:none; font:inherit; font-weight:500; color:inherit; cursor:pointer}
.po-fine-line{margin-top:var(--s-3); font:400 var(--fs-mono)/1.6 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}

@media (max-width:1100px){
  .po-caps li[data-cap="5"]{bottom:calc(clamp(26px,6svh,72px) + 82px)}
  .po-finale{left:var(--pad); justify-content:flex-start}
}
@media (max-height:500px){
  .po-caps li{bottom:10px; font-size:22px}
  .po-caps .po-n{margin-bottom:2px; font-size:9px}
  .po-caps li[data-cap="5"]{bottom:10px; max-width:50vw}
  .po-finale{left:auto; right:var(--pad); bottom:10px; justify-content:flex-end}
  .po-finale .btn{min-height:44px}
  .po-flushed{font-size:56px; bottom:8px}
}
@media (max-width:700px){
  .po-roll{max-width:70%}
  .po-caps li{bottom:22px; max-width:11em}
  .po-caps li[data-cap="5"]{bottom:104px}
  .po-finale{bottom:22px}
  .po-flushed{bottom:108px}
  .po-counter{left:auto; right:var(--pad); translate:none}
  .po-finale .btn{min-height:48px; padding:0 18px; font-size:15px}
  .po-panels{padding-inline:12px}
  .po-panel figure{border-radius:14px}
  .po-pan{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin}
  .po-panel .po-world{width:230%; max-width:none}
  .po-panel--4 .po-world,.po-panel--5 .po-world{width:190%}
  .po-swipe{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .po-replay{display:none}
}