.intro-screen { display: none; }
.intro-playing .intro-screen { position: fixed; display: grid; place-items: center; inset: 0; z-index: 1000; overflow: hidden; background: #f8f6f0; pointer-events: none; animation: intro-exit .35s 1.15s ease-in-out both; }
.intro-playing { overflow: hidden; }
.intro-brand { position: relative; display: grid; justify-items: center; gap: 32px; animation: intro-brand-in .5s .05s both; mix-blend-mode: multiply; }
.intro-logo { position: relative; display: block; width: 154px; height: 140px; overflow: hidden; }
.intro-logo img { position: absolute; width: 273.5%; height: auto; max-width: none; left: -90.5%; top: -47%; }
.intro-tagline { font-size: 9px; letter-spacing: .2em; color: #947544; }
.intro-skyline { position: absolute; bottom: 0; width: clamp(240px, 30vw, 500px); height: 80vh; }
.intro-skyline--left { left: -25px; }
.intro-skyline--right { right: -25px; transform: scaleX(-1); }
.intro-skyline svg { width: 100%; height: 100%; overflow: visible; }
.intro-skyline--right svg { height: 90%; position: absolute; bottom: 0; }
.intro-screen .tower { animation: intro-building-rise 1s cubic-bezier(.19, 1, .22, 1) both; }
.intro-screen .tower--back { opacity: .45; animation-delay: .05s; }
.intro-screen .tower--middle { opacity: .7; animation-delay: .08s; }
.intro-screen .tower--front { animation-delay: .12s; }
.intro-skyline--right .tower--back { animation-delay: .06s; }
.intro-skyline--right .tower--middle { animation-delay: .1s; }
.intro-skyline--right .tower--front { animation-delay: .15s; }
.intro-screen .building-front { fill: #eeeadf; stroke: #b9ad91; stroke-width: .8; }
.intro-screen .building-side { fill: #ddd7c6; stroke: #b9ad91; stroke-width: .8; }
.intro-screen .building-roof { fill: #faf7ed; stroke: #b9ad91; stroke-width: .8; }
.intro-screen .building-floor { stroke: #c8bda4; stroke-width: .7; }
.intro-screen .building-window { fill: #d3cbb8; opacity: .55; }
.intro-screen .building-window--lit { fill: #c3a66d; opacity: .48; }
.intro-screen .building-detail { fill: none; stroke: #b9a578; stroke-width: 1; }
.intro-ground { position: absolute; bottom: 0; inset-inline: 0; height: 1px; background: #b9ad91; }
@keyframes intro-building-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes intro-brand-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-exit { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (max-width: 700px) {
    .intro-logo { width: 126px; height: 115px; }
    .intro-tagline { font-size: 7px; letter-spacing: .12em; }
    .intro-skyline { width: 210px; height: 54vh; }
    .intro-skyline--left { left: -100px; }
    .intro-skyline--right { right: -100px; }
}
@media (prefers-reduced-motion: reduce) { .intro-playing .intro-screen { display: none; animation: none; } .intro-playing { overflow: auto; } .intro-screen * { animation: none !important; } }