/* Perpetuum · Thesis section (05) — standalone, scoped to .tx
   One stage, three chapters. Geometry authored on a 1440×900 (desktop) and 390×844 (portrait) board,
   scaled to fit by thesis.js. Motion = transform / opacity / clip-path only. */

.tx{--st:#0E0C09;--iv:#FAF8F2;--iv2:#E9E2D5;--iv3:#CFC6B6;--lime:#D2F154;--pink:#FF3B9D;--ink:#15130F;
  --io:cubic-bezier(.65,0,.35,1);--out:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.34,1.45,.64,1);
  --g:clamp(20px,4.4vw,64px);--fi:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--fr:"Rubik",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;background:var(--st);color:var(--iv);font-family:var(--fi);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.tx *,.tx *::before,.tx *::after{box-sizing:border-box}
.tx p,.tx h2,.tx h3,.tx figure,.tx ol,.tx ul{margin:0;padding:0}
.tx ol,.tx ul{list-style:none}
.tx img{display:block;max-width:none}
.tx a{color:var(--iv);text-underline-offset:.2em}
.tx a:hover{color:var(--lime)}
.tx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* intro + closing (normal flow) */
.tx-intro,.tx-close{max-width:1440px;margin:0 auto;padding-inline:var(--g)}
.tx-intro{padding-block:clamp(88px,10vw,152px) clamp(36px,4.4vw,64px)}
.tx-k{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--iv3)}
.tx-s0{margin-top:18px;max-width:14em;font-size:clamp(36px,4.8vw,72px);line-height:1;font-weight:500;font-stretch:94%;letter-spacing:-.035em;text-wrap:balance}
.tx-skip{position:absolute;left:var(--g);top:12px;z-index:5;padding:10px 14px;background:var(--iv);color:var(--ink)!important;font-size:14px;font-weight:600;border-radius:2px;transform:translateY(-200%);opacity:0}
.tx-skip:focus{transform:none;opacity:1;outline:2px solid var(--lime);outline-offset:2px}
.tx-close{padding-block:clamp(72px,8vw,128px) clamp(88px,10vw,152px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(32px,5vw,80px);align-items:end}
.tx-close .tx-k{grid-column:1/-1}
.tx-s8{font-size:clamp(36px,4.4vw,64px);line-height:1.02;font-weight:500;font-stretch:94%;letter-spacing:-.035em;text-wrap:balance}
.tx-b8{max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--iv2);text-wrap:pretty}
.tx-note{grid-column:1/-1;margin-top:clamp(24px,3vw,40px);font-size:13px;color:var(--iv3)}
@media (max-width:719px){.tx-close{grid-template-columns:minmax(0,1fr)}}

/* stage */
.tx-track{position:relative}
.tx-stage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--st);display:none}
.tx-js .tx-stage{display:block;position:sticky;top:0}
.tx-js .tx-track{height:190svh}
.tx-js.tx-noadv .tx-track{height:auto}
.tx-js.tx-noadv .tx-stage{position:relative}
.tx-fit{position:absolute;left:50%;top:50%;width:calc(var(--dw,1440)*1px);height:calc(var(--dh,900)*1px);transform:translate(-50%,-50%) scale(var(--s,1))}
.tx-vis{position:absolute;inset:0}
.tx [data-k]{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;pointer-events:none}
.tx [data-g]{position:absolute;left:0;top:0;transform-origin:0 0}
.tx-win{width:100%;height:100%;overflow:hidden}
.tx-push{transform-origin:50% 40%;transition:transform 2800ms var(--out)}
.tx-push.z{transform:scale(1.06);transition:none}
/* stage-level scrim for chapter 3 (desktop): keeps T3/B7/controls legible over the city */
.tx-scrim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 900ms linear;
  background:radial-gradient(70% 62% at 0% 0%,rgba(14,12,9,.86) 0,rgba(14,12,9,.6) 42%,rgba(14,12,9,0) 72%),linear-gradient(0deg,rgba(14,12,9,.82) 0,rgba(14,12,9,0) 20%)}
.tx[data-ch="3"][data-comp="d"] .tx-scrim{opacity:1}

/* lime wipe (Mr. G arrives) */
.tx-lime{position:absolute;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;border-radius:2px}

/* display type */
.tx-t{font-weight:600;font-stretch:75%;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;white-space:nowrap}
.tx-t .ln{display:block;overflow:hidden;padding:.03em 0 .05em;margin-bottom:-.08em}
.tx-t .ln>span{display:block;transform:translateY(110%);transition:transform 780ms var(--out);transition-delay:calc(var(--i,0)*110ms + var(--td,0ms))}
.tx-t.in .ln>span{transform:none}
.tx-t .pk{color:var(--pink)}
[data-k="t1"]{font-size:166px}
[data-k="t2"]{font-size:148px;--td:420ms}
[data-k="t3"]{font-size:80px}
[data-k="l2"]{font:500 42px/1 var(--fr);color:var(--lime);letter-spacing:-.01em;--td:900ms}
[data-k="l2"] .ln{padding:.04em 0 .12em}
.tx-body{font-size:22px;line-height:1.42;color:var(--iv2);text-wrap:pretty}
[data-k="b1"]{width:440px}
[data-k="b3"]{width:480px;font-size:21px}
[data-k="b7"]{width:400px;font-size:19px}
[data-comp="m"] [data-k="t1"]{font-size:64px}
[data-comp="m"] [data-k="t2"]{font-size:56px}
[data-comp="m"] [data-k="t3"]{font-size:39px}
[data-comp="m"] [data-k="l2"]{font-size:24px}
[data-comp="m"] .tx-body{font-size:17px;width:350px}
[data-comp="m"] [data-k="b7"]{font-size:16px}

/* chapter 1 annotations */
.tx-an .r,.tx-mk .r{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--iv);transform:scale(0);transition:transform 280ms var(--pop) var(--d,0ms)}
.tx-an.on .r,.tx-mk.on .r{transform:none}
.tx-an .r b{display:none}
.tx-chip{position:absolute;top:-24px;left:22px;width:max-content;max-width:280px;padding:8px 12px 10px;background:rgba(14,12,9,.8);border-radius:2px;opacity:0;transform:translateY(8px);transition:opacity 420ms var(--out) calc(var(--d,0ms) + 90ms),transform 420ms var(--out) calc(var(--d,0ms) + 90ms)}
.l>.tx-chip{left:auto;right:22px}
.on>.tx-chip{opacity:1;transform:none}
.tx-chip i{display:block;font-style:normal;text-transform:uppercase;font-size:max(12px,calc(12px * var(--inv,1)));font-weight:600;letter-spacing:.14em;color:var(--iv3);line-height:1.2}
.tx-chip span{display:block;margin-top:3px;font-size:max(16px,calc(13px * var(--inv,1)));line-height:1.28;color:var(--iv)}
[data-comp="m"] .tx-an .r{left:-13px;top:-13px;width:26px;height:26px;background:rgba(14,12,9,.72);display:grid;place-items:center}
[data-comp="m"] .tx-an .r b{display:block;font-size:12px;font-weight:600;line-height:1}
[data-comp="m"] .tx-an .tx-chip{display:none}
.tx-alist{width:350px;display:grid;gap:14px}
.tx-alist li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.tx-alist b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--iv);display:grid;place-items:center;font-size:12px;font-weight:600}
.tx-alist i{display:block;font-style:normal;text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--iv3)}
.tx-alist span{display:block;font-size:17px;line-height:1.3}

/* chapter 2 — voice note → Trail → edit */
.tx-vl{white-space:nowrap;font:600 12px/1 var(--fr);letter-spacing:.12em;text-transform:uppercase;color:var(--iv3);font-size:max(12px,calc(12px * var(--inv,1)))}
.tx-wave{display:flex;align-items:center;gap:3px;height:28px}
.tx-wave i{display:block;width:2px;border-radius:1px;background:rgba(250,248,242,.72);transform:scaleY(.12);transition:transform 520ms var(--out) calc(var(--i)*12ms)}
.tx-wave.in i{transform:none}
.tx-tr{width:780px;font-size:36px;line-height:1.9;font-weight:500;font-stretch:94%;letter-spacing:-.02em;color:var(--iv)}
[data-comp="m"] .tx-tr{width:350px;font-size:26px}
.tx-tr .w{opacity:0;transition:opacity 280ms linear calc(260ms + var(--i)*36ms)}
.tx-tr.in .w{opacity:1}
.tx-tr .ph{position:relative;padding:0 .1em;margin:0;border-radius:2px;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 55%/0% 86%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 260ms var(--out),color 200ms linear}
.tx-tr .ph.on{background-size:100% 86%;color:var(--ink)}
.tx-tr .ph::before{content:attr(data-tag);text-transform:uppercase;position:absolute;left:.14em;top:-.62em;font:600 12px/1 var(--fr);letter-spacing:.1em;color:var(--lime);opacity:0;transform:translateY(5px);transition:opacity 200ms linear 60ms,transform 220ms var(--out) 60ms;white-space:nowrap}
.tx-tr .ph.on::before{opacity:1;transform:none}
.tx-tr.dock .ph::before{opacity:0}

.tx-po{width:360px;height:450px;color:var(--ink)}
.po-bg{position:absolute;inset:0;background:var(--lime);border-radius:2px;transform-origin:0 0}
.po-in{position:relative;height:100%;padding:22px 24px 20px;display:flex;flex-direction:column}
.po-k{white-space:nowrap;display:flex;justify-content:space-between;gap:12px;font:600 12px/1 var(--fr);letter-spacing:.1em;text-transform:uppercase}
.po-t{margin-top:20px;font-size:58px;line-height:.88;font-weight:600;font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em}
.po-t .l{display:block;transform-origin:0 0}
.po-d{display:block;font-size:17px;line-height:1.3;font-weight:500;transform-origin:0 0}
.po-d+.po-d{margin-top:4px}
.po-sp{flex:1}
.po-host{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;font-weight:600}
.po-chip{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#2a2620}
.po-chip img{position:absolute;left:0;top:0;transform-origin:0 0}
.po-f{margin-top:14px;padding-top:11px;border-top:1px solid rgba(21,19,15,.28);display:flex;flex-direction:column;gap:4px;font:500 12px/1.3 var(--fr)}
.po-f b{font-weight:600}
[data-comp="m"] .tx-po{width:350px;height:280px}
[data-comp="m"] .po-in{padding:16px 18px 14px}
[data-comp="m"] .po-t{margin-top:14px;font-size:40px}
[data-comp="m"] .po-d{font-size:15px}
[data-comp="m"] .po-host{margin-top:10px;font-size:13px}
[data-comp="m"] .po-chip{width:34px;height:34px}
[data-comp="m"] .po-f{margin-top:10px;padding-top:8px;flex-direction:row;justify-content:space-between;gap:10px}

.tx-st{width:372px}
.st-fr,.st-cap,.st-trk{display:grid;grid-template-columns:repeat(3,118px);gap:9px}
.fr{position:relative;width:118px;height:210px;overflow:hidden;border-radius:2px;background:#000;opacity:.5;transform:translateY(18px);transition:opacity 200ms linear,transform 640ms var(--out) calc(var(--i)*90ms)}
.tx-st.in .fr{transform:none}
.fr.on,.tx-st.all .fr{opacity:1}
.fi{position:absolute;inset:0;transform:scale(1.06);transition:transform 2200ms linear}
.fr.on .fi,.tx-st.all .fi{transform:none}
.fi img{position:absolute;left:0;top:0;transform-origin:0 0}
.st-cap{margin-top:12px}
.st-cap p{font-size:16px;font-weight:600;line-height:1.2;color:var(--iv3);transition:color 200ms linear}
.st-cap p b{display:block;margin-bottom:6px;font:500 12px/1 var(--fr);letter-spacing:.08em}
.st-cap p.on,.tx-st.all .st-cap p{color:var(--iv)}
.st-trk{margin-top:16px}
.st-trk i{display:block;position:relative;height:3px;overflow:hidden;background:rgba(210,241,84,.3);border-radius:1px}
.st-trk u{position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.st-trk i.done u,.tx-st.all .st-trk u{transform:none}
.st-ft{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-ft span{white-space:nowrap;font:500 12px/1.3 var(--fr);color:var(--iv2);font-size:max(12px,calc(12px * var(--inv,1)))}
.st-pp{width:44px;height:44px;margin-right:-13px;display:grid;place-items:center;background:none;border:0;padding:0;color:var(--iv);cursor:pointer;border-radius:2px}
.st-pp svg{width:14px;height:14px}
.st-pp .pl{display:none}
.st-pp[aria-pressed="true"] .pa{display:none}
.st-pp[aria-pressed="true"] .pl{display:block}
.st-pp:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.st-pp.live{pointer-events:auto}
.st-ppx{width:44px;height:44px;margin-right:-13px;flex:none}
[data-comp="m"] .tx-st{width:306px}
[data-comp="m"] .st-fr,[data-comp="m"] .st-cap,[data-comp="m"] .st-trk{grid-template-columns:repeat(3,96px)}
[data-comp="m"] .fr{width:96px;height:171px}
[data-comp="m"] .st-cap{margin-top:8px}
[data-comp="m"] .st-cap p{font-size:13px}
[data-comp="m"] .st-cap p b{display:none}
[data-comp="m"] .st-trk{margin-top:8px}
.tx-mrg img{width:760px;height:760px}
.tx-mcred{display:flex;align-items:center;gap:10px;width:350px}
.mc-av{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;background:#2a2620}
.mc-av img{position:absolute;left:0;top:0;transform-origin:0 0}
.tx-mcred i{display:block;font:600 12px/1.1 var(--fr);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.tx-mcred span{display:block;margin-top:3px;font-size:13px;line-height:1.25;color:var(--iv2)}

/* chapter 3 — markers and creator windows */
.tx-mk .r{width:16px;height:16px;left:-8px;top:-8px;border:2px solid var(--pink)}
.tx-mk.her .r{border-color:var(--lime);background:radial-gradient(circle,var(--lime) 0 3px,transparent 3.5px)}
.tx-mk.her.on .r::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lime);animation:txPulse 1000ms var(--out) 320ms 1 both}
@keyframes txPulse{from{transform:scale(1);opacity:.75}to{transform:scale(2.6);opacity:0}}
.tx-mk .tx-chip{top:-22px}
.tx-mk .tx-chip i{color:var(--pink)}
.tx-mk.her .tx-chip i{color:var(--lime)}
[data-comp="m"] .tx-mk .tx-chip{max-width:170px;padding:6px 9px 7px}
[data-comp="m"] .tx-mk .tx-chip span{font-size:14px}
.tx-wc{position:absolute;padding:34px 12px 12px;background:linear-gradient(180deg,rgba(14,12,9,0),rgba(14,12,9,.88) 46%)}
.tx-wc i{display:block;font-style:normal;text-transform:uppercase;font-size:max(12px,calc(12px * var(--inv,1)));font-weight:600;letter-spacing:.12em;color:var(--pink);line-height:1.25}
.tx-wc span{display:block;margin-top:4px;font-size:max(15px,calc(13px * var(--inv,1)));line-height:1.3;color:var(--iv)}
[data-comp="m"] .tx-wc{padding:26px 10px 9px}
[data-comp="m"] .tx-wc span{font-size:13px}

/* chapter controls */
.tx [data-k="ctl"]{opacity:1;pointer-events:auto}
.tx-ctl{display:flex;gap:28px}
.tx-ctl button{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;min-height:48px;min-width:170px;display:flex;flex-direction:column;justify-content:center;gap:10px;color:var(--iv3);font:500 15px/1 var(--fi);font-size:max(15px,calc(12px * var(--inv,1)));text-align:left;cursor:pointer;border-radius:2px;transition:color 200ms linear}
.tx-ctl button b{font-weight:600;margin-right:8px;font-variant-numeric:tabular-nums}
.tx-ctl button[aria-pressed="true"],.tx-ctl button:hover{color:var(--iv)}
.tx-ctl button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.tx-ctl .bar{display:block;position:relative;height:2px;overflow:hidden;background:rgba(250,248,242,.2)}
.tx-ctl .bar u{position:absolute;inset:0;background:var(--iv);transform:scaleX(0);transform-origin:0 50%}
[data-comp="m"] .tx-ctl{width:350px;gap:12px}
[data-comp="m"] .tx-ctl button{flex:1;min-width:0;font-size:13px;gap:8px}
[data-comp="m"] .tx-ctl button b{display:block;margin:0 0 4px}

/* reduced motion: resting states only */
.tx.tx-rm *,.tx.tx-rm *::before,.tx.tx-rm *::after,.tx.tx-still *,.tx.tx-still *::before,.tx.tx-still *::after{transition:none!important;animation:none!important}

/* no-JS fallback */
.tx-static{max-width:1440px;margin:0 auto;padding:0 var(--g) 24px;display:grid;gap:clamp(40px,5vw,72px)}
.tx-static figure{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 40px;align-items:end}
.tx-static img{width:100%;height:auto;border-radius:2px}
.tx-static h3{font-size:clamp(40px,6vw,96px);line-height:.88;font-weight:600;font-stretch:75%;text-transform:uppercase}
.tx-static p{margin-top:12px;color:var(--iv2)}
@media (max-width:719px){.tx-static figure{grid-template-columns:minmax(0,1fr)}}