/* A tighter visual rhythm, while the chapter copy stays in place. */
.montage-shot{transition:opacity .45s ease;will-change:opacity}
.montage-shot video{width:100%;height:100%;object-fit:cover;object-position:64% center}
.montage-shot [hidden]{display:none}
.montage-shot.active img{animation:story-push var(--shot-duration,7s) linear both}
.montage-shot[data-motion="out"].active img{animation-name:story-pull}
@keyframes story-push{from{transform:scale(1.025) translateX(.4%)}to{transform:scale(1.09) translateX(-.6%)}}
@keyframes story-pull{from{transform:scale(1.09) translateX(-.5%)}to{transform:scale(1.025) translateX(.4%)}}
.paused .montage-shot img{animation-play-state:paused}
/* Runtime fits the frame to the actual space above the subtitles, including mobile. */
.demo-panel{position:absolute;right:4%;top:6%;margin:0;padding:10px;background:#0c2833f5;border:1px solid #6cf2df80;border-radius:20px;box-shadow:0 24px 80px #001017bb,0 0 45px #4de2d530;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .22s ease,transform .22s ease;pointer-events:none;visibility:hidden;z-index:2}
.demo-panel.visible{opacity:1;transform:none;visibility:visible}
.demo-panel figcaption{font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.03em;padding:4px 5px 10px;color:#bffbf0}
.demo-panel figcaption:before{content:"";display:inline-block;width:6px;height:6px;background:#55e4d3;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #55e4d3}
.demo-panel video{display:block;width:100%;height:auto;aspect-ratio:var(--demo-aspect,2);object-fit:contain;border-radius:10px;background:#12333e}
.demo-progress{height:2px;background:#ffffff20;margin:9px 5px 2px;overflow:hidden;border-radius:5px}
.demo-progress:before{content:"";display:block;height:100%;background:#55e4d3;transform:scaleX(var(--demo-progress,0));transform-origin:left}
/* The headline remains; secondary tags yield their space while the product is shown. */
.has-demo #visual{opacity:0;transition:opacity .15s}
@media(min-width:701px){#copy{width:53%}h1{font-size:clamp(36px,4.35vw,72px)}.has-demo #copy{width:40%;z-index:3}.has-demo h1{font-size:clamp(30px,3.5vw,60px)}}
@media(max-width:700px){
 .demo-panel{border-radius:16px}
 .demo-panel figcaption{font-size:11px;letter-spacing:0}
 body.embedded #cinema.has-demo #copy{top:5%;width:88%}
 body.embedded #cinema.has-demo h1{font-size:clamp(25px,4vh,34px)}
 .has-demo #eyebrow{margin-bottom:12px;font-size:10px;letter-spacing:.16em}
}
@media(max-height:650px) and (min-width:701px){#copy{top:16%!important}h1{font-size:clamp(30px,5.7vh,50px)}#visual{margin-top:18px}.ring{width:110px;height:110px}.ring b{font-size:27px}.has-demo h1{font-size:clamp(28px,5.7vh,48px)}}
@media(prefers-reduced-motion:reduce){.montage-shot,.demo-panel{transition:none}.montage-shot img{animation:none!important}}