/* Keep a still from each film visible until Vimeo has reached real footage. */
.hero__image--video { background: #383632 url("../assets/video-posters/home.jpg") center / cover no-repeat; }
.hero__image--video .hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.23);
  transition: opacity .55s ease;
}
.hero__image--video .hero__video-frame,
.hero__image--video.is-video-ready .hero__video-frame { opacity: 0; }
.hero__image--video .hero__video-frame { transform: translate(-50%, -50%) scale(1.25); }
.hero__image--video.is-film-frame-visible .hero__video-frame { opacity: 1; }
.hero__image--video.is-film-frame-visible .hero__poster { opacity: 0; }

.page-hero__media .page-hero__poster {
  animation: none;
  transform: scale(1.23);
  transition: opacity .55s ease;
}
.page-hero__media.is-video-ready .page-hero__video { opacity: 0; }
.page-hero__media.is-video-ready .page-hero__poster { opacity: 1; }
.page-hero__media.is-film-frame-visible .page-hero__video { opacity: 1; }
.page-hero__media.is-film-frame-visible .page-hero__poster { opacity: 0; }
.page-hero__media .page-hero__video { transform: translate(-50%, -50%) scale(1.25); }

/* The film fills the vertical header on phones without an iframe letterbox. */
body[data-page="fotoVideo"] .page-hero__video,
body[data-page="portofoliu"] .page-hero__video {
  width: max(100%, 145.78svh);
  height: max(100%, 56.25vw);
}

.fv-film-card--showreel { grid-column: 1 / -1; width: 100%; max-width: 64rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .hero__image--video .hero__poster,
  .page-hero__media .page-hero__poster { opacity: 1 !important; transition: none; }
  .hero__image--video .hero__video-frame,
  .page-hero__media .page-hero__video { display: none !important; }
}