/* The image sequence changes the actual 3D camera; the page does not tilt a flat screenshot. */
.hero-ui.live-instrument { -webkit-mask-image:url('../media/cinematic/hero-mask.webp'); mask-image:url('../media/cinematic/hero-mask.webp'); }
.story { height:680svh; }
.story-pin { background:#090909; }
.story-stage { inset:38px 0 110px 35%; display:flex; align-items:center; justify-content:center; transform:translateX(var(--exit-shift,0px)); }
.cinema-stage { position:relative; width:100%; aspect-ratio:1920/1382; }
.cinema-stage > img, .cinema-camera, .cinema-film { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.cinema-poster { z-index:0; -webkit-mask:url('../media/cinematic/hero-mask.webp') center/100% 100% no-repeat; mask:url('../media/cinematic/hero-mask.webp') center/100% 100% no-repeat; }
.cinema-camera { opacity:0; z-index:1; }
.cinema-camera.is-ready { opacity:1; }
.cinema-film { opacity:0; z-index:2; transition:opacity 220ms ease; -webkit-mask:var(--shot-mask) center/100% 100% no-repeat; mask:var(--shot-mask) center/100% 100% no-repeat; pointer-events:none; }
.cinema-film[data-active="true"].is-ready { opacity:1; }
.story-copy { left:max(40px,calc((100vw - 1320px)/2)); width:min(365px,28vw); transition:opacity 220ms ease; }
.story[data-step="4"] .story-copy { opacity:0; pointer-events:none; }
.story-pin::after { transition:opacity 220ms ease; }
.story[data-step="4"] .story-pin::after { opacity:0; }
.story[data-step="4"] .story-stage { -webkit-mask-image:none; mask-image:none; }
.story-nav { bottom:99px; }
.story-scroll-progress { left:38%; right:3%; top:auto; bottom:91px; height:1px; width:auto; background:rgba(233,221,204,.16); border-radius:0; }
.story-scroll-progress span { transform:scaleX(var(--story-progress,0)); transform-origin:left center; background:#d9ba95; }
.story-pin > .motion-control { top:auto; bottom:31px; right:28px; }
.spot-simple .spot-window { aspect-ratio:var(--page-aspect); background:none; box-shadow:none; border:0; border-radius:0; }
.spot-simple .spot-zoom .frame { aspect-ratio:var(--page-aspect); -webkit-mask:var(--page-mask) center/100% 100% no-repeat; mask:var(--page-mask) center/100% 100% no-repeat; background:none; border-radius:0; }
.spot-simple .spot-zoom .frame img { width:100%; height:100%; object-fit:contain; }
.spot-simple .card-screens { width:100%; height:100%; object-fit:contain; }
@media(max-width:860px){
 .story { height:700svh; }
 .story-stage { inset:64px 0 auto; height:40svh; transform:none; }
 .cinema-stage { width:100%; max-height:100%; aspect-ratio:1920/1382; }
 .story-copy { top:calc(40svh + 92px); left:24px; right:24px; width:auto; }
 .story-card h2 { font-size:clamp(27px,6.9vw,36px); line-height:1.06; margin-bottom:14px; }
 .story-card > p:not(.num):not(.eyebrow):not(.story-hint) { font-size:14px; line-height:1.45; }
 .story-card .num,.story-card .eyebrow { margin-bottom:12px; font-size:10px; letter-spacing:.14em; }
 .story-nav { bottom:108px; }
 .story-scroll-progress { left:24px; right:24px; top:auto; bottom:98px; height:1px; width:auto; }
 .story-pin > .motion-control { top:62px; right:12px; bottom:auto; }
}
@media(prefers-reduced-motion:reduce){
 .cinema-film,.story-copy { transition:none; }
 .story-stage { transform:none; }
}
.cinema-film[data-shot="character"] { --shot-mask:url('../media/cinematic/character-mask.webp'); }
.cinema-film[data-shot="osc"] { --shot-mask:url('../media/cinematic/osc-mask.webp'); }
.cinema-film[data-shot="xy"] { --shot-mask:url('../media/cinematic/xy-mask.webp'); }
#page-mod { --page-mask:url('../media/cinematic/mod-mask.webp'); }
#page-seq { --page-mask:url('../media/cinematic/arp-mask.webp'); }
#page-fx { --page-mask:url('../media/cinematic/fx-mask.webp'); }