/* --------------------------------------------------------------------------
   Hero-video

   Alleen de videolaag. De hero zelf — hoogte, scrim, tekst, knoppen — staat
   in styles.css en blijft ongemoeid; de video schuift er als extra laag
   tussen de foto en de scrim, en wordt pas zichtbaar als hij echt loopt.

   Twee dingen om te weten bij het lezen:
   - .hero draagt ook .grain, en `.grain > *` zet elk direct kind op z-index 1.
     Vandaar `.hero .hero-video`: die specificiteit wint daarvan.
   - z-index -2 is dezelfde laag als .hero-picture. De video staat erna in de
     HTML en tekent daardoor over de foto, maar blijft onder de scrim (-1).
   -------------------------------------------------------------------------- */
.hero .hero-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 45%;   /* gelijk aan .hero-media */
  opacity: 0;
  transition: opacity 0.9s var(--ease-out, ease);
  will-change: opacity;
}

/* Pas als hij daadwerkelijk speelt, gezet door js/hero.js. */
.hero.is-playing .hero-video { opacity: 1; }

/* De foto krijgt in styles.css een trage settle van schaal 1.06 naar 1 over 14 s.
   De video moet exact dezelfde beweging maken, anders vloeit hij op een andere
   schaal in en zie je het schip verspringen. Beide elementen staan al bij het
   parsen in de HTML, dus beide animaties starten op hetzelfde moment en lopen
   in de pas; de keyframes komen uit styles.css. */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-video { animation: hero-settle 14s var(--ease-out) both; }
}

/* Zelfde uitsnede-correctie als de foto op smallere schermen. */
@media (max-width: 820px) {
  .hero .hero-video { object-position: 58% 50%; }
}

/* Onder 768 px tonen foto en video allebei een staande uitsnede die al rond het
   schip is gesneden; daar hoort geen verschuiving meer bij. De regel voor de
   foto staat in styles.css op 58% en wordt hier teruggezet. */
@media (max-width: 767px) {
  .hero .hero-video,
  .hero .hero-media { object-position: 50% 50%; }
}

/* Bij bewegingsbeperking laadt hero.js sowieso geen video; dit is het vangnet
   voor het geval de voorkeur ná het laden wordt aangezet. */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-video { display: none; }
}