/* =================================================================
   Lux Vidigal — hero-film.css  (2026-09-25)
   The depth hero is the poster for the property film. The <video> sits
   UNDER the photo layers and is never transformed or animated (a
   transform on a playing video shakes — steady-hero-video). Once frames
   are really flowing, hero-film.js adds .is-film to the hero and
   .hero-film-on to <html>: the photo and cutouts fade out (opacity only),
   the headline turns cream over a top scrim, and the header goes back to
   cream. No film (Data-Saver, autoplay refused) = the photo hero as before.
   ================================================================= */
.hero--depth .dh-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  background: var(--c-ocean-deep);
  pointer-events: none;
}
/* never transform a playing video — it shakes (steady-hero-video) */
.hero--depth .dh-video { transform: none !important; animation: none !important; }

.hero--depth .dh-base,
.hero--depth .dh-cut { transition: opacity 1.6s var(--ease-out); }
.hero--depth.is-film .dh-base,
.hero--depth.is-film .dh-cut { opacity: 0; }

/* film scrim: dark at the top (headline + header) and a little at the bottom, where it
   adds to the existing ::after scrim so the sub-line holds over bright beats (white houses) */
.hero--depth::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,14,0.5) 0%, rgba(15,15,14,0.22) 34%, rgba(15,15,14,0) 55%,
                                      rgba(15,15,14,0.16) 70%, rgba(15,15,14,0.42) 100%);
  z-index: 1; opacity: 0; pointer-events: none;
  transition: opacity 1.6s var(--ease-out);
}
.hero--depth.is-film::before { opacity: 1; }

.hero--depth .hero__title,
.hero--depth .hero__title em,
.hero--depth .hero__kicker { transition: color 1.6s var(--ease-out), text-shadow 1.6s var(--ease-out); }
.hero--depth.is-film .hero__title { color: var(--c-cream); text-shadow: 0 2px 30px rgba(15,15,14,0.32); }
.hero--depth.is-film .hero__title em { color: var(--c-ember); }
.hero--depth.is-film .hero__kicker { color: var(--c-cream); }

/* the current header (v2's .lvh header keys its own cream variant on html.hero-film-on) */
html.hero-film-on body:has(.hero--depth) .site-header:not(.lvh):not(.is-scrolled):not(.is-menu-open),
html.hero-film-on body:has(.hero--depth) .site-header:not(.lvh):not(.is-scrolled):not(.is-menu-open) .site-header__logo { color: var(--c-cream); }
html.hero-film-on body:has(.hero--depth) .site-header:not(.lvh):not(.is-scrolled):not(.is-menu-open)::before { opacity: 1; }

@media (max-width: 768px) {
  /* phones get lux-hero-portrait, a 608x1080 cut already centred on the depth
     photo's phone focus (56% across), so centre it */
  .hero--depth .dh-video { object-position: 50% 50%; }
}