/* ============================================================
   style.css - opmaak van de pagina
   De pagina bestaat uit één schermvullende video. Verder niets.
   ============================================================ */

:root {
  /* Achtergrondkleur = de kleur aan de rand van de video, zodat je nooit
     een witte of zwarte flits ziet. script.js zet dezelfde kleur uit CONFIG. */
  --bg: #efe3cc;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* geen scrollbalken */
  overscroll-behavior: none;     /* geen "trekken" aan de pagina op telefoon */
  background: var(--bg);
  touch-action: none;            /* vinger = hoofd bewegen, niet scrollen of zoomen */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#hero {
  position: fixed;
  inset: 0;                      /* vastgezet aan alle vier de randen van het scherm */
  width: 100%;
  height: 100%;
  height: 100dvh;                /* dvh = houdt rekening met de adresbalk op mobiel */
  display: block;

  /* Altijd schermvullend: de video wordt zo geschaald dat hij het hele scherm
     bedekt; wat buiten beeld valt wordt afgesneden, gecentreerd. */
  object-fit: cover;
  object-position: center center;

  background: var(--bg);
  pointer-events: none;          /* alle muis/vinger-acties gaan naar de pagina zelf */

  /* Onzichtbaar tot alles klaar is; dan zachtjes in beeld (zie script.js). */
  opacity: 0;
  transition: opacity 0.7s ease;

  /* Bewust GEEN transform, zoom of drift: het beeld staat stil,
     alleen Loulou beweegt. */
}

html.ready #hero {
  opacity: 1;
}

/* Verberg de standaard afspeelknop die sommige telefoons over een video leggen. */
#hero::-webkit-media-controls,
#hero::-webkit-media-controls-start-playback-button,
#hero::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Wie "minder beweging" heeft ingesteld: geen fade-animatie. */
@media (prefers-reduced-motion: reduce) {
  #hero {
    transition: none;
  }
}