#brand-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: #fff8ee; color: #291b13; opacity: 1; transition: opacity .4s ease; }
.intro-halo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 47%, #ffe2c1 0, #fff3e5 40%, #fffaf5 75%); }
.intro-halo::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#d88d542c 1px, transparent 1px); background-size: 24px 24px; }
.intro-center { position: relative; text-align: center; }
.intro-wordmark { display: flex; align-items: center; justify-content: center; font: 900 clamp(64px, 12vw, 142px)/1.25 "Arial Black", "Segoe UI", sans-serif; letter-spacing: -.065em; }
.intro-word { display: inline-block; box-sizing: content-box; width: 0; flex-shrink: 0; overflow: visible; opacity: 0; white-space: nowrap; line-height: 1.45; padding: .1em .08em; margin: -.1em -.08em; filter: blur(4px); transition: width .7s cubic-bezier(.22,1,.36,1), opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .55s ease; }
.intro-py { text-align: right; transform: translateX(.25em); }
.intro-jun { text-align: left; transform: translateX(-.25em); }
.intro-slash { position: relative; display: inline-flex; width: .57em; height: 1.2em; align-items: center; justify-content: center; flex-shrink: 0; }
.intro-bar { position: absolute; width: .065em; height: .83em; border-radius: 1px; background: linear-gradient(#ff9b32, #ef4d16); transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .18s ease; }
.intro-glyph { opacity: 0; color: #f46625; transform: translateX(-.025em); transition: opacity .18s ease; }
.intro-caption { margin: 16px 0 0; color: #a3653d; font: 700 10px/1.8 Consolas, monospace; letter-spacing: .27em; opacity: 0; transform: translateY(7px); transition: opacity .55s ease .2s, transform .55s ease .2s; }
#brand-intro[data-phase="slash"] .intro-bar { transform: rotate(19deg); }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-bar { transform: rotate(19deg); opacity: 0; }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-glyph { opacity: 1; }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-py { width: var(--intro-py-width, 1.4em); opacity: 1; }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-jun { width: var(--intro-jun-width, 1.9em); opacity: 1; }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-word { transform: none; filter: none; }
#brand-intro:is([data-phase="wordmark"],[data-phase="leaving"]) .intro-caption { opacity: 1; transform: none; }
#brand-intro[data-phase="leaving"] { opacity: 0; pointer-events: none; }
.intro-skip { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); padding: 11px 15px; color: #795135; background: #fffaf2; border: 1px solid #e8cdb5; border-radius: 9px; font: 600 12px "Segoe UI", sans-serif; cursor: pointer; }
.intro-skip span { display: inline-block; margin-left: 12px; font: 10px Consolas, monospace; color: #9c785a; }
.intro-skip:focus-visible { outline: 2px solid #f46625; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #brand-intro, #brand-intro * { transition: none !important; animation: none !important; } }