.hero-photo{overflow:hidden}
.hero-photo>img,.hero-photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo>video{opacity:0;transition:opacity .45s ease;object-position:center}
.hero.film-playing .hero-photo>video{opacity:1}
.hero-photo .film-fallback-shot{opacity:0;transform:none}
.hero.film-fallback:not(.film-still) .film-fallback-shot{animation:film-crossfade 10s linear infinite}
.hero.film-fallback:not(.film-still) .film-fallback-shot:nth-of-type(3){animation-delay:5s}
.hero:not(.film-still):not(.film-playing) .hero-photo>img:first-child{animation:film-pan 7s ease-in-out infinite alternate}
.hero-film-label{position:absolute;right:6%;top:88px;display:flex;align-items:center;gap:12px;color:#fff;font-size:11px;letter-spacing:.12em;z-index:1}
.film-progress{display:block;width:100px;height:2px;background:#ffffff40;overflow:hidden}
.film-progress::after{content:'';display:block;width:100%;height:100%;background:white;transform:scaleX(var(--film-progress,0));transform-origin:left}
.hero.film-still .film-progress{display:none}
@keyframes film-pan{from{transform:scale(1.2) translateX(3%)}to{transform:scale(1.06) translateX(-2%)}}
@keyframes film-crossfade{0%,100%{opacity:0;transform:scale(1.15) translateX(2%)}12%,45%{opacity:1}60%{opacity:0;transform:scale(1.04) translateX(-2%)}}
@media(max-width:700px){.hero-film-label{top:67px;right:24px;font-size:9px}.film-progress{width:60px}.hero-photo>video{object-position:center}.hero-shade{background:linear-gradient(180deg,rgba(6,20,39,.12),rgba(6,20,39,.03) 25%,rgba(6,20,39,.67) 75%,rgba(6,20,39,.86))}}
@media(prefers-reduced-motion:reduce){.hero-photo>video{display:none}.hero-photo>img{animation:none!important}.film-progress{display:none}}
.motion-paused .hero-photo>img{animation:none!important}

/* Do not add a second digital camera movement over the generated shot or poster. */
.hero .hero-photo>img:first-child{animation:none!important;transform:none!important}