/* Page transition (test), after dapper.agency: a dark panel rises over the page while the mark builds,
   then lifts off the next page, which eases up while its text and rectangles reveal.
   Eases: cover cubic-bezier(.625,.05,.01,.99); lift expo in-out; rectangles a soft elastic out. */
:root{--tx-ease:cubic-bezier(.625,.05,.01,.99);--tx-lift:cubic-bezier(.87,0,.13,1)}

.tx{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.tx-back{position:absolute;inset:0;background:#0a0a0a;opacity:.75}
.tx-screen{position:absolute;inset:0;background:#0a0a0a;overflow:hidden;will-change:transform}
.tx-inner{position:absolute;inset:0;display:grid;place-items:center}
.tx-mark{width:3.83rem;height:auto;overflow:visible;color:#f5f5f5}
.tx-p{transform-box:fill-box;transform-origin:50% 50%}
html.tx-off .tx{display:none}
/* Home: hidden until it leaves (it keeps its own intro). */
.tx[data-tx-mode="leave"]{display:none}
html.tx-leave .tx{display:block}

/* Arriving on a page. The panel starts down; it lifts after --tx-at (set per arrival). */
.tx-arrive .tx-screen{animation:txLift 1.2s var(--tx-lift) var(--tx-at, .3s) both}
.tx-arrive .tx-back{animation:txBackOut 1.2s ease var(--tx-at, .3s) both}
@keyframes txLift{from{transform:translateY(0);border-radius:0}to{transform:translateY(-100%);border-radius:0 0 4em 4em}}
@keyframes txBackOut{from{opacity:.75}to{opacity:0}}
/* First visit: the mark builds before the lift. Arriving from another page it is already built. */
.tx-arrive:not(.tx-from) .tx-p{animation:txPiece .9s cubic-bezier(.16,1,.3,1) calc(.15s + var(--p) * .08s) both}
@keyframes txPiece{from{transform:scale(0) rotate(30deg)}to{transform:none}}
.tx-arrive .tx-page{transform-origin:50% 50vh;animation:txPageIn 1.6s var(--tx-lift) var(--tx-at, .3s) backwards}
@keyframes txPageIn{from{transform:scale(.9)}}

/* Text: each word slides up from behind its own mask; words on one line share that line's delay. */
.tx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em;margin:0 -.08em -.14em}
.tx-wi{display:inline-block;animation:txWord 1.2s var(--tx-ease) var(--d) backwards}
@keyframes txWord{from{transform:translateY(110%)}}
/* Case pages, further down: the same word reveal, started as each block scrolls into view. */
.tx-si{display:inline-block;transform:translateY(110%)}
.tx-in .tx-si{transform:none;transition:transform 1.2s var(--tx-ease) var(--d, 0s)}
/* Rectangles: fade up with a slight bounce, coming into focus. */
.tx-rect{animation:txRectA .9s ease-out var(--d) backwards,txRectY 1.2s linear(0, .22 6%, .62 13%, .93 20%, 1.06 27%, 1.08 32%, 1.04 40%, .99 50%, 1 62%, 1) var(--d) backwards}
@keyframes txRectA{from{opacity:0;filter:blur(6px)}}
@keyframes txRectY{from{translate:0 3em}}

/* Leaving: the panel rises from below, its corners squaring off; the page dims and recedes. */
.tx-leave .tx-screen{animation:txCover .8s var(--tx-ease) both}
.tx-leave .tx-inner{animation:txCoverInner .8s var(--tx-ease) both}
.tx-leave .tx-back{animation:txBackIn .8s var(--tx-ease) both}
.tx-leave .tx-p{animation:txPiece .9s cubic-bezier(.16,1,.3,1) calc(.225s + var(--p) * .1s) both}
.tx-leave .tx-page{transform-origin:50% var(--tx-oy, 50vh);animation:txPageOut 1.2s var(--tx-ease) both}
@keyframes txCover{from{transform:translateY(100%);border-radius:4em}to{transform:none;border-radius:0}}
@keyframes txCoverInner{from{transform:translateY(-100%)}to{transform:none}}
@keyframes txBackIn{from{opacity:0}to{opacity:.75}}
@keyframes txPageOut{to{transform:scale(.8)}}

/* Hero animations that used to wait for the old curtain now start as this one lifts. */
html.tx-arrive .c-title .gw{animation-delay:calc(var(--tx-at) + .45s + var(--i) * .08s)}
html.tx-arrive .x-veil{animation-delay:calc(var(--tx-at) + .3s)}
html.tx-arrive .t-frame{animation-delay:calc(var(--tx-at) + .4s)}

/* Going to Home: a light panel, and the mark at Home's starting size (64px), so the handover is
   seamless. Home then skips its pieces joining (they are already joined) and carries on. */
.tx-light .tx-screen,.tx-light .tx-back{background:#f5f5f5}
.tx-light .tx-mark{width:64px;color:#0a0a0a}
html.tx-from-cover .hs-logo .pt-piece{animation:none;opacity:1}
/* Arriving on Home from that cover, the same light panel and mark are drawn from Home's first frame
   and held (tx-hold) until Home has centred its own logo underneath (rq-transition.js), so there is no
   gap. Only while held: leaving Home afterwards uses the usual dark cover. */
html.tx-hold .tx{display:block}
html.tx-hold .tx-screen,html.tx-hold .tx-back{background:#f5f5f5}
html.tx-hold .tx-back{opacity:1}
html.tx-hold .tx-mark{width:64px;color:#0a0a0a}

@media (prefers-reduced-motion:reduce){.tx{display:none}.tx-page,.tx-wi,.tx-rect{animation:none}.tx-si{transform:none}}