/* Three scenes, each with its own silhouette. All motion remains transform-only. */
.cinema-scene,.company-art,.home-scene{position:relative;margin:0;isolation:isolate}
.cinema-scene{z-index:2;padding:0;border:0;background:none;box-shadow:none;color:var(--cream)}
.cinema-scene .reel-screen{border-radius:5px 44px 5px 5px;border:1px solid #e8e2ff38;box-shadow:0 28px 100px #08081655;aspect-ratio:16/9}
.cinema-scene figcaption{display:flex;align-items:center;gap:12px;padding:19px 0;font-size:12px;font-weight:700;letter-spacing:1.4px}
.cinema-scene .reel-time{margin-left:auto;color:var(--muted);font-weight:400;letter-spacing:.8px}
.cinema-scene .view-dot{width:6px;height:6px;box-shadow:0 0 13px #e5f39466}
.cinema-scene .reel-toggle{font-size:14px;min-height:44px;left:22px;bottom:22px}
.cinema-scene .reel-expand{width:44px;height:44px;right:22px;bottom:22px}
.explore:before{content:'';position:absolute;inset:4% -15% -15% 20%;background:radial-gradient(ellipse at 65% 55%,#7852a52e,transparent 66%);pointer-events:none}
.company-art{height:650px;z-index:2;pointer-events:none}
.stage-halo{position:absolute;inset:2% -6% 8% 0;border:1px solid #a8bfff32;border-radius:50%;transform:rotate(-17deg);background:radial-gradient(ellipse,#9c87e719,transparent 68%);z-index:-1}
.neighbor-stage{position:absolute;inset:0 1% 10% 19%;margin:0}
.neighbor-stage>img{display:block;width:100%;height:91%;object-fit:cover;object-position:50% 50%;border-radius:48% 48% 3px 3px;border:1px solid #c1c7ec3b}
.neighbor-stage figcaption{padding:18px 0 0;text-align:right;font-size:12px;letter-spacing:1.5px;color:#d1cce5;font-weight:700}
.company-art .neighbor-cast,.enhanced-ascent .company-art .neighbor-cast{left:0;top:31%;width:55%;height:64%}
.company-art .neighbor-cast .dj{inset:0;width:100%;height:100%;transform:rotate(-4deg)}
.company-art .neighbor>span{left:57%;bottom:1%;font-size:clamp(25px,3vw,48px);line-height:1;transform:rotate(4deg);text-shadow:0 3px 20px #101726}
.company-art .neighbor>span i{max-width:none;white-space:nowrap;font:400 14px/1.5 Arial;letter-spacing:0;color:var(--cream);margin-top:10px}
.home-scene{height:760px;z-index:2;pointer-events:none;transform:rotate(-3deg)}
.home-diorama{position:absolute;inset:0;margin:0}
.home-diorama>img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 24px 30px #070e2030)}
.home-diorama figcaption{position:absolute;left:18%;bottom:8%;font:700 12px/1.5 Arial;letter-spacing:1.8px;color:var(--lime);transform:rotate(3deg)}
.home-orbit{position:absolute;left:3%;top:20%;width:97%;height:63%;border:1px solid #cfdfa42d;border-radius:50%;transform:rotate(-22deg);z-index:-1}
.home-scene .home-pop,.enhanced-ascent .home-scene .home-pop{left:71%;top:49%;width:25%;height:35%}
.home-scene .home-pop .neighbor>span{left:35%;bottom:-27px;font-size:25px;transform:rotate(3deg)}
.home-scene .home-pop .neighbor>span i{display:none}
/* Large screens: a film to the right, a stage to the right, then a world to the left. */
@media(min-width:701px){
 .enhanced-ascent .explore .chapter-copy{left:7%;top:24%;width:27%;max-width:410px}
 .enhanced-ascent .explore h2{font-size:clamp(57px,5.6vw,104px);letter-spacing:-2.5px}
 .enhanced-ascent .explore .chapter-description{max-width:25ch}
 .enhanced-ascent .cinema-scene{position:absolute;left:auto;right:5%;top:25%;width:min(61vw,calc(var(--view)*1.03));border-radius:0;pointer-events:auto}
 .enhanced-ascent .company .chapter-copy{left:8%;top:24%;width:37%}
 .enhanced-ascent .company-art{position:absolute;left:49%;top:13%;width:46%;height:72%}
 .enhanced-ascent .home .chapter-copy{left:62%;top:25%;width:31%}
 .enhanced-ascent .home h2{font-size:clamp(57px,5.6vw,102px)}
 .enhanced-ascent .home-scene{position:absolute;left:-2%;top:12%;width:64%;height:85%}
 .enhanced-ascent .home-diorama figcaption{left:19%;bottom:5%}
 body:not(.enhanced-ascent) .explore,body:not(.enhanced-ascent) .company,body:not(.enhanced-ascent) .home{min-height:850px;display:grid;grid-template-columns:36% 60%;gap:4%;align-items:center;padding:100px 7%}
 body:not(.enhanced-ascent) .explore .chapter-copy,body:not(.enhanced-ascent) .company .chapter-copy,body:not(.enhanced-ascent) .home .chapter-copy{width:auto;max-width:none;margin:0}
 body:not(.enhanced-ascent) .home{grid-template-columns:58% 38%}
 body:not(.enhanced-ascent) .home .chapter-copy{grid-column:2;grid-row:1}
 body:not(.enhanced-ascent) .home-scene{grid-column:1;grid-row:1;height:min(65vw,760px)}
 body:not(.enhanced-ascent) .company-art{height:min(52vw,660px)}
}
@media(min-width:701px) and (max-height:720px){
 .enhanced-ascent .explore .chapter-copy,.enhanced-ascent .company .chapter-copy,.enhanced-ascent .home .chapter-copy{top:20%}
 .enhanced-ascent .cinema-scene{top:24%;width:min(61vw,calc(var(--view)*1.02))}
 .enhanced-ascent .company-art{height:73%;top:11%}
 .enhanced-ascent .home-scene{height:89%;top:7%}
 .company-art .neighbor>span i{font-size:12px}
}
@media(max-width:1000px) and (min-width:701px){
 .enhanced-ascent .explore h2,.enhanced-ascent .home h2{font-size:58px}
 .enhanced-ascent .explore .chapter-copy{width:31%;left:6%;top:19%}
 .enhanced-ascent .cinema-scene{width:57%;right:4%;top:35%}
 .enhanced-ascent .company .chapter-copy{width:39%;left:7%}
 .company-art .neighbor>span{font-size:28px}
 .company-art .neighbor>span i{display:none}
 .enhanced-ascent .home .chapter-copy{left:60%;width:35%}
}
/* Narrow screens: film stays uncropped; the stage and tiny world sit below the copy. */
@media(max-width:700px){
 .enhanced-ascent .explore .chapter-copy,.enhanced-ascent .company .chapter-copy,.enhanced-ascent .home .chapter-copy{left:8%;top:9%;width:84%}
 .enhanced-ascent .cinema-scene{position:absolute;left:5%;top:49%;width:90%;border-radius:0;pointer-events:auto}
 .cinema-scene .reel-screen{border-radius:3px 30px 3px 3px}
 .cinema-scene figcaption{display:flex;padding:14px 2px;font-size:11px;letter-spacing:.7px;gap:8px}
 .cinema-scene .reel-time{font-size:11px;letter-spacing:0}
 .cinema-scene .reel-toggle{left:12px;bottom:12px;font-size:12px;padding:9px 13px}
 .cinema-scene .reel-expand{right:12px;bottom:12px}
 .enhanced-ascent .company-art{position:absolute;left:15%;top:45%;width:78%;height:43%}
 .company-art .neighbor-cast,.enhanced-ascent .company-art .neighbor-cast{left:-6%;top:32%;width:53%;height:65%}
 .company-art .neighbor>span,.enhanced-ascent .company-art .neighbor>span{left:65%;bottom:0;font-size:28px}
 .company-art .neighbor>span i{display:none}
 .neighbor-stage{left:16%;right:0;bottom:8%}
 .neighbor-stage figcaption{font-size:10px;letter-spacing:.8px;padding-top:12px}
 .enhanced-ascent .home-scene{position:absolute;left:-3%;top:40%;width:106%;height:53%}
 .home-scene .home-pop,.enhanced-ascent .home-scene .home-pop{left:72%;top:51%;width:22%;height:35%}
 .home-scene .home-pop .neighbor>span,.enhanced-ascent .home-scene .home-pop .neighbor>span{font-size:20px;bottom:-20px;left:28%}
 .home-diorama figcaption,.enhanced-ascent .home-diorama figcaption{left:14%;bottom:4%;font-size:10px;letter-spacing:1px}
 body:not(.enhanced-ascent) .explore,body:not(.enhanced-ascent) .company,body:not(.enhanced-ascent) .home{min-height:0;padding:90px 8% 75px}
 body:not(.enhanced-ascent) .explore .chapter-copy,body:not(.enhanced-ascent) .company .chapter-copy,body:not(.enhanced-ascent) .home .chapter-copy{margin:0 0 40px;width:100%;max-width:none}
 body:not(.enhanced-ascent) .cinema-scene{width:110%;margin-left:-5%}
 body:not(.enhanced-ascent) .company-art{height:110vw;width:100%;margin-top:30px}
 body:not(.enhanced-ascent) .home-scene{width:118%;height:112vw;margin-left:-9%;margin-top:-10px}
}
@media(max-width:700px) and (max-height:680px){
 .enhanced-ascent .explore .chapter-copy,.enhanced-ascent .company .chapter-copy,.enhanced-ascent .home .chapter-copy{top:7%}
 .enhanced-ascent .cinema-scene{top:52%;width:min(90vw,calc(var(--view)*.675));left:5%}
 .enhanced-ascent .company-art{top:49%;height:38%}
 .enhanced-ascent .home-scene{top:44%;height:49%}
}

@media(max-width:700px){
 body:not(.enhanced-ascent) .company-art .neighbor-cast{left:-6%;top:32%;width:53%;height:65%}
 body:not(.enhanced-ascent) .home-scene .home-pop{left:72%;top:51%;width:22%;height:35%}
}

/* Keep Nova's signature under the character, clear of the photograph caption. */
.company-art .neighbor>span,.enhanced-ascent .company-art .neighbor>span{top:100%;bottom:auto;left:50%;margin-top:12px;transform:translateX(-50%) rotate(4deg);text-align:center;font-size:clamp(24px,2.4vw,34px)}
.company-art .neighbor>span i{margin-top:7px}
/* Text-only video controls stay clear in both playback states. */
.gameplay-reel.is-playing .reel-action{position:static;width:auto;height:auto;overflow:visible;clip:auto}
@media(max-width:700px){.company-art .neighbor>span,.enhanced-ascent .company-art .neighbor>span{font-size:25px;margin-top:10px}}