/* ============================================================
   bioscoop.css · de hero van over-ons.html (prefix: ovb), sinds 3 okt 2026
   ============================================================
   De hele hero is het beeld: Mika schermvullend op de achtergrond (een
   stilstaand beeld uit zijn video "Ai gaat de toekomst van ondernemerschap
   compleet veranderen (mijn verhaal)", op 0:14 aan de laptop in de studio),
   de tekst linksonder als op een titelkaart, met "Bekijk mijn verhaal"
   eronder. Klik: het licht gaat uit, de tekst wijkt, en in het midden komt
   de video scherp naar voren, uit hetzelfde beeld gesneden. Sluiten brengt
   het licht terug. Altijd donker, ook in het lichte thema: de tekst staat
   op de foto. Gekozen uit drie ontwerpen (keuzeronde 3 okt 2026, archief).

   De video is een YouTube-embed in het kader van de eigen speler (ytreel.js):
   poster, de glazen lens uit play.css, de draaiende lichtrand en de
   aftiteling uit reel.css. bioscoop.js doet het openen en sluiten.
   ============================================================ */

/* ---- Het kader om de YouTube-embed (.ytreel, ytreel.js) ---- */
.ytreel {
  position: relative;
  cursor: pointer;
}
.ytreel.has-controls {
  cursor: default;
}
.ytreel__poster {
  display: block;
  width: 100%;
  transition: opacity 0.45s var(--ease-out);
}
/* de poster blijft onder de iframe staan tot YouTube echt beeld geeft
   (is-lit, bij de eerste keer spelen); eerder flitst het kader zwart */
.ytreel.is-lit .ytreel__poster {
  opacity: 0;
}
.ytreel__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* zonder iframe mag de lege laag de klik niet opeten: die valt op de
   poster en start de video */
.ytreel:not(.is-started) .ytreel__frame {
  pointer-events: none;
}
.ytreel__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ---- De hero ---- */
.subhero.ovb {
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, 0.8);
  --ink-faint: rgba(255, 255, 255, 0.58);
  /* main.page houdt links ruimte voor de spine (pages.css); het beeld moet
     tot de rand van het scherm lopen, dus de hero steekt daar overheen */
  --ovb-spine: clamp(0rem, 1vw, 1.5rem);
  margin-left: calc(-1 * var(--ovb-spine));
  width: calc(100% + var(--ovb-spine));
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100svh;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem) !important;
  overflow: clip;
  color: var(--ink);
}
.ovb__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* het beeld komt heel langzaam tot rust, één keer */
[data-motion="on"] .ovb__bg {
  animation: ovb-rust 14s var(--ease-out) both;
}
@keyframes ovb-rust {
  from { scale: 1.06; }
  to { scale: 1; }
}
.ovb__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* op de telefoon staat de tekst onderin, het gezicht erboven; in dit
     shot zit Mika rechts van het midden achter de laptop */
  object-position: 78% 18%;
  filter: brightness(0.62) saturate(0.95);
  transition: filter 1.2s var(--ease-out);
}
/* Op een breed scherm staat de tekst links, dus Mika moet rechts van het
   midden. Door het beeld 115% breed te maken en links uit te lijnen komt
   zijn gezicht op ~72% van de breedte en draagt het donkere deel links de
   tekst. Rechts valt alleen de ringlamp weg. */
@media (min-width: 768px) {
  .ovb__bg img {
    position: absolute;
    left: 0;
    top: -4%;
    width: 115%;
    max-width: none;
    height: auto;
    min-height: 108%;
    object-position: 50% 0;
  }
}
/* altijd naar donker onderaan, ook in het lichte thema: de tekst staat
   erop. De lichte pagina begint daaronder met een rechte rand, zoals op een
   Apple-productpagina. */
.ovb__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 6, 12, 0.92) 0%, rgba(4, 6, 12, 0.55) 26%, transparent 60%),
    linear-gradient(100deg, rgba(4, 6, 12, 0.7) 0%, rgba(4, 6, 12, 0.28) 45%, transparent 70%);
  transition: opacity 0.9s var(--ease-out);
}
.ovb__text {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-out);
}
.ovb__text h1 {
  max-width: 14ch;
}
.ovb__text .lead {
  max-width: 42ch;
}
.ovb__play {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* de lens uit play.css, hier in de regel in plaats van midden op een kader */
.ovb__play .reel-play {
  --lens-hi: 1.5px 2px -1.5px;
  --lens-glow: -7px 12px -8px;
  --lens-inner: 20px -3px;
  --lens-drop: 14px 30px -11px;
  --lens-halo: 4px 16px -8px;
  position: static;
  flex: none;
  width: 60px;
  height: 60px;
  transform: none;
}
.ovb__play:hover .reel-play,
.ovb__play:focus-visible .reel-play {
  transform: scale(1.06);
}
.ovb__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 999px;
}
.ovb__label {
  display: grid;
  line-height: 1.2;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 560;
  letter-spacing: -0.012em;
}
.ovb__label small {
  font-size: var(--fs-small);
  font-weight: 440;
  color: var(--ink-faint);
}

/* ---- Het kader in het midden ----
   Uit hetzelfde beeld gesneden; komt scherp naar voren terwijl de rest van
   de hero donker wordt. */
.ovb__frame {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(100% - 2 * var(--gutter), (100svh - 11rem) * 16 / 9, 1400px);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, 0.9);
  opacity: 0;
  scale: 0.94;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease-out),
    scale 0.7s var(--ease-out),
    visibility 0s 0.5s;
}
.ovb.is-film .ovb__frame {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition:
    opacity 0.6s var(--ease-out) 0.15s,
    scale 0.9s var(--ease-spring) 0.15s,
    visibility 0s;
}
.ovb__frame .ytreel__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Draaiende lichtrand om de opname, dezelfde als op de trainingspagina
   (.aph__film in hero-ap.css) en de afspraakpagina: het merk-idioom voor
   "hier staat film". z-index 2: boven de iframe (1), onder de lens (3). */
.ovb__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    var(--accent) 10%,
    rgba(102, 198, 255, 0.9) 18%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 7s linear infinite;
  pointer-events: none;
}
.ovb.is-film .ovb__text {
  opacity: 0;
  translate: 0 22px;
  pointer-events: none;
}
.ovb.is-film .ovb__bg img {
  filter: brightness(0.16) saturate(0.6);
}
.ovb.is-film .ovb__shade {
  opacity: 0.5;
}

/* ---- Sluiten ----
   Op de telefoon rechtsboven onder de menubalk (het kader staat in het
   midden), op desktop rechtsonder onder het kader, want dat begint vlak
   onder de menubalk en bovenin staat de titelbalk van YouTube zelf. */
.ovb__close {
  position: absolute;
  z-index: 5;
  top: calc(5.6rem + env(safe-area-inset-top));
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 2.6rem;
  padding: 0 1.1rem 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(12, 16, 26, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #fff;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 520;
  cursor: pointer;
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity 0.4s var(--ease-out) 0.25s,
    translate 0.4s var(--ease-out) 0.25s,
    background-color 0.2s;
}
.ovb__close:hover {
  background: rgba(12, 16, 26, 0.72);
}
.ovb__close svg {
  width: 1em;
  height: 1em;
}
.ovb.is-film .ovb__close {
  opacity: 1;
  translate: 0 0;
}
@media (min-width: 768px) {
  .ovb__close {
    top: auto;
    bottom: 1.4rem;
  }
}

/* ---- Telefoon ---- */
@media (max-width: 767px) {
  /* de volle hoogte, zodat de tekst onder het gezicht begint */
  .subhero.ovb {
    min-height: 100svh;
  }
  .ovb__frame {
    width: calc(100% - 2 * var(--gutter));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ovb__bg {
    animation: none;
  }
  .ovb__frame::before {
    animation: none;
  }
}

/* ---- De menubalk op het beeld ----
   Staat hier altijd op een donker beeld, ook in het lichte thema. Zolang
   hij nog niet gescrold is (dan krijgt hij zijn eigen glas) nemen logo,
   links en knop de kleuren van het donkere thema. */
html.ovb-page[data-theme="light"] .nav:not(.is-scrolled) {
  --ink: #f3f6fb;
  --ink-soft: #c2cad4;
  --ink-faint: #8a93a0;
  --ink-invert: #0a0e16;
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-strong: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(174, 245, 253, 0.26);
  --line: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
html.ovb-page[data-theme="light"] .nav:not(.is-scrolled) .brand-word {
  color: #fff;
}
html.ovb-page[data-theme="light"] .nav:not(.is-scrolled) .brand-mark__img--light {
  display: none;
}
html.ovb-page[data-theme="light"] .nav:not(.is-scrolled) .brand-mark__img--dark {
  display: block;
}