/* The film is the transition: a floating frame opens into a full-width cinema. */
#films{position:relative;background:#0a0b0d;border-radius:44px 44px 0 0;padding:100px 24px 120px;color:#f5f5f7;--cinema-progress:1;--cinema-scale:1;--cinema-lift:0px;--cinema-angle:0deg;--cinema-radius:8px;--poster-scale:1.06;--poster-y:0px;--pointer-x:0px;--pointer-y:0px;--tilt-x:0deg;--tilt-y:0deg}
#films .section-head{align-items:flex-end;margin-bottom:46px;padding-inline:24px}
#films .eyebrow{font-size:11px;letter-spacing:.2em;color:#a3a5aa;margin-bottom:25px}
#films .section-head h2{font-size:clamp(64px,8.7vw,126px);line-height:.91;letter-spacing:-.065em;font-weight:550}
#films .section-head h2 span{color:#f5f5f7}
#films .section-head>p{font-size:15px;color:#b8babf;line-height:1.6;margin-bottom:6px}
#films .film-tabs{padding-inline:24px;margin-bottom:32px;gap:8px}
#films .film-tabs button{border-color:#414348;background:transparent;color:#aeb1b7;box-shadow:none;font-size:13px;min-height:44px;padding:10px 19px}
#films .film-tabs button[aria-selected=true]{background:#f5f5f7;color:#15171a;border-color:#f5f5f7}
#films .film-panel{max-width:1600px}
.film-stage-track{position:relative;perspective:1600px;height:calc(min(56.25vw - 27px,100svh - 156px) + 180px);min-height:380px}
#films .film-screen{position:sticky;top:94px;height:min(calc(56.25vw - 27px),calc(100svh - 156px));min-height:200px;width:100%;aspect-ratio:auto;overflow:hidden;border:1px solid #ffffff1a;border-radius:8px;transform-origin:50% 50%;background:#0a0b0d;box-shadow:0 22px 70px #0004}
#films .film-poster{cursor:pointer;background:#101317}
#films .film-poster:after{display:none}
#films .film-poster>img{opacity:1;transition:none;object-position:center 54%;transform:scale(1.06);filter:none}
#films .film-play{width:92px;height:92px;box-shadow:none;border:1px solid #fffc;background:#fffffff2;color:#131518;transition:background .25s,transform .5s cubic-bezier(.16,1,.3,1)}
#films .film-play:before{border-left-color:#17191c}
#films .film-poster:hover .film-play{box-shadow:none;background:#fff}
#films .film-poster:focus-visible{outline:3px solid #fff;outline-offset:-6px}
#films .film-poster-label{bottom:24px;left:28px;background:#101216b8;backdrop-filter:blur(12px);border:1px solid #ffffff45;padding:11px 16px;border-radius:24px;font-size:12px;letter-spacing:.03em}
#films .film-poster-label:before{display:none}
.film-poster-credit{position:absolute;bottom:28px;right:28px;color:#fff;font-size:10px;text-shadow:0 1px 4px #000;letter-spacing:.02em}
#films .film-caption{max-width:1200px;margin:auto;padding:26px 24px 0}
#films .film-caption h3{font-size:34px;font-weight:500;letter-spacing:-.04em}
#films .film-caption>div>p:last-child:not(.film-trim){font-size:14px;line-height:1.65;max-width:550px}
#films .film-trim{font-size:10px;letter-spacing:.16em}
#films .film-source{font-size:11px}
#films .film-source a{font-size:12px}
#films .film-foot{padding:24px 24px 0;margin-top:28px;border-color:#ffffff20}
#films .film-foot p{font-size:11px;color:#8b8e95;max-width:660px}
#films .film-foot>a{font-size:12px}
.cinema-next{max-width:1200px;margin:80px auto 0;padding:36px 24px 0;border-top:1px solid #ffffff26;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:clamp(38px,5.7vw,76px);font-weight:500;letter-spacing:-.055em;line-height:1.1}
.cinema-next small{display:block;font-size:10px;letter-spacing:.17em;line-height:1.5;color:#aaaeb5;margin-bottom:17px}
.cinema-next-arrow{display:grid;place-items:center;border:1px solid #ffffff50;border-radius:50%;width:82px;height:82px;font-size:38px;flex-shrink:0;transition:background .3s,color .3s,transform .5s}
.cinema-next:hover .cinema-next-arrow{background:#f5f5f7;color:#161719;transform:rotate(45deg)}
#lineup{position:relative;z-index:2;border-radius:40px 40px 0 0;margin-top:-40px}
.film-loading-cover{position:absolute!important;inset:0;z-index:2;pointer-events:none}
.film-loading-cover .film-play{display:none!important}
.film-recovery{position:absolute;inset:auto 24px 24px;z-index:4;display:flex;align-items:center;gap:12px;padding:20px 24px;border:1px solid #ffffff30;border-radius:12px;background:#111418f5;color:#fff}
.film-recovery p{font-size:14px;line-height:1.5;flex:1}
.film-recovery a,.film-recovery button{font-size:13px;color:#fff;border:1px solid #73777e;border-radius:24px;background:transparent;padding:12px 18px;min-height:44px;text-decoration:none}
.film-recovery a{background:#f5f5f7;border-color:#f5f5f7;color:#17191b}
#films [data-player-state=error] .film-poster-label,#films [data-player-state=error] .film-poster-credit{display:none}
#films [data-player-state=error] .film-play{opacity:0}
@media(prefers-reduced-motion:no-preference){
 html:not(.motion-off) #films.cinema-motion .film-screen[data-player-state=poster]{transform:translate3d(0,var(--cinema-lift),0) scale(var(--cinema-scale)) rotateX(calc(var(--cinema-angle) + var(--tilt-x))) rotateY(var(--tilt-y));border-radius:var(--cinema-radius);will-change:transform}
 html:not(.motion-off) #films.cinema-motion .film-screen[data-player-state=poster] .film-poster>img{transform:translate3d(var(--pointer-x),calc(var(--poster-y) + var(--pointer-y)),0) scale(var(--poster-scale));will-change:transform}
 html:not(.motion-off) #films.cinema-motion .film-screen[data-player-state=poster] .film-play{transform:translate(calc(-50% + var(--pointer-x)),calc(-50% + var(--pointer-y)))}
}
@media(max-width:760px){
 #films{padding:68px 16px 95px;border-radius:28px 28px 0 0}
 #films .section-head{padding-inline:8px;margin-bottom:30px}
 #films .section-head h2{font-size:70px}
 #films .section-head>p{font-size:14px;line-height:1.6;margin-top:24px}
 #films .film-tabs{padding:3px 4px;margin:0 0 22px}
 #films .film-tabs button{font-size:12px;padding-inline:15px}
 .film-stage-track{height:calc(max(200px,56.25vw - 18px) + 70px);min-height:270px}
 #films .film-screen{top:84px;height:max(200px,calc(56.25vw - 18px));min-height:200px;margin:0}
 #films .film-play{width:64px;height:64px}
 #films .film-poster-label{bottom:14px;left:14px;font-size:11px;padding:8px 12px}
 .film-poster-credit{display:none}
 #films .film-caption{padding:22px 8px 0}
 #films .film-caption h3{font-size:32px}
 #films .film-caption>div>p:last-child:not(.film-trim){font-size:14px}
 #films .film-foot{padding-inline:8px}
 .cinema-next{margin-top:50px;padding:28px 8px 0;font-size:40px}
 .cinema-next-arrow{width:56px;height:56px;font-size:29px}
 .film-recovery{inset:8px;padding:14px;gap:8px;flex-wrap:wrap;align-content:center}
 .film-recovery p{flex-basis:100%;font-size:13px}
 .film-recovery a,.film-recovery button{font-size:12px;padding:10px 13px}
 #lineup{border-radius:28px 28px 0 0;margin-top:-28px}
}
.motion-off .film-stage-track{height:auto;min-height:0}
.motion-off #films .film-screen{position:relative;top:0}
@media(prefers-reduced-motion:reduce){.film-stage-track{height:auto;min-height:0}#films .film-screen{position:relative;top:0}}