/* The centre tile grows into the page; all four seams follow the same aperture. */
.brand-opening{display:none;position:fixed;inset:0;z-index:1000;pointer-events:none;isolation:isolate;overflow:hidden;color:#e5edbe;background:#1b211c;--opening-x:108px;--opening-y:88px;--open-at:820ms;--open-duration:800ms;--open-ease:cubic-bezier(.76,0,.16,1)}
html[data-entrance=pending] .brand-opening,html[data-entrance=playing] .brand-opening{display:block}
/* An opaque backing stays behind the expanding tile. Only the entire finished
   composition fades, so restored page content cannot leak around the logo. */
html[data-entrance=playing] .brand-opening{animation:opening-curtain-exit 240ms 1620ms ease both}
@keyframes opening-curtain-exit{0%{opacity:1}100%{opacity:0;visibility:hidden}}
.opening-panel{position:absolute;background:#1b211c;will-change:transform}
.opening-top,.opening-bottom{left:0;width:100%;height:calc(50% - var(--opening-y))}
.opening-top{top:0}.opening-bottom{bottom:0}
.opening-left,.opening-right{top:0;height:100%;width:calc(50% - var(--opening-x))}
.opening-left{left:0}.opening-right{right:0}
.opening-core{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:19px;background:#2b382d;clip-path:inset(calc(50% - var(--opening-y)) calc(50% - var(--opening-x)));will-change:clip-path,opacity}
.opening-mark{width:136px;height:73px;fill:currentColor;stroke:none;overflow:visible}
.opening-core>span{font:9px PlexMono,monospace;letter-spacing:.16em;text-transform:uppercase;color:#c5ceb8}
.opening-rule{position:absolute;z-index:1;background:#a7b5942e;will-change:transform}
.opening-rule-v{width:1px;top:0;height:100%}
.opening-rule-v.first{left:calc(50% - var(--opening-x))}.opening-rule-v.second{right:calc(50% - var(--opening-x))}
.opening-rule-h{height:1px;left:0;width:100%}
.opening-rule-h.first{top:calc(50% - var(--opening-y))}.opening-rule-h.second{bottom:calc(50% - var(--opening-y))}
.opening-a-left,.opening-a-right{transform-box:fill-box;transform-origin:center}
html[data-entrance=pending] .opening-mark,html[data-entrance=pending] .opening-core>span{opacity:0}
html[data-entrance=playing] .opening-a-left{animation:aa-join-left 620ms 90ms cubic-bezier(.22,1,.36,1) both}
html[data-entrance=playing] .opening-a-right{animation:aa-join-right 650ms 150ms cubic-bezier(.22,1,.36,1) both}
html[data-entrance=playing] .opening-mark{animation:opening-mark-exit 520ms 1100ms cubic-bezier(.22,1,.36,1) both}
html[data-entrance=playing] .opening-core>span{animation:opening-signature 1250ms ease both}
html[data-entrance=playing] .opening-core{animation:opening-aperture var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-top{animation:opening-top-exit var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-bottom{animation:opening-bottom-exit var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-left{animation:opening-left-exit var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-right{animation:opening-right-exit var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-rule-v.first{animation:opening-seam-left var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-rule-v.second{animation:opening-seam-right var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-rule-h.first{animation:opening-seam-top var(--open-duration) var(--open-at) var(--open-ease) both}
html[data-entrance=playing] .opening-rule-h.second{animation:opening-seam-bottom var(--open-duration) var(--open-at) var(--open-ease) both}
@keyframes aa-join-left{from{opacity:0;transform:translate(-90px,42px);clip-path:inset(0 80% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes aa-join-right{from{opacity:0;transform:translate(90px,-42px);clip-path:inset(0 0 0 80%)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes opening-signature{0%,22%{opacity:0;transform:translateY(5px)}45%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes opening-mark-exit{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
@keyframes opening-aperture{0%{clip-path:inset(calc(50% - var(--opening-y)) calc(50% - var(--opening-x)));opacity:1}100%{clip-path:inset(0);opacity:1}}
@keyframes opening-top-exit{to{transform:translateY(-100%)}}
@keyframes opening-bottom-exit{to{transform:translateY(100%)}}
@keyframes opening-left-exit{to{transform:translateX(-100%)}}
@keyframes opening-right-exit{to{transform:translateX(100%)}}
@keyframes opening-seam-left{to{transform:translateX(calc(var(--opening-x) - 50vw));opacity:0}}
@keyframes opening-seam-right{to{transform:translateX(calc(50vw - var(--opening-x)));opacity:0}}
@keyframes opening-seam-top{to{transform:translateY(calc(var(--opening-y) - 50dvh));opacity:0}}
@keyframes opening-seam-bottom{to{transform:translateY(calc(50dvh - var(--opening-y)));opacity:0}}

/* Phrase masks keep each step legible as the aperture reveals the homepage. */
.hero-phrase{min-width:0}
.hero-phrase .hero-token{display:inline-block;position:relative}
.hero-phrase .applied-token{font-style:normal;color:#526443}
.applied-token::after{content:'';position:absolute;left:0;right:0;bottom:-.055em;height:.05em;background:#b8c789;transform-origin:left}
.ai-token::before,.ai-token::after{content:'AI';position:absolute;inset:0;opacity:0;pointer-events:none}
.ai-token::before{color:#a080a8;clip-path:inset(18% 0 64%)}
.ai-token::after{color:#7f9363;clip-path:inset(52% 0 27%)}
html[data-entrance=pending] [data-hero-reveal],html[data-entrance=playing] [data-hero-reveal]{opacity:0}
html[data-entrance=playing] [data-hero-reveal]{animation:hero-phrase-enter 720ms var(--reveal-at,1400ms) cubic-bezier(.22,1,.36,1) both}
html[data-entrance=playing] [data-hero-reveal=circuit]{animation-name:hero-diagram-enter}
html[data-entrance=playing] [data-hero-reveal=overline],html[data-entrance=playing] [data-hero-reveal=invitation]{animation-name:hero-support-enter}
/* Recurring motion waits for this sequence; it must not pause the entrance. */
html[data-entrance=playing] body .network-hero [data-hero-reveal],
html[data-entrance=playing] body .network-hero [data-hero-reveal]::before,
html[data-entrance=playing] body .network-hero [data-hero-reveal]::after{animation-play-state:running!important}
[data-hero-reveal=service]{--reveal-at:1670ms}
[data-hero-reveal=ai]{--reveal-at:1870ms}
[data-hero-reveal=agents]{--reveal-at:2010ms}
[data-hero-reveal=applied]{--reveal-at:2210ms}
[data-hero-reveal=prefix]{--reveal-at:2400ms}
[data-hero-reveal=market]{--reveal-at:2530ms}
.network-row-one .circuit-chain{--reveal-at:1750ms}.network-row-two .circuit-chain{--reveal-at:2040ms}.network-row-three .circuit-chain{--reveal-at:2530ms}
.network-overline{--reveal-at:1640ms}.hero-invitation,.film-bridge{--reveal-at:2590ms}
html[data-entrance=playing] .applied-token::after{animation:applied-underline 620ms 2390ms cubic-bezier(.22,1,.36,1) both}
html[data-entrance=playing] .ai-token::before{animation:ai-resolve-slice 320ms 2020ms steps(2,end) both}
html[data-entrance=playing] .ai-token::after{animation:ai-resolve-slice 350ms 2070ms steps(2,end) both reverse}
html[data-entrance=pending] .site-header,html[data-entrance=pending] .study-bar{opacity:0}
html[data-entrance=playing] .site-header,html[data-entrance=playing] .study-bar{animation:opening-navigation 650ms 1630ms cubic-bezier(.22,1,.36,1) both}
@keyframes hero-phrase-enter{from{opacity:0;transform:translateY(.42em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-.12em -.1em -.12em -.1em)}}
@keyframes hero-diagram-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hero-support-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes opening-navigation{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes applied-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ai-resolve-slice{0%,100%{opacity:0;transform:none}20%{opacity:.65;transform:translateX(-.055em)}55%{opacity:.4;transform:translateX(.04em)}80%{opacity:.2;transform:translateX(-.02em)}}
@media(max-width:760px){.brand-opening{--opening-x:88px;--opening-y:78px}.opening-mark{width:118px;height:63px}.opening-core{gap:16px}.opening-core>span{font-size:8px}.hero-phrase .hero-token{line-height:1.15}.applied-token::after{height:.055em;bottom:.01em}}
@media(prefers-reduced-motion:reduce){.brand-opening{display:none!important}[data-hero-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}.site-header,.study-bar{opacity:1!important;animation:none!important}.ai-token::before,.ai-token::after{display:none}.applied-token::after{animation:none!important}}
@media print{.brand-opening{display:none!important}[data-hero-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}.site-header,.study-bar{opacity:1!important}}