.cinematic-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;pointer-events:none;background:#102c24;transition:opacity .25s;z-index:2}
.film-ready>.cinematic-film{opacity:1}
.film-ready>canvas,.film-ready>.actor-labels,.film-ready #logo-fallback{visibility:hidden}
.film-ready #logo-drag,.film-ready #logo-reset,.film-ready #camera-mode,.film-ready #particle-view,.film-ready>.story-camera,.film-ready #story-gesture,.film-ready #goal-world-zoom-in,.film-ready #goal-world-zoom-out,.film-ready #goal-world-reset{visibility:hidden;pointer-events:none}
.film-ready>.logo-scene-tools,.film-ready>.goal-world-tools,.film-ready>.story-stage-top{z-index:4}
.film-ready.is-simple>.cinematic-film{display:none}
.cinematic-toggle{position:absolute;top:16px;left:16px;z-index:5;min-height:44px;padding:10px 16px;border:1px solid #ffffff65;border-radius:999px;background:#123b30eb;color:#fff;font:500 14px/1.3 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 3px 18px #0002}
.cinematic-toggle[hidden],.is-simple>.cinematic-toggle{display:none}
.cinematic-toggle:focus-visible{outline:3px solid #cde8aa;outline-offset:3px}
.story-world>.cinematic-toggle{top:auto;left:auto;bottom:166px;right:20px}
.film-ready>.cinematic-film{object-position:var(--film-focus,50% 50%)}
.story-world.film-ready:after{z-index:2}
.film-ready .logo-caption-box{color:#fff;text-shadow:0 1px 3px #000}
.film-ready .logo-caption-box,.film-ready .cinema-subtitles,.film-ready .goal-connection-tabs{z-index:3}
.film-ready .logo-caption-box{background:linear-gradient(transparent,#081d17c9);padding:12px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.cinematic-film{transition:none}}
/* Real imagery fills the frame; pointer response and authored camera drift stay restrained. */
.cinematic-film{transform:translate3d(calc(var(--film-x,0)*-8px),calc(var(--film-y,0)*-6px),0) scale(calc(1.025 + var(--film-progress,0)*.025));transition:opacity .45s ease,transform .25s ease-out;transform-origin:var(--film-focus,50% 50%)}
.cinematic-film[hidden]{display:none}
.film-pending>.cinematic-film{opacity:1}
.film-pending>canvas{visibility:hidden}
.film-reduced>.cinematic-film{transform:none;transition:none}
/* Move the photograph as one surface, preserving its faces, hands, clothing and logos. */
.film-image>.cinematic-photo{z-index:2;transform:translate3d(calc((.35 - var(--photo-progress,0)*.7)*1% + var(--film-x,0)*-8px),calc(var(--film-y,0)*-4px),0) scale(calc(1.025 + var(--photo-progress,0)*.05));transform-origin:var(--photo-origin,66% 22%);transition:opacity .45s ease}
.film-photo-playing>.cinematic-photo{will-change:transform}
.cinematic-story .story-world:after{background:linear-gradient(90deg,#091c16f2 0%,#091c16d9 24%,#091c1640 50%,transparent 70%),linear-gradient(0deg,#091c16b3,transparent 35%);z-index:2}
.friendly-world .cinematic-story .story-copy,.friendly-world .cinematic-story .story-copy h1{color:#f5f7ed}
.friendly-world .cinematic-story .story-copy>.eyebrow{color:#d0e8ac}
.cinematic-story #moment-copy{color:#e4eddf}
.cinematic-story #moment-action a,.cinematic-story #moment-action button{color:#deefc3}
.cinematic-story .process-controls{background:#102f26d9;border-color:#c6dbc552;color:#fff;backdrop-filter:blur(10px)}
.cinematic-story .process-current span,.cinematic-story .process-current button{color:#eef5e7}
.cinematic-story .process-steps button{background:#214638;color:#e2eedb;border-color:#74947d}
.cinematic-story .process-steps button[aria-pressed=true]{background:#d9edb1;color:#173a28}
.friendly-world .cinematic-story .cinema-subtitles{background:#0a201ac9;color:white;border-color:#ffffff35;backdrop-filter:blur(12px);box-shadow:none}
.friendly-world .cinematic-story .cinema-subtitles>p{color:#f6f8ef}
.friendly-world .cinematic-story .cinema-subtitles>span{color:#d5e8b6}
.cinematic-story .cinema-coordinate,.cinematic-story .scroll-cue,.cinematic-story #scroll-position{color:#d6e5ce}
.cinematic-photo{object-position:var(--film-focus,66% 50%)}
.logo-layout:has(.film-ready) .logo-copy{background:transparent}
@media(min-width:801px){
 .logo-layout:has(.film-ready) .logo-visual{position:absolute;inset:0;z-index:0}
 .logo-layout:has(.film-ready) .logo-visual:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#102c24f5 0%,#102c24e0 30%,#102c2450 60%,transparent),linear-gradient(0deg,#102c2470,transparent 40%)}
 .logo-layout:has(.film-ready) .logo-copy{grid-column:1;position:relative;z-index:3}
 .logo-layout:has(.film-ready) .logo-caption-box{left:48%;right:5%;bottom:16px;z-index:4}
}
@media(max-width:800px){
 .cinematic-story .story-world:after{background:linear-gradient(0deg,#102c2490,transparent 45%,transparent 75%,#102c2450)}
 .friendly-world .cinematic-story .story-copy,.friendly-world .cinematic-story .story-copy h1{color:#173f32}
 .cinematic-story #moment-copy{color:#345c47}
 .friendly-world .cinematic-story .story-copy>.eyebrow{color:#496e39}
 .cinematic-story #moment-action a,.cinematic-story #moment-action button{color:#285b40}
 .cinematic-story .story-world{overflow:hidden}
 .cinematic-story .cinema-subtitles{bottom:10px}
 .cinematic-story .cinematic-toggle{bottom:100px;right:12px}
 .logo-layout:has(.film-ready) .logo-caption-box{left:5%;right:5%}
}
@media(prefers-reduced-motion:reduce){.cinematic-film{transform:none;transition:none}}
/* The film occupies the whole desktop stage, including the copy's backdrop. */
.film-ready .cinema-loader{display:none}
.film-ready #camera-mode,.film-ready #particle-view{display:none}
@media(min-width:800px){
 .immersive-world .cinematic-story .story-world{inset:0;width:100%}
 /* The navigation covers the first 140px; frame photographs below it so faces stay visible. */
 .immersive-world .cinematic-story .film-image>.cinematic-photo{top:140px;height:calc(100% - 140px)}
 .immersive-world .cinematic-story .story-stage-top{left:auto;right:3%;top:213px}
 .immersive-world .cinematic-story .cinema-subtitles{left:43%;right:6%}
 .immersive-world .cinematic-story .cinema-coordinate,.immersive-world .cinematic-story .scroll-cue,.immersive-world .cinematic-story .scroll-cue a{color:#dcebd2}
}
@media(max-width:799px){
 /* Keep the full photograph inside the mobile stage throughout its camera move. */
 .cinematic-story .film-image>.cinematic-photo{object-fit:contain;object-position:center;background:#183a2c;transform:scale(calc(.975 + var(--photo-progress,0)*.025));transform-origin:center}
 .immersive-world .cinematic-story .story-stage-top>div{width:max-content;margin-left:auto;margin-right:0}
 .immersive-world .cinematic-story .scroll-cue{color:#36563f}
}
.film-reduced>.cinematic-photo,.cinematic-story .film-reduced>.cinematic-photo{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.film-image>.cinematic-photo,.cinematic-story .film-image>.cinematic-photo{transform:none;transition:none;will-change:auto}}
/* Keep the complete product in frame before entering its material journey. */
.immersive-world .cinematic-story .film-product>.cinematic-photo{left:0;top:150px;width:100%;height:calc(100% - 290px);object-fit:contain;object-position:center;background:#c2c7b7;transform:scale(calc(.985 + var(--photo-progress,0)*.015));transform-origin:65% 50%}
.cinematic-story .film-product{background:#c2c7b7}
.immersive-world .cinematic-story .process-controls{background:#102f26ed;color:#fff;border-color:#aec5a9}
.immersive-world .cinematic-story .process-current span,.immersive-world .cinematic-story .process-current button{color:#eef5e7}
.immersive-world .cinematic-story .process-current button{background:#214638;border-color:#aec5a9}
.moment-roles{display:grid;gap:13px;margin:0}
.moment-roles>div{padding-left:12px;border-left:2px solid #91b56f}
.moment-roles dt{font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin:0 0 3px;color:inherit}
.moment-roles dd{margin:0;font-size:15px;line-height:1.5;color:inherit}
@media(max-width:799px){
 .immersive-world .cinematic-story .film-product>.cinematic-photo{top:42px;left:0;width:100%;height:calc(100% - 130px);object-fit:contain;object-position:center;transform:none}
 .immersive-world .cinematic-story .film-product>.cinematic-toggle{left:12px;right:auto}
 .immersive-world .cinematic-story .cinema-coordinate,.immersive-world .cinematic-story #scroll-position{color:#36563f}
 .moment-roles{gap:10px}.moment-roles dd{font-size:14px;line-height:1.5}.moment-roles dt{font-size:10px}
}
.immersive-world .cinematic-story .film-product.film-reduced>.cinematic-photo{transform:none}
@media(prefers-reduced-motion:reduce){.immersive-world .cinematic-story .film-product>.cinematic-photo{transform:none}}