/* Large film surfaces, compositor-only motion, no secondary WebGL renderer. */
.demo-section{--cinema-tone:#765b40;--corridor-inset:6vw;padding:100px 6vw 80px;overflow:clip;background:#080e16;isolation:isolate}
.demo-section .section-heading{align-items:flex-end;gap:35px;margin-bottom:35px}
.demo-section .section-heading h2{font:400 clamp(52px,6.6vw,108px)/1.02 Inter,Arial,sans-serif;letter-spacing:-.065em}
.demo-section .section-heading .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:22px}
.demo-section .section-note{font-size:12px;max-width:280px;margin-bottom:5px}
.demo-section .film-filters{gap:8px;margin:0 0 25px}
.demo-section .film-filters button{padding:10px 17px;font-size:10px;min-height:40px;border-color:#647f9452;color:#9ab0c0}
.demo-section .film-filters button[aria-pressed=true]{background:#c5dbd6;border-color:#c5dbd6;color:#11252d}
.cinema-corridor{position:relative;margin-inline:calc(-1 * var(--corridor-inset));width:calc(100% + 2 * var(--corridor-inset));outline-offset:-8px;scroll-margin-top:15px}
.corridor-stage{position:relative;display:grid;place-items:center;padding:20px 0 50px;perspective:1700px;direction:ltr;touch-action:pan-y;overflow:clip;isolation:isolate}
.corridor-light{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,var(--cinema-tone),transparent 68%);opacity:.36;transition:background .65s}
.corridor-floor{position:absolute;inset:58% -10% -35%;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,#82a7b72a 0 1px,transparent 1px 8%),repeating-linear-gradient(0deg,#82a7b728 0 1px,transparent 1px 18%);transform:perspective(700px) rotateX(66deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#000 20%,transparent 90%);opacity:.4}
.demo-section .cinema{position:relative;display:block;width:min(76%,1240px);border:1px solid #9dbbc26b;background:#04080e;border-radius:5px;overflow:hidden;z-index:3;box-shadow:0 20px 55px #0008;transform-origin:center;backface-visibility:hidden}
.demo-section .cinema-screen{position:relative;display:block;min-height:0;overflow:hidden;background:#04080e;touch-action:pan-y}
.demo-section .cinema-topline{position:absolute;inset:0 0 auto;z-index:4;background:linear-gradient(#03070cc9,transparent);border:0;padding:17px 20px;font-size:8px;letter-spacing:1.2px;pointer-events:none;color:#d7e5e8}
.demo-section .cinema-counter{color:#c2d6dd}
.demo-section #showcase-video{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:none;object-fit:contain;background:#04080e;touch-action:pan-y}
.demo-section .cinema-play{top:50%;border-radius:50px;padding:17px 25px;font-size:12px;background:#07131be8;backdrop-filter:none;box-shadow:0 6px 25px #0004}
.demo-section .cinema-play:hover{background:#c6ddd5;color:#10272d}
.corridor-side{position:absolute;left:50%;top:20px;width:min(70vw,1120px);aspect-ratio:16/10;padding:0;z-index:1;display:block;overflow:hidden;border:1px solid #8aadb455;border-radius:5px;background:#08121c;box-shadow:0 18px 35px #0005;opacity:.66;backface-visibility:hidden;transition:opacity .25s,border-color .25s}
.corridor-before{transform:translateX(-50%) translate3d(calc(-1 * min(59vw,940px)),0,-380px) rotateY(38deg)}
.corridor-after{transform:translateX(-50%) translate3d(min(59vw,940px),0,-380px) rotateY(-38deg)}
.corridor-side:hover,.corridor-side:focus-visible{opacity:1;border-color:#c1dad8}
.corridor-side img{display:block;width:100%;height:100%;object-fit:contain;opacity:.8}
.corridor-side::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#020710db);pointer-events:none}
.corridor-side strong{position:absolute;left:22px;right:22px;bottom:24px;z-index:2;font:400 20px/1.3 Inter,Arial,sans-serif;text-align:left;color:#d3e0e3}
.side-index{position:absolute;left:22px;top:18px;z-index:2;font:10px/1 Inter,Arial,sans-serif;color:#d3e0e3}
.side-arrow{position:absolute;right:22px;bottom:22px;z-index:2;font-size:24px;color:#c9dcdf}
.cinema-corridor .cinema-detail{width:min(76%,1240px);margin:auto;padding:0 0 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:45px;align-items:start;border:0;background:transparent}
.demo-section .cinema-caption{max-width:700px;min-width:0}
.demo-section .cinema-caption>.micro{font-size:9px;color:#8caabb;letter-spacing:1px;margin:0 0 12px}
.demo-section .cinema-caption h3{font:400 clamp(28px,3vw,46px)/1.13 Inter,Arial,sans-serif;letter-spacing:-1.1px;margin:0 0 13px;color:#e0ebed}
.demo-section .cinema-caption>p:not(.micro){font-size:12px;line-height:1.8;max-width:590px;color:#91a7b6;margin:0 0 15px}
.demo-section .film-runtime{font-size:8px;color:#708b9a;letter-spacing:1px}
.cinema-navigation{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.corridor-hint{font-size:8px;color:#738f9f;letter-spacing:.9px;margin:1px 0 0;max-width:230px;line-height:1.8;text-align:end}
.demo-section .cinema-actions{display:flex;flex-direction:row;gap:9px;direction:ltr}
.demo-section .cinema-actions button{width:45px;height:45px;border-radius:50%;border-color:#7597aa68;font-size:22px;color:#b8ced8;display:grid;place-items:center;touch-action:manipulation}
.demo-section .cinema-actions button:hover{background:#c6ddd5;color:#10272d}
.demo-section .cinema-actions .cinema-expand{font-size:23px;color:#8ba8b9}
.demo-section .film-library{margin:20px auto 0;width:100%;max-width:1400px;position:relative}
.demo-section .film-grid{display:flex;gap:15px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#5d8194 #111c28;padding:3px 3px 17px;direction:ltr;touch-action:pan-x pan-y}
.demo-section .film-card{flex:0 0 160px;scroll-snap-align:center;min-width:0;margin:0;outline-offset:0}
.demo-section .film-card[hidden]{display:none}
.demo-section .film-thumb{aspect-ratio:16/10;border-radius:2px;transition:border-color .2s;box-shadow:none}
.demo-section .film-thumb img{object-fit:cover;filter:none;opacity:.64;transition:opacity .2s;transform:none!important}
.demo-section .film-card:hover img,.demo-section .film-card[aria-pressed=true] img{opacity:1}
.demo-section .film-card[aria-pressed=true] .film-thumb{border-color:#c9e1dc;box-shadow:0 0 0 1px #c9e1dc33}
.demo-section .film-card-play{display:none}
.demo-section .film-card-copy{padding:10px 0 0;direction:auto}
.demo-section .film-card-category{display:none}
.demo-section .film-card-copy strong{font-size:11px;font-weight:400;line-height:1.5;color:#9bb3c2;letter-spacing:0;overflow-wrap:anywhere}
.demo-section .film-disclosure{font-size:10px;margin-top:25px;max-width:1400px;margin-inline:auto}
.cinema-corridor.is-dragging{cursor:grabbing;user-select:none}.cinema-corridor:not(.is-playing){cursor:grab}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[dir=rtl] .demo-section .section-heading h2{font-family:Tahoma,Arial,sans-serif;font-size:clamp(44px,5.7vw,90px);line-height:1.3;letter-spacing:-.045em}
html[dir=rtl] .demo-section .cinema-caption h3,html[dir=rtl] .corridor-side strong{font-family:Tahoma,Arial,sans-serif;letter-spacing:0;line-height:1.4}
@media(min-width:1700px){.corridor-stage{padding-bottom:65px}.demo-section .film-card{flex-basis:190px}}
@media(max-width:800px){.demo-section{--corridor-inset:20px;padding:75px 20px 55px}.demo-section .section-heading{gap:20px;margin-bottom:28px}.demo-section .section-heading h2{font-size:clamp(42px,9vw,68px)}.demo-section .section-note{font-size:11px;max-width:245px}.demo-section .cinema{width:88%}.cinema-corridor .cinema-detail{width:88%;gap:24px}.corridor-side{width:80vw}.corridor-before{transform:translateX(-50%) translate3d(-67vw,0,-340px) rotateY(38deg)}.corridor-after{transform:translateX(-50%) translate3d(67vw,0,-340px) rotateY(-38deg)}.demo-section .cinema-caption h3{font-size:30px}.demo-section .cinema-caption>p:not(.micro){font-size:11px}.corridor-hint{font-size:7px;max-width:140px}.demo-section .film-card{flex-basis:145px}.demo-section .film-filters button{font-size:9px;padding:9px 12px}}
@media(max-width:520px){.demo-section{--corridor-inset:16px;padding-inline:16px}.demo-section .section-heading{display:block}.demo-section .section-heading h2{font-size:44px}.demo-section .section-heading .eyebrow{font-size:8px;margin-bottom:18px}.demo-section .section-note{margin:20px 0 0;max-width:300px;font-size:12px}.demo-section .film-filters{gap:7px;margin-bottom:16px}.demo-section .film-filters button{min-height:38px;font-size:9px;padding:8px 10px}.corridor-stage{padding:14px 0 28px;perspective:900px}.demo-section .cinema{width:calc(100% - 24px);border-radius:3px}.demo-section #showcase-video{aspect-ratio:4/3;max-height:none}.demo-section .cinema-topline{padding:12px 13px;font-size:7px}.corridor-side{top:26px;width:90vw;aspect-ratio:4/3;opacity:.35}.corridor-before{transform:translateX(-50%) translate3d(-93vw,0,-280px) rotateY(40deg)}.corridor-after{transform:translateX(-50%) translate3d(93vw,0,-280px) rotateY(-40deg)}.corridor-side strong,.side-index,.side-arrow{display:none}.cinema-corridor .cinema-detail{width:calc(100% - 32px);display:flex;flex-direction:column;gap:20px;padding-bottom:15px}.demo-section .cinema-caption h3{font-size:29px;letter-spacing:-1px}.demo-section .cinema-caption>.micro{font-size:8px;margin-bottom:10px}.demo-section .cinema-caption>p:not(.micro){font-size:12px;line-height:1.8;margin-bottom:12px}.cinema-navigation{flex-direction:row;justify-content:space-between;align-items:center;width:100%;gap:20px}.corridor-hint{text-align:start;font-size:7px;max-width:145px}.demo-section .cinema-actions{gap:7px}.demo-section .cinema-actions button{width:40px;height:40px;font-size:21px}.demo-section .film-library{margin-top:14px}.demo-section .film-grid{gap:12px;padding-bottom:15px}.demo-section .film-card{flex-basis:125px}.demo-section .film-card-copy strong{font-size:11px}.demo-section .film-disclosure{font-size:9px;line-height:1.8;margin-top:23px}.corridor-floor{opacity:.22}html[dir=rtl] .demo-section .section-heading h2{font-size:39px}}
@media(prefers-reduced-motion:reduce){.corridor-light,.corridor-side,.demo-section .film-thumb img{transition:none}.corridor-floor{display:none}.corridor-side{opacity:.35}}

body.cinema-in-view .world-footer{opacity:0;visibility:hidden}