.hero-films{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#263a39 url('./acorns-sea-wide.jpg') center 60%/cover no-repeat}
.hero-films:after{content:"";position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(17,24,23,.28),rgba(17,24,23,.38) 45%,rgba(17,24,23,.46))}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity 1s ease-in-out;filter:brightness(.76) saturate(.72)}
.hero-film.is-visible{opacity:1;z-index:2}
.hero-film.is-outgoing{opacity:1;z-index:1}
.hero-film.film-sea{object-position:50% 60%;filter:brightness(.63) saturate(.65)}
.hero-film.film-food{object-position:65% 50%}
.hero-film.film-coffee{object-position:48% 50%}
.hero:has(.hero-films) .hero-mist{opacity:.16;animation:none}
.hero:has(.hero-films) .hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.3)}
@media(max-width:620px){.hero-film.film-sea{object-position:46% 55%}.hero-film.film-food{object-position:75% 50%}.hero-film.film-coffee{object-position:48% 50%}}
@media(prefers-reduced-motion:reduce){.hero-film{display:none}.hero:has(.hero-films) .hero-mist{display:none}}