/* A brief assembly of the original brand geometry; never a loading gate. */
.brand-intro{position:fixed;inset:0;z-index:200;background:transparent;isolation:isolate;display:grid;place-items:center;overflow:hidden;animation:intro-exit .15s 4.6s ease-in-out forwards}
.brand-intro svg{width:min(70vw,530px);overflow:visible}
.intro-piece{transform-box:fill-box;transform-origin:center;animation:intro-assemble .85s cubic-bezier(.16,1,.3,1) both}
.intro-piece-0{--x:0px;--y:150px;--r:-12deg}
.intro-piece-1{--x:-200px;--y:-130px;--r:-38deg;animation-delay:.12s}
.intro-piece-2{--x:200px;--y:-130px;--r:38deg;animation-delay:.24s}
.intro-piece-3{--x:0px;--y:180px;--r:0deg;animation-delay:.36s}
.intro-wordmark{animation:intro-wordmark .5s .7s ease-out both}
.intro-skip{position:absolute;right:5%;bottom:6%;padding:12px 16px;color:#d4dae1;background:transparent;border:1px solid #68717b;font-family:var(--font);font-size:13px;min-height:44px}
.intro-skip:hover{background:#ffffff12}.intro-skip:focus-visible{outline:2px solid #91B0D5;outline-offset:4px}
@keyframes intro-assemble{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.85)}to{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes intro-wordmark{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes intro-exit{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none}}

/* Version1 assembly, one extra second of hold, then a luminous outline exit. */
.brand-intro .intro-piece{animation:intro-assemble .85s var(--assemble-delay,0s) cubic-bezier(.16,1,.3,1) both,intro-drain .65s 2.55s ease-in-out forwards}
.intro-piece-1{--assemble-delay:.12s}.intro-piece-2{--assemble-delay:.24s}.intro-piece-3{--assemble-delay:.36s}
.brand-intro .intro-wordmark{animation:intro-wordmark .5s .7s ease-out both,intro-wordmark-out .7s 3.35s ease-out forwards}
.intro-outline{opacity:0;stroke-width:.8;stroke-linejoin:round;fill:none;pointer-events:none;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 2px #73baff) drop-shadow(0 0 5px #005daa);animation:intro-trace-on .65s 2.55s ease-out forwards,intro-outline-warp-fade .35s 4.25s ease-in forwards}
.intro-outline-1{stroke-dashoffset:0;--trace-end:100}.intro-outline-2{--trace-end:-100}.intro-outline-3{--trace-end:100}
@keyframes intro-drain{to{fill-opacity:0}}
@keyframes intro-trace-on{from{opacity:0}to{opacity:.9}}
@keyframes intro-trace-off{0%{opacity:.9;stroke-dashoffset:0}25%{opacity:.45}42%{opacity:.8}100%{opacity:0;stroke-dashoffset:var(--trace-end,-100)}}
@keyframes intro-wordmark-out{to{opacity:0;filter:blur(2px)}}
/* Hold at original size until the outline-only warp exit. */
.brand-intro svg{transform-origin:center;animation:intro-warp-forward 1s 3.25s cubic-bezier(.65,0,1,.45) forwards,intro-lens-out .35s 4.25s ease-out forwards}

@media(max-width:600px){.brand-intro svg{width:62vw}}

/* Accelerating fly-through with fading outline echoes. */
@keyframes intro-warp-forward{from{transform:scale(1);opacity:1;filter:blur(0)}to{transform:scale(8);opacity:1;filter:blur(0)}}
@keyframes intro-lens-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(8px)}}
@keyframes intro-outline-warp-fade{0%,45%{opacity:.9}100%{opacity:0}}
.intro-warp-trail{opacity:0;transform-box:view-box;transform-origin:50% 50%;transform:scale(var(--trail-scale));pointer-events:none;animation:intro-warp-echo .8s var(--trail-delay) ease-out forwards}
.intro-warp-edge{fill:none;stroke-width:.5;stroke-linejoin:round;filter:drop-shadow(0 0 3px #73baff)}
@keyframes intro-warp-echo{0%{opacity:0}25%{opacity:.3}100%{opacity:0}}

/* A directional midnight/cobalt wash, fading independently from the logo. */
.brand-intro::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,#061b2e 0%,#092b4b 32%,#172952 60%,#111d3a 100%);animation:intro-background-clear 1s 3.25s ease-in forwards}
@keyframes intro-background-clear{from{opacity:1}to{opacity:0}}