.brand-intro{position:fixed;inset:0;z-index:1000;pointer-events:none;display:grid;place-items:center;--intro-duration:2800ms;animation:intro-dismiss var(--intro-duration) linear forwards}
.brand-intro.fast{--intro-duration:2200ms}
.brand-intro-panel{position:absolute;top:0;bottom:0;width:50.1%;background:#08090a;animation:intro-panel var(--intro-duration) cubic-bezier(.76,0,.24,1) forwards}
.brand-intro-panel.left{left:0;--exit:-101%}.brand-intro-panel.right{right:0;--exit:101%}
.brand-intro-mark{position:relative;width:clamp(180px,26vw,310px);aspect-ratio:656/550;animation:intro-mark var(--intro-duration) ease-in-out forwards}
.brand-intro-mark img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.brand-intro-o{animation:intro-o var(--intro-duration) ease-out forwards}
.brand-intro-full{animation:intro-build var(--intro-duration) cubic-bezier(.3,0,.2,1) forwards}
@keyframes intro-panel{0%,82%{transform:translateX(0)}100%{transform:translateX(var(--exit))}}
@keyframes intro-mark{0%,24%{transform:translate(1.3%,-32.5%);opacity:1}62%,80%{transform:translate(0,0);opacity:1}95%,100%{transform:translateY(-10px);opacity:0}}
@keyframes intro-o{0%{opacity:0;clip-path:inset(100% 0 0)}22%,100%{opacity:1;clip-path:inset(0)}}
@keyframes intro-build{0%,27%{clip-path:circle(0% at 48.7% 82.5%);opacity:0}30%{opacity:1;clip-path:circle(0% at 48.7% 82.5%)}72%,100%{opacity:1;clip-path:circle(110% at 48.7% 82.5%)}}
@keyframes intro-dismiss{0%,99%{visibility:visible}100%{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none!important}}