.hero.cinema{width:100%;max-width:none;margin:0;height:calc(100svh - 144px);min-height:0;max-height:none;background:#111;isolation:isolate}
.cinema-films{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#111}
.cinema-panel{overflow:hidden;position:relative}.cinema-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}.cinema-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;opacity:0;transition:opacity .5s ease}.film-ready .cinema-video{opacity:1}.cinema-films:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:#111;pointer-events:none}
.cinema-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 75%),linear-gradient(90deg,rgba(0,0,0,.18),transparent);pointer-events:none}
.cinema-top{position:absolute;top:30px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#fff}
.cinema-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:94px;color:white}
.cinema-copy h1{font-size:clamp(62px,7.1vw,110px);line-height:.98;letter-spacing:-.035em;margin:18px 0 27px;max-width:1000px}.cinema-copy h1 em{font-weight:400;font-style:italic}
.cinema-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.cinema-bottom p{font-size:14px;line-height:1.65;color:#eee}.cinema-bottom .button{min-width:210px}
.cinema-controls{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;display:flex;gap:25px;align-items:center;font-size:10px;letter-spacing:.08em;color:white}
.film-toggle{border:1px solid #ffffff70;background:#1116;color:white!important;padding:8px 14px;min-height:44px;min-width:105px;font-size:11px}.film-toggle[hidden]{display:none}
.film-chapter{min-width:115px}.film-track{height:1px;background:#ffffff50;flex:1}.film-track>span{height:1px;width:100%;display:block;background:#fff;transform-origin:left;transform:scaleX(var(--film-progress,0))}
/* Brief, staggered typography introduces the film without a loading gate. */
.title-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cinema-copy h1 .title-line>span,.cinema-copy h1 em{display:inline-block}
.cinema.intro-playing .title-line>span,.cinema.intro-playing .title-line>em{animation:title-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.cinema.intro-playing .title-line>span:nth-child(2){animation-delay:.12s}
.cinema.intro-playing .title-line>em{animation-delay:.26s}
@keyframes title-enter{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:700px){.hero.cinema{height:calc(100svh - 82px);min-height:650px;max-height:960px}.cinema-films{grid-template-columns:1fr}.cinema-secondary{display:none}.cinema-copy{bottom:120px}.cinema-copy h1{font-size:clamp(51px,11vw,76px);margin:16px 0 23px}.cinema-copy .overline{font-size:9px;max-width:240px}.cinema-bottom{display:block}.cinema-bottom p{font-size:13px;margin-bottom:22px}.cinema-top{top:23px;font-size:8px}.cinema-controls{gap:12px;bottom:27px;flex-wrap:wrap}.film-track{flex-basis:100%}.cinema-video{object-position:center 35%}}
@media(prefers-reduced-motion:reduce){.cinema-copy *{animation:none!important}}
@media(max-width:700px){.cinema-films:after{display:none}.cinema-poster{object-position:center 35%}}
/* Fill the opening viewport, including tall displays and shorter laptop windows. */
@media(min-width:701px){.hero.cinema .cinema-copy h1{font-size:clamp(32px,min(8vw,calc((100svh - 400px)/3.2)),124px)}}
@media(min-width:701px) and (max-width:800px){.hero.cinema{height:calc(100svh - 124px)}}
@media(prefers-reduced-motion:reduce){.cinema-video{transition:none}}

.cinema-films{gap:2px}.film-toggle{cursor:pointer;transition:background .2s,border-color .2s}.film-toggle:hover{background:#fff;color:#111!important;border-color:white}.cinema-bottom .button{transition:background .2s,transform .2s}.cinema-bottom .button:hover{transform:translateY(-2px);background:#e8e8e8}
