/* --------------------- Titel + Media (Hero) ---------------------
   Zuivere CSS-animatie, geen JavaScript. De titel start op 100vh en
   krimpt na een korte pauze naar 80vh. Omdat .video-hero gewoon de
   volgende sectie is in de normale document-flow (geen absolute
   positionering), schuift die vanzelf mee omhoog het beeld in zodra
   .titel-hero kleiner wordt. */

.titel-media-scroll .titel-hero {
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: titel-media-scroll-height 2s ease-in-out forwards;
}

@keyframes titel-media-scroll-height {
  0%   { height: 100vh; }
  75%  { height: 100vh; }
  100% { height: 80vh; }
}

.titel-media-scroll .titel-hero h1 {
  margin: 0;
}

.titel-media-scroll .video-hero .content {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.titel-media-scroll .video-hero .content video,
.titel-media-scroll .video-hero .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}