/* Shared with the Founder Letter announcement. */
:root{--page-veil:var(--brand-charcoal,#202020);--page-ease:cubic-bezier(.76,0,.24,1);--page-settle:cubic-bezier(.22,1,.36,1)}
.page-transition{display:none;position:fixed;inset:0;z-index:2147483646;overflow:hidden;pointer-events:auto;isolation:isolate}
html[data-page-navigation] .page-transition{display:block}
/* Paint immediately from the head, before the incoming body's overlay exists. */
html[data-page-navigation=covered]::before{content:'';position:fixed;inset:0;z-index:2147483645;background:var(--page-veil);pointer-events:auto}
.page-transition__panel{--panel-order:0;position:absolute;inset:0 auto 0 calc(var(--panel-order)*100%/3);width:calc(100%/3 + 1px);background:var(--page-veil);will-change:transform}
.page-transition__panel:nth-child(2){--panel-order:1}
.page-transition__panel:nth-child(3){--panel-order:2}
.page-transition__mark{position:absolute;z-index:1;left:50%;top:50%;width:76px;aspect-ratio:530/338;translate:-50% -50%;color:#f5f5f5;will-change:transform,opacity}
.page-transition__mark svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.page-transition__mark path{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
/* Three ascending panels and a short, staggered assembly of the actual logo. */
html[data-page-navigation=covering] .page-transition__panel{animation:page-panel-in 440ms var(--page-ease) calc(var(--panel-order)*40ms) both}
html[data-page-navigation=covering] .page-transition__mark path:nth-child(1){animation:page-ring-in 200ms var(--page-settle) 280ms both}
html[data-page-navigation=covering] .page-transition__mark path:nth-child(2){animation:page-arc-in 200ms var(--page-settle) 300ms both}
html[data-page-navigation=covering] .page-transition__mark path:nth-child(3){animation:page-stem-in 200ms var(--page-settle) 320ms both;transform-origin:center bottom}
/* The assembled frame remains identical across the native document change. */
html[data-page-navigation=covered] .page-transition__panel,html[data-page-navigation=covered] .page-transition__mark path{transform:none;opacity:1}
html[data-page-navigation=covered] .title-enter{animation-play-state:paused}
/* Let the mark leave first, then lift the panels in the same visual rhythm. */
html[data-page-navigation=revealing] .page-transition__mark{animation:page-mark-out 220ms var(--page-settle) both}
html[data-page-navigation=revealing] .page-transition__panel{animation:page-panel-out 620ms var(--page-ease) calc(90ms + var(--panel-order)*40ms) both}
html[data-page-navigation=revealing] :is(.about-hero h1,.impact-hero h1,.chain-hero-content h1){animation:page-heading 580ms var(--page-settle) 240ms both}
@keyframes page-panel-in{from{transform:translate3d(0,101%,0)}to{transform:translate3d(0,0,0)}}
@keyframes page-panel-out{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-101%,0)}}
@keyframes page-ring-in{from{opacity:0;transform:translateX(-56px) scale(.72)}to{opacity:1;transform:none}}
@keyframes page-arc-in{from{opacity:0;transform:translateY(58px)}to{opacity:1;transform:none}}
@keyframes page-stem-in{from{opacity:0;transform:translateY(30px) scaleY(.18)}to{opacity:1;transform:none}}
@keyframes page-mark-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-9px) scale(.96)}}
@keyframes page-heading{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@view-transition{navigation:none}
@media(max-width:650px){.page-transition__mark{width:64px}}
@media(prefers-reduced-motion:reduce){
  html[data-page-navigation] .page-transition,html[data-page-navigation]::before{display:none;animation:none}
  html[data-page-navigation=revealing] :is(.about-hero h1,.impact-hero h1,.chain-hero-content h1){animation:none}
}
@media print{.page-transition,html[data-page-navigation]::before{display:none!important}}