html.intro-active{overflow:hidden}
#brand-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:30px;border:0;background:#f6f1e7;color:#15130f;overflow:hidden}
#brand-intro:not([open]){display:none}
#brand-intro[open]{display:grid;place-items:center}
#brand-intro::backdrop{background:#f6f1e7}
.intro-lockup{text-align:center;display:flex;flex-direction:column;align-items:center}
.intro-mark{width:clamp(125px,20vw,205px);height:auto;display:block;animation:intro-mark-in .85s cubic-bezier(.16,1,.3,1) both}
.intro-city{font:600 12px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.3em;margin:12px 0 8px;animation:intro-type-in .65s .18s both}
.intro-name{font:700 clamp(38px,7vw,66px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em;animation:intro-type-in .65s .28s both}
.intro-rule{display:block;width:52px;height:3px;background:#b6ce59;margin-top:28px;transform-origin:left;animation:intro-line-in .7s .45s both}
.intro-skip{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));right:clamp(22px,5vw,70px);background:transparent;border:1px solid #15130f40;border-radius:3px;padding:10px 15px;color:#15130f;font-size:12px}
#brand-intro.intro-leaving{animation:intro-screen-out .55s cubic-bezier(.76,0,.24,1) both;pointer-events:none}
.intro-replay{background:transparent;color:inherit;font-size:12px;padding:8px 0;text-decoration:underline;text-underline-offset:4px;display:block}
@keyframes intro-mark-in{from{opacity:0;transform:translateY(18px) scale(.84)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes intro-type-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-line-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-screen-out{to{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){#brand-intro *,#brand-intro.intro-leaving{animation:none!important}}