/* Art pass 03: one stage for illustration and typography. Original assets stay intact. */
.actor-shell{position:absolute;inset:0;z-index:1;pointer-events:none;transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.actor-shell .character{z-index:auto;animation:portrait-breathe 6.5s ease-in-out infinite;will-change:translate,rotate}
.stage[data-scene=mondstadt] .character{right:-3%;height:110%;animation-duration:5.6s}
.stage[data-scene=inazuma] .character{right:-17%;height:105%;animation-duration:7.4s}
.stage[data-scene=sumeru] .character{right:-5%;height:105%;animation-name:portrait-float}
.stage[data-scene=natlan] .character{right:-8%;height:112%;animation-duration:5.8s}
.stage[data-scene=fontaine] .character{left:-19%;height:109%;animation-duration:6s}
.stage[data-scene=liyue] .character{left:-18%;height:111%;animation-duration:8s}
.scene-content{z-index:2;max-width:none;padding-left:7vw;width:59%;pointer-events:none}
.scene-content button,.scene-content summary,.scene-content a{pointer-events:auto}
.scene-content h1{text-shadow:0 3px 26px var(--scene)}
.scene-content .lead,.scene-content .highlight-line,.scene-content .message-line{text-shadow:0 2px 12px var(--scene),0 0 22px var(--scene)}
.reverse .scene-content{margin-left:47%;width:50%;padding-right:4vw}
.scene-signature{z-index:1;opacity:.65}
.character-cue{left:auto!important;right:4vw;top:auto!important;bottom:24px;transform:none;background:transparent;border:0;border-bottom:1px solid var(--accent);box-shadow:none;padding:8px 0;z-index:4}
.character-cue:before{content:'↻';font-size:17px}
.scene-signature{bottom:83px}
.highlight-line,.message-line{position:relative;overflow:visible;clip-path:none!important}
.companion-cameo{clip-path:none!important}
.companion-cameo,.reverse .companion-cameo{position:absolute;top:auto;left:auto;right:-184px;bottom:-48px;width:240px;height:244px;margin:0;border:0;background:none;z-index:3;pointer-events:none}
.companion-cameo img,.reverse .companion-cameo img{height:258px;right:-72px;bottom:0;animation:companion-sway 4.8s ease-in-out infinite;transform-origin:50% 88%;mask-image:linear-gradient(180deg,black 86%,transparent 100%)}
.companion-cameo figcaption{display:none}
.stage[data-scene=inazuma] .highlight-line{max-width:415px;padding-right:40px;margin-top:32px}
.stage[data-scene=fontaine] .message-line{max-width:365px;margin-top:29px;padding-right:35px}
.stage[data-scene=fontaine] .companion-cameo{right:-182px;bottom:-73px;height:250px}
.stage[data-scene=fontaine] .companion-cameo img{height:285px;right:-71px;animation-delay:-1.5s}
.stage[data-scene=sumeru] .directory{max-width:470px}
.stage[data-scene=sumeru] .slime-friend{left:auto;right:-61px;top:auto;bottom:-17px;width:100px}
.stage[data-scene=sumeru] .slime-friend img{animation:slime-breathe 3s ease-in-out infinite;transform-origin:center bottom}
.stage[data-scene=sumeru] .slime-note{right:14px;bottom:110px;top:auto;left:auto}
.ending{min-height:575px}
.ending .backdrop{inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:.55;filter:blur(18px)}
.ending .scene-shade{background:linear-gradient(180deg,var(--scene) 0%,transparent 58%,var(--scene) 100%);z-index:-3}
.ensemble-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:-2;mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent),linear-gradient(180deg,transparent,black 13%,black 85%,transparent);mask-composite:intersect;pointer-events:none}
.ending .scene-content{width:100%;height:100%;position:absolute;inset:0;text-align:center;padding:28px 5vw 25px;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,var(--scene) 0%,color-mix(in srgb,var(--scene) 90%,transparent) 15%,color-mix(in srgb,var(--scene) 45%,transparent) 38%,transparent 65%)}
.ending .eyebrow{position:absolute;top:24px;left:5vw;justify-content:flex-start;text-shadow:0 2px 8px var(--scene)}
.ending h1{font-size:clamp(36px,4.1vw,63px);line-height:1.22;letter-spacing:3px;text-shadow:0 3px 22px var(--scene)}
.ending h1 br{display:none}
.ending .lead{font-size:16px;line-height:1.85;margin-top:18px;max-width:900px}
.ending .lead br{display:none}
.ending .closing-name{margin-top:17px;font-size:15px;letter-spacing:6px}
.ending:after{display:none}
.ending .ensemble-source{position:absolute;right:20px;top:24px;z-index:3;font-size:10px;color:var(--muted);text-shadow:0 1px 8px var(--scene);opacity:.8}
@keyframes portrait-breathe{0%,100%{translate:0 3px;rotate:-.45deg}50%{translate:0 -9px;rotate:.5deg}}
@keyframes portrait-float{0%,100%{translate:0 5px;rotate:-.6deg}50%{translate:0 -12px;rotate:.6deg}}
@keyframes companion-sway{0%,100%{translate:0 3px;rotate:-1deg}50%{translate:-3px -6px;rotate:1deg}}
@keyframes slime-breathe{0%,100%{scale:1 1}50%{scale:1.05 .94}}
.transition-cover .character,.transition-cover .companion-cameo img,.transition-cover .slime-friend img{animation-play-state:paused!important}
body.page-hidden .actor-shell .character,body.page-hidden .companion-cameo img,body.page-hidden .slime-friend img{animation-play-state:paused}
body.simple-motion .actor-shell{transform:none;transition:none}
body.simple-motion .actor-shell .character,body.simple-motion .companion-cameo img,body.simple-motion .slime-friend img{animation:none;will-change:auto}
@media(min-width:1101px) and (max-height:810px){.ending h1{font-size:44px}.ending .scene-content{padding-bottom:22px}.companion-cameo,.reverse .companion-cameo{bottom:-56px}.companion-cameo img{height:230px}.stage[data-scene=fontaine] .companion-cameo img{height:242px}}
@media(max-width:1100px){
 .stage:not(.gate):not(.ending){padding-top:234px}
 .actor-shell{z-index:0}
 .stage .actor-shell .character{left:auto;right:calc(50% - 300px);height:430px;top:-15px;bottom:auto}
 .stage[data-scene=inazuma] .actor-shell .character{right:calc(50% - 360px);height:415px}
 .stage[data-scene=liyue] .actor-shell .character{right:calc(50% - 270px)}
 .scene-content,.reverse .scene-content{width:100%;margin:0;padding:20px 25px 73px}
 .scene-shade,.reverse .scene-shade{z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 150px,color-mix(in srgb,var(--scene) 70%,transparent) 260px,var(--scene) 420px)}
 .scene-content h1{text-shadow:0 2px 18px var(--scene),0 1px 6px var(--scene)}
 .character-cue{top:auto!important;left:auto!important;right:25px;bottom:19px;max-width:90%;font-size:11px}
 .highlight-line .thought{display:block}
 .highlight-line>br{display:none}
 .stage[data-scene=inazuma] .highlight-line{max-width:100%;padding-right:135px;min-height:138px}
 .companion-cameo,.reverse .companion-cameo{top:auto;left:auto;right:-75px;bottom:-39px;width:160px;height:204px}
 .companion-cameo img,.reverse .companion-cameo img{height:180px;right:-64px;bottom:0}
 .stage[data-scene=fontaine] .message-line{padding-right:114px;max-width:100%;min-height:95px}
 .stage[data-scene=fontaine] .companion-cameo{right:-36px;bottom:-40px;height:208px}
 .stage[data-scene=fontaine] .companion-cameo img{height:224px;right:-74px}
 .stage[data-scene=sumeru] .directory{margin-right:25px;max-width:none;padding-right:12px}
 .stage[data-scene=sumeru] .slime-friend{width:73px;right:-40px;bottom:-35px}
 .stage[data-scene=sumeru] .slime-note{right:0;bottom:80px}
 .ending{height:calc(100svh - 170px);min-height:640px;padding:0}
 .ending .backdrop{inset:0;width:100%;height:100%;background-size:cover;opacity:.48}
 .ending .ensemble-art{inset:74px 0 auto;height:auto;aspect-ratio:16/9;width:100%;object-fit:contain;mask-image:linear-gradient(180deg,transparent,black 8%,black 85%,transparent)}
 .ending .scene-shade{background:none;z-index:-3}
 .ending .scene-content{position:relative;min-height:640px;height:100%;padding:0 25px 65px;background:linear-gradient(0deg,var(--scene),color-mix(in srgb,var(--scene) 65%,transparent) 38%,transparent 70%)}
 .ending .eyebrow{top:29px;left:25px;font-size:11px}
 .ending h1{font-size:clamp(31px,7.8vw,46px);line-height:1.48;letter-spacing:1px}
 .ending h1 br,.ending .lead br{display:block}
 .ending .lead{font-size:15px;line-height:2;margin-top:24px}
 .ending .closing-name{margin-top:24px}
 .ending .ensemble-source{top:52px;left:25px;right:auto;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.actor-shell{transform:none!important;transition:none!important}.actor-shell .character,.companion-cameo img,.slime-friend img{animation:none!important;will-change:auto}}