/* =============================================================================
   hero.css  —  the looping hero video
   -----------------------------------------------------------------------------
   Linked only where pmg_pv_hero_video() actually injects the layer: the `home`
   view of /_preview/{en,es}/cyprus/. Not Dubai — the footage is Cyprus.

   The video itself is _assets/hero-cyprus.{webm,mp4} with .jpg as the poster,
   cut from wohnsitz-ausland.com's why-cyprus.mp4 (see CLAUDE.md for the exact
   windows and why they are the only usable ones).
   ============================================================================= */

/* .hero is already position:relative + overflow:hidden, so the layer only has
   to fill it. isolation:isolate keeps the z-indexes below local to the hero. */
.cy-np .hero { isolation: isolate; }

.cy-np .pv-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-size: cover;      /* the poster, painted immediately, so there is
                                  never a black box while the video loads */
  background-position: center;
}
.cy-np .pv-hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                  /* faded in from the poster on `canplay` */
  transition: opacity .9s ease;
}
.cy-np .pv-hero-media video.on { opacity: 1; }

/* The scrim. The source footage carries no titles in these windows but is
   bright, and the hero copy is cream — without this the headline is unreadable.
   Angled so it is heaviest behind the text and lightest on the right. */
.cy-np .pv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(11, 62, 39, .90) 0%,
    rgba(11, 62, 39, .70) 40%,
    rgba(11, 62, 39, .28) 100%);
}

/* Lift the page's own hero furniture above the video. */
.cy-np .hero::before { z-index: 1; }        /* the decorative leaf */
.cy-np .hero-inner { position: relative; z-index: 2; }

/* Reduced motion: keep the poster, drop the video entirely. */
@media (prefers-reduced-motion: reduce) {
  .cy-np .pv-hero-media video { display: none; }
}