@import '../tokens.css?v=a555c920';

/* ── Homepage hero: the logo film ──────────────────────────────────
 * A looping brand film fills the first screen. It sits on .hero-eye for
 * the full-bleed plane, the email and the motion switch (hero-eye.css);
 * the film itself is play/pause-managed by initLazyVideos
 * ([data-lazy-video]). The film runs black → cream → black, so it parks on
 * the dark plane while it loads. */
.hero-video {
  background-color: var(--color-plane-dark);
  justify-content: flex-end;
}
.hero-video-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Reduced motion: the film never starts, so the plane is parked on the
 * finished lockup frame instead of the black first frame. */
:root[data-motion="reduce"] .hero-video-film { visibility: hidden; }
:root[data-motion="reduce"] .hero-video {
  background: var(--color-plane-dark) url('../../media/shared/hero-logo-lockup.jpg') center / cover no-repeat;
}