:root{--brand-intro-ease:cubic-bezier(.23,1,.32,1)}
.brand-intro{display:none;position:fixed;inset:0;z-index:1000;background:#252622;align-items:center;justify-content:center;pointer-events:none}
.brand-intro-active .brand-intro{display:flex;animation:brand-intro-safety 250ms linear 5200ms forwards}
.brand-intro-lockup{width:min(300px,65vw);display:flex;align-items:center;flex-direction:column;gap:0;direction:ltr}
.brand-intro-symbol{width:100%;overflow:hidden}.brand-intro-symbol img{display:block;width:100%;height:auto;animation:brand-symbol-in 500ms var(--brand-intro-ease) both}
.brand-intro-lettering{width:100%;overflow:hidden;animation:brand-lettering-in 650ms var(--brand-intro-ease) 180ms both}.brand-intro-lettering img{display:block;width:100%;height:auto}
.brand-intro-leaving .brand-intro{opacity:0;transition:opacity 250ms var(--brand-intro-ease)}
@keyframes brand-symbol-in{from{opacity:0;transform:translateY(12%) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes brand-lettering-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes brand-intro-safety{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.brand-intro-symbol img{animation:brand-gentle-in 200ms linear both}.brand-intro-lettering{animation:brand-gentle-in 200ms linear 80ms both}.brand-intro-leaving .brand-intro{transition-duration:150ms}@keyframes brand-gentle-in{from{opacity:0}to{opacity:1}}}