/* The full film remains a background in the same hero at every viewport size. */
.full-film-hero{position:relative;display:block;isolation:isolate;overflow:hidden}
.full-film-hero .hero-media{position:absolute;inset:0;z-index:-1;transform:none!important}
.full-film-hero .hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% center;filter:none}
.full-film-hero .hero-shade{background:linear-gradient(90deg,#060a0dcc,transparent 58%),linear-gradient(0deg,#080b0c80,transparent 20%)}
.full-film-hero.home-hero h1{font-size:clamp(58px,6.8vw,112px)}
.full-film-hero.endurance-hero h1{font-size:clamp(70px,8vw,140px)}

/* Follow the film's actual closing frames; the opening loop restores the copy. */
.full-film-hero .hero-copy,.full-film-hero .hero-bottom,.full-film-hero .hero-film-controls,.full-film-hero .hero-shade{transition:opacity .5s ease}
.full-film-hero .hero-film{transition:opacity 1s ease,object-position .4s ease}
.full-film-hero.is-film-closing .hero-film{object-position:50% center}
.full-film-hero.is-film-closing .hero-copy,.full-film-hero.is-film-closing .hero-bottom{opacity:.06}
.full-film-hero.is-film-closing .hero-film-controls{opacity:.16}
.full-film-hero.is-film-closing .hero-shade{opacity:0}
.full-film-hero.is-film-closing .hero-copy:focus-within,.full-film-hero.is-film-closing .hero-bottom:focus-within,.full-film-hero.is-film-closing .hero-film-controls:focus-within,.full-film-hero.is-film-closing .hero-film-controls:hover{opacity:1}

/* Keep desktop framing close to the film's proportions, even in a tall app panel. */
@media(min-width:901px){
 .full-film-hero{height:clamp(660px,56.25vw,960px);min-height:660px;max-height:960px}
}
@media(min-width:601px) and (max-width:900px){
 .full-film-hero{height:660px;min-height:660px;max-height:none}
 .full-film-hero.home-hero h1{font-size:clamp(43px,6.8vw,58px)}
}
@media(max-width:600px){
 .full-film-hero.home-hero h1{font-size:clamp(37px,9.4vw,58px)}
 .full-film-hero.endurance-hero h1{font-size:clamp(64px,14vw,80px)}
}

/* Approved tall mobile framing: follow the five selected clips. */
@media(max-width:600px){.full-film-hero.home-hero .hero-film{object-fit:cover;object-position:var(--mobile-pan,85%) center;transition:opacity 1s ease}.full-film-hero.home-hero.is-film-closing .hero-film{object-position:50% center}}

/* The still uses the current film opening and its initial crop. */
.full-film-hero .hero-media>img{object-position:85% center}
@media(max-width:600px){.full-film-hero.home-hero .hero-media>img{object-position:5% center}}