/* =============================================================
   Hero met logo-uitsnede (16 sep 2026, definitief sinds 7 okt 2026)
   Over de video ligt een schaduw met het logo als gat erin, op
   schermgrootte. Bij het scrollen krimpt die schaduw naar de menubalk
   en het gat naar het logo in die balk.

   Alles hangt aan de class "hero-uitsnede", die vast op <html> staat in
   index.html (alleen de homepage heeft deze hero).
   ============================================================= */

.hero-schaduw,
.hero-schaduw__wit,
.hero-schaduw__doel{display:none}

/* ---------- de schaduw met het gat ----------
   Twee maskerlagen: het logo en een volle laag. "exclude" houdt alleen
   over wat níet overlapt, dus overal schaduw behalve binnen het logo.
   Grootte en plaats van het logo zet hero-uitsnede.js bij elke scroll;
   de waarden hieronder zijn alleen de beginstand vóór het script draait. */
.hero-uitsnede .hero-schaduw{
  display:block;
  position:fixed;top:0;left:0;right:0;height:100vh;
  z-index:88;                     /* boven de pagina, onder WhatsApp (90), menu (105+) en nav (150) */
  pointer-events:none;
  background-color:rgba(30,26,23,.8);
  -webkit-mask-image:var(--logo-mask),linear-gradient(#000,#000);
          mask-image:var(--logo-mask),linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:calc(min(88vw / .862, 72vh / .644) * .3),100% 100%;
          mask-size:calc(min(88vw / .862, 72vh / .644) * .3),100% 100%;
  -webkit-mask-position:center calc(40px - min(88vw / .862, 72vh / .644) * .3 * .182),0 0;
          mask-position:center calc(40px - min(88vw / .862, 72vh / .644) * .3 * .182),0 0;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

/* Wit logo op exact dezelfde plek als het gat. Het vult het gat in het
   laatste stuk van de scroll, zodat het gat overgaat in het witte nav-logo. */
.hero-uitsnede .hero-schaduw__wit{
  display:block;
  position:fixed;left:0;top:0;width:0;height:0;
  z-index:89;pointer-events:none;opacity:0;
  background-color:#fff;
  -webkit-mask:var(--logo-mask) center / contain no-repeat;
          mask:var(--logo-mask) center / contain no-repeat;
}

/* Onzichtbaar vlak ter grootte van het logo zelf (zonder de witruimte in
   logo.png). Het laadscherm vliegt hiernaartoe in plaats van naar de nav. */
.hero-uitsnede .hero-schaduw__doel{
  display:block;position:fixed;left:0;top:0;width:0;height:0;
  visibility:hidden;pointer-events:none;
}

/* De schaduw neemt het donker maken over. */
.hero-uitsnede .hero__overlay{display:none}

/* Knoppen en scroll-lijn boven de schaduw.
   - De scroll-lijn fadet weg zodra je begint te scrollen (hs-gescrold).
   - De knop ("Gratis proefweek") schuift mee omhoog met de pagina en vervaagt
     pas geleidelijk als hij de menubalk nadert. Het script zet daarvoor
     --cta-zicht (1 = helemaal zichtbaar, 0 = weg) en hs-cta-weg.
   Startplek = dezelfde als de oude vaste plek: de hero is 100vh + 95px hoog. */
.hero-uitsnede .hero__scroll{
  z-index:89;
  transition:opacity .3s var(--ease),visibility 0s linear 0s;
}
.hero-uitsnede.hs-gescrold .hero__scroll{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.hero-uitsnede .hero__actions{
  position:absolute;
  bottom:calc(clamp(68px,9vh,96px) + 16px + 95px);   /* 60px lager dan de oude vaste plek (14 okt 2026) */
  z-index:89;
  opacity:var(--cta-zicht,1);
  transition:none;
}
.hero-uitsnede.hs-cta-weg .hero__actions{visibility:hidden;pointer-events:none}

/* Zolang de schaduw nog geen balk is: nav zonder eigen achtergrond en
   zonder eigen logo — die rol heeft de schaduw. */
.hero-uitsnede:not(.hs-balk) .nav{
  background-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero-uitsnede:not(.hs-balk) .nav__logo{opacity:0;pointer-events:none}

/* Schaduw is balk geworden: de echte nav neemt het over, in de eindkleur
   van de schaduw. */
.hero-uitsnede.hs-balk .hero-schaduw,
.hero-uitsnede.hs-balk .hero-schaduw__wit{visibility:hidden}
.hero-uitsnede.hs-balk .nav{
  background-color:rgba(88,76,69,.8);
  box-shadow:0 2px 14px rgba(0,0,0,.06);
}

/* Menu open: geen schaduw eroverheen tekenen, en ook de balk hierboven niet —
   die regel is sterker dan body.menu-open .nav in styles.css, dus hier
   expliciet weer doorzichtig. Het menu is altijd de bovenste laag. */
.hero-uitsnede body.menu-open .hero-schaduw,
.hero-uitsnede body.menu-open .hero-schaduw__wit{visibility:hidden}
.hero-uitsnede.hs-balk body.menu-open .nav{background-color:transparent;box-shadow:none}