/* Shared page-to-page transition. Fires on in-site navigation only (never on
   cold entry or refresh). A brand panel splits open at the gap between words,
   showing the destination's question, then reveals the page. Four opening
   styles mixed per section. Clean acid seam, no glow. Injected on every page;
   inert until a navigation fires. */
.pt-tx{position:fixed;inset:0;z-index:9999;visibility:hidden;pointer-events:none}
.pt-tx.on{visibility:visible;pointer-events:auto}
.pt-panel{position:absolute;background:var(--bg,#2c2f32);overflow:hidden;transition:transform .6s cubic-bezier(.76,0,.24,1)}
/* Instant, transition-free state used to place the cover on arrival without a slide-in flash. */
.pt-tx.pt-instant .pt-panel,.pt-tx.pt-instant .pt-seam,.pt-tx.pt-instant .pt-iris{transition:none !important}
/* Keep the question invisible until the display font is ready, so it never renders in a
   fallback face and then reflows (the glitch). It fades in already in the right font. */
.pt-tx:not(.pt-ready) .pt-txt{opacity:0}
.pt-tx.pt-ready .pt-txt{opacity:1;transition:opacity .28s ease}
.pt-txt{color:var(--text,#d7e8bc);font:400 clamp(2.6rem,7.2vw,6.5rem)/1.05 "Instrument Serif",Georgia,"Times New Roman",serif;letter-spacing:-.02em;display:block}
.pt-n5{font-size:1.28em;color:var(--accent,#e9f056);font-weight:400;font-style:normal}
.pt-seam{position:absolute;display:none;background:var(--accent,#e9f056);opacity:0;transition:transform .5s cubic-bezier(.65,0,.35,1),opacity .35s ease}
.pt-iris{position:absolute;inset:0;background:var(--bg,#2c2f32);display:none;place-items:center;text-align:center;padding:0 9vw;clip-path:circle(0% at 50% 50%);transition:clip-path .82s cubic-bezier(.76,0,.24,1)}

.pt-tx[data-render="cut"] .pt-panel{display:block}
.pt-tx[data-render="whole"] .pt-panel{display:none}
.pt-tx[data-render="whole"] .pt-seam{display:none}
.pt-tx[data-render="whole"] .pt-iris{display:grid}
.pt-tx.cover .pt-iris{clip-path:circle(150% at 50% 50%)}
.pt-tx.open .pt-iris{clip-path:circle(0% at 50% 50%)}

/* horizontal : chunk A right-aligned to the seam, chunk B left-aligned, gap between */
.pt-tx[data-style="horizontal"] .pt-a{top:0;bottom:0;left:0;width:50vw;transform:translateX(-100%);display:flex;align-items:center;justify-content:flex-end}
.pt-tx[data-style="horizontal"] .pt-b{top:0;bottom:0;right:0;width:50vw;transform:translateX(100%);display:flex;align-items:center;justify-content:flex-start}
.pt-tx[data-style="horizontal"] .pt-a .pt-txt{text-align:right;max-width:44vw;padding-right:2.4vw}
.pt-tx[data-style="horizontal"] .pt-b .pt-txt{text-align:left;max-width:44vw;padding-left:2.4vw}
.pt-tx[data-style="horizontal"].cover .pt-a,.pt-tx[data-style="horizontal"].cover .pt-b{transform:translateX(0)}
.pt-tx[data-style="horizontal"].open .pt-a{transform:translateX(-100%)}
.pt-tx[data-style="horizontal"].open .pt-b{transform:translateX(100%)}
.pt-tx[data-style="horizontal"] .pt-seam{display:block;top:0;bottom:0;left:calc(50vw - 1px);width:2px;transform:scaleY(0)}
.pt-tx[data-style="horizontal"].cover .pt-seam{transform:scaleY(1);opacity:1}

/* vertical : chunk A above the seam, chunk B below */
.pt-tx[data-style="vertical"] .pt-a{left:0;right:0;top:0;height:50vh;transform:translateY(-100%);display:flex;align-items:flex-end;justify-content:center}
.pt-tx[data-style="vertical"] .pt-b{left:0;right:0;bottom:0;height:50vh;transform:translateY(100%);display:flex;align-items:flex-start;justify-content:center}
.pt-tx[data-style="vertical"] .pt-a .pt-txt{text-align:center;max-width:82vw;padding-bottom:1.7vh}
.pt-tx[data-style="vertical"] .pt-b .pt-txt{text-align:center;max-width:82vw;padding-top:1.7vh}
.pt-tx[data-style="vertical"].cover .pt-a,.pt-tx[data-style="vertical"].cover .pt-b{transform:translateY(0)}
.pt-tx[data-style="vertical"].open .pt-a{transform:translateY(-100%)}
.pt-tx[data-style="vertical"].open .pt-b{transform:translateY(100%)}
.pt-tx[data-style="vertical"] .pt-seam{display:block;left:0;right:0;top:calc(50vh - 1px);height:2px;transform:scaleX(0)}
.pt-tx[data-style="vertical"].cover .pt-seam{transform:scaleX(1);opacity:1}

/* diagonal : chunk A up in the top triangle, chunk B down in the bottom triangle */
.pt-tx[data-style="diagonal"] .pt-a{inset:0;clip-path:polygon(0 0,100% 0,0 100%);transform:translate(-100%,-100%);display:flex;align-items:flex-start;justify-content:center}
.pt-tx[data-style="diagonal"] .pt-b{inset:0;clip-path:polygon(100% 0,100% 100%,0 100%);transform:translate(100%,100%);display:flex;align-items:flex-end;justify-content:center}
.pt-tx[data-style="diagonal"] .pt-a .pt-txt{margin-top:15vh;max-width:60vw;text-align:center}
.pt-tx[data-style="diagonal"] .pt-b .pt-txt{margin-bottom:15vh;max-width:60vw;text-align:center}
.pt-tx[data-style="diagonal"] .pt-txt{font-size:clamp(3rem,8.4vw,7.4rem)}
.pt-tx[data-style="diagonal"].cover .pt-a,.pt-tx[data-style="diagonal"].cover .pt-b{transform:translate(0,0)}
.pt-tx[data-style="diagonal"].open .pt-a{transform:translate(-100%,-100%)}
.pt-tx[data-style="diagonal"].open .pt-b{transform:translate(100%,100%)}
.pt-tx[data-style="diagonal"] .pt-seam{display:block;top:50%;left:-12%;width:124%;height:2px;transform:translateY(-50%) rotate(-45deg) scaleX(0);transform-origin:center}
.pt-tx[data-style="diagonal"].cover .pt-seam{transform:translateY(-50%) rotate(-45deg) scaleX(1);opacity:1}

@media (prefers-reduced-motion:reduce){ .pt-panel,.pt-seam,.pt-iris{transition:none !important} }