/* The scene fills the viewport; the cast and logo fit independently of its crop. */
#intro{isolation:isolate;overflow:hidden;min-height:0;padding:0;background:#031625}
#intro .title-art{inset:-2%;background-image:url('../assets/ui/title-city-v2.png');background-position:center;animation:title-drift 22s ease-in-out infinite alternate;will-change:transform}
#intro .title-shade{background:linear-gradient(180deg,#00132480,transparent 35%,transparent 82%,#00121c55);z-index:2}
.title-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.searchlight{position:absolute;bottom:15%;width:24vw;height:115vh;transform-origin:50% 100%;clip-path:polygon(49.7% 100%,0 0,100% 0,50.3% 100%);background:linear-gradient(0deg,#dcf7ff9c,#8cceff28 60%,transparent);mix-blend-mode:screen;opacity:.36;animation:beam-sweep 13s ease-in-out infinite alternate}
.beam-one{left:5%;--from:-25deg;--to:22deg}.beam-two{right:2%;--from:25deg;--to:-30deg;animation-delay:-7s;animation-duration:17s}
.beam-three{left:35%;width:15vw;opacity:.2;--from:-30deg;--to:38deg;animation-duration:19s;animation-delay:-12s}.beam-four{right:22%;width:18vw;opacity:.22;--from:34deg;--to:-15deg;animation-delay:-4s;animation-duration:15s}
.title-haze{position:absolute;inset:35% -20% -15%;background:radial-gradient(ellipse at 28% 70%,#3294ba2e,transparent 50%),radial-gradient(ellipse at 72% 80%,#db347f24,transparent 48%);filter:blur(16px);animation:haze-drift 18s ease-in-out infinite alternate}
.city-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 12% 58%,#e7308030,transparent 23%),radial-gradient(ellipse at 87% 48%,#ffb65c26,transparent 25%);mix-blend-mode:screen;animation:city-breathe 6s ease-in-out infinite alternate}
.title-motes{position:absolute;inset:0}.title-motes i{position:absolute;left:var(--x);bottom:-8px;width:var(--size);height:var(--size);border-radius:50%;background:#ffd8a6;box-shadow:0 0 9px #ff9a59;opacity:0;animation:mote-rise var(--duration) linear var(--delay) infinite}
.title-brand{position:absolute;z-index:4;top:2dvh;left:50%;right:auto;transform:translateX(-50%);width:min(64vw,78dvh);text-align:center;pointer-events:none}
.title-brand h1{margin:0;line-height:0}.title-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 13px #00111c99)}
.title-brand p{margin:calc(1.1dvh - 12px) auto 0;color:#fff0ce;font:800 clamp(11px,1.5vw,21px)/1.3 Arial,sans-serif;letter-spacing:clamp(1px,.22vw,3.6px);text-shadow:0 2px 3px #490b22}
.slogan-ribbon{position:relative;isolation:isolate;width:max-content;max-width:calc(100vw - 64px);filter:drop-shadow(0 5px 5px #00111b80)}
.slogan-ribbon span{position:relative;display:block;padding:6px clamp(14px,2vw,30px);border-top:1px solid #efc88b;border-bottom:1px solid #b68458;background:linear-gradient(180deg,#bd315c,#8b1c43);box-shadow:inset 0 2px #ffe8b51a,inset 0 -2px #4a102e55}
.slogan-ribbon::before,.slogan-ribbon::after{content:'';position:absolute;z-index:-1;top:7px;bottom:-7px;width:34px;background:linear-gradient(180deg,#791737,#a0274e);border-block:1px solid #bb885e}
.slogan-ribbon::before{left:-23px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,23% 50%)}
.slogan-ribbon::after{right:-23px;clip-path:polygon(0 0,100% 0,77% 50%,100% 100%,0 100%)}
.title-cast{position:absolute;z-index:3;bottom:1dvh;left:50%;transform:translateX(-50%);height:68dvh;width:auto;max-width:94vw;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 8px 12px #00101960)}
.title-action{position:absolute;z-index:5;top:58%;left:50%;transform:translate(-50%,-50%);width:clamp(260px,27vw,450px);max-width:83vw;text-align:center}
#intro .play-button{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:24px;width:100%;min-height:clamp(64px,10dvh,108px);padding:12px 25px;border:2px solid #ff91aa;border-radius:18px;background:linear-gradient(165deg,#e72964,#b20c40 65%,#870c32);box-shadow:inset 0 2px 0 #ffb5c357,inset 0 -4px 0 #65082666,0 0 0 4px #6f0c304d,0 0 26px #f0206873,0 10px 30px #00132170;color:#fff0ce;font:900 clamp(34px,4.5vw,67px)/1 Arial,sans-serif;letter-spacing:3px;text-shadow:0 3px 2px #720a33;transition:transform .2s,box-shadow .2s,filter .2s}
#intro .play-button svg{width:.45em;height:.45em;fill:currentColor}
#intro .play-button::after{content:'';position:absolute;inset:-80%;z-index:-1;background:linear-gradient(115deg,transparent 43%,#fff6 49%,transparent 55%);transform:translateX(-60%);animation:button-sheen 7s ease-in-out infinite}
#intro .play-button:hover:not(:disabled){transform:scale(1.035);filter:brightness(1.12);box-shadow:inset 0 2px 0 #ffb5c357,0 0 40px #f0206890,0 10px 30px #00132170}
#intro .play-button:active:not(:disabled){transform:scale(.98)}
#intro #load-status{position:absolute;left:0;right:0;margin-top:12px;color:#fff0ce;font:12px Arial;text-shadow:0 1px 3px #001019}



.cast-mode{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--mint)}.cast-best{font:11px Arial;color:var(--mint)}
@keyframes title-drift{from{transform:scale(1) translateX(-.4%)}to{transform:scale(1.035) translateX(.4%)}}
@keyframes beam-sweep{from{transform:rotate(var(--from))}to{transform:rotate(var(--to))}}
@keyframes haze-drift{from{transform:translateX(-4%);opacity:.5}to{transform:translateX(4%);opacity:1}}
@keyframes city-breathe{from{opacity:.35}to{opacity:.95}}
@keyframes mote-rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:.6}85%{opacity:.3}100%{opacity:0;transform:translate(35px,-78vh)}}
@keyframes button-sheen{0%,62%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
body:not([data-screen=intro]) #intro *,html.title-suspended #intro *{animation-play-state:paused!important}
html.reduced-motion #intro *,html.reduced-motion #intro *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#intro *,#intro *::after{animation:none!important;transition:none!important}}
@media(max-aspect-ratio:4/5){
 .title-brand{top:7dvh;width:94vw}.title-brand p{margin:14px auto 0;font-size:clamp(10px,2.7vw,17px);letter-spacing:1.2px}
 .title-cast{bottom:2dvh;width:96vw;height:auto;max-height:57dvh;max-width:96vw}
 .title-action{top:45%;bottom:auto;transform:translate(-50%,-50%);width:72vw}
 #intro .play-button{font-size:42px;min-height:72px}.searchlight{width:40vw}
}
@media(max-height:500px) and (min-aspect-ratio:4/5){.title-brand{top:1dvh;width:73dvh}.title-brand p{font-size:10px;margin-top:4px}.title-cast{height:66dvh}.title-action{width:230px;top:58%}#intro .play-button{min-height:54px;font-size:32px;border-radius:12px}}