/* ══ Filmhero op de home ═════════════════════════════════════════════
   Goedgekeurd ontwerp van 7 oktober 2026. De scène is een stille film van
   1920x642 die in het midden staat; links en rechts ligt hetzelfde
   landschapsbeeld gespiegeld, zodat het beeld doorloopt tot de schermrand.
   `scripts/hero-film.js` tekent die drie delen op één canvas en veegt de
   twee verticale naden weg.

   De maten hieronder komen uit het goedgekeurde pakket en zijn bewust
   exact: het tekstvlak is 1188x211, de structuur begint 66px boven de
   titel en er zit circa 126px tussen de kop en het dichtstbijzijnde
   object in de film. Verander ze niet zonder nieuwe goedkeuring.

   Die maten gelden op 1440x900. Op andere liggende schermen schaalt de
   hero mee (zie "schalen op desktop" onderaan), zodat hij op een laptop
   van 720px hoog niet onder de vouw verdwijnt en op een groot scherm geen
   leeg groen vlak achterlaat. Op 1440x900 komt daar exact dit ontwerp uit. */

.hero-film {
  --kunst-breedte: min(1080px, 66vw);
  --scene-hoogte: calc(var(--kunst-breedte) * .334375);
  --scene-top: 96px;              /* ruimte voor de zwevende sitekop erboven */
  --copy-gat: calc(126px - var(--scene-hoogte) * .17);
  --lucht: 0px;                   /* extra ruimte op grote schermen, zie onderaan */
  /* de hero schuift onder de kop door, zodat de lucht achter de
     navigatiebalk doorloopt in plaats van eronder te beginnen */
  margin-top: calc(-1 * var(--kop-hoogte));
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding-top: var(--scene-top);
  /* geen ronding onderaan: het groen loopt door in de band eronder */
  background: linear-gradient(var(--film-lucht) 0, var(--film-nevel) 170px, var(--film-zand) 480px, var(--film-zand) 100%);
}

/* het pistachevlak waar de tekst op staat; de structuur erin houdt het
   vlak levend zonder dat je er een patroon in herkent */
.hero-film__grond {
  position: absolute; z-index: 0; pointer-events: none;
  /* het groen begint vast onder de scène, ook als er op een groot scherm
     extra ruimte tussen scène en kop zit; anders ontstaat er een zandband */
  top: calc(var(--scene-top) + var(--lucht) + var(--scene-hoogte) + var(--copy-gat) - 66px);
  left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 15% 10%, var(--film-gras-licht), transparent 60%),
    radial-gradient(ellipse at 86% 20%, var(--film-gras-diep), transparent 64%),
    var(--film-gras);
  -webkit-mask-image: linear-gradient(transparent, #000 66px);
  mask-image: linear-gradient(transparent, #000 66px);
}
.hero-film__grond::after {
  content: ""; position: absolute; inset: 0;
  opacity: .23; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath filter='url(%23n)' d='M0 0h160v160H0z' opacity='.65'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ── de scène ─────────────────────────────────────────────────────── */
.hero-film__scene {
  position: relative; height: var(--scene-hoogte); width: 100%;
  pointer-events: none;
  filter: saturate(1.48) contrast(1.065) brightness(.99);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 83%, transparent 100%);
}
.hero-film__landschap {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; width: calc(var(--kunst-breedte) * 3); height: 100%;
}
.hero-film__landschap img {
  display: block; width: var(--kunst-breedte); height: 100%;
  flex: 0 0 var(--kunst-breedte);
}
.hero-film__vleugel { transform: scaleX(-1); }

.hero-film__doek { position: relative; margin: auto; width: var(--kunst-breedte); height: 100%; }
.hero-film__doek video,
.hero-film__stil { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.hero-film__stil { visibility: hidden; }
.hero-film__doek.is-stil video { visibility: hidden; }
.hero-film__doek.is-stil .hero-film__stil { visibility: visible; }

/* zodra het canvas de drie delen samenvoegt verdwijnen de losse lagen */
.hero-film__canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-film__scene.is-samengesteld .hero-film__canvas { display: block; }
.hero-film__scene.is-samengesteld .hero-film__landschap,
.hero-film__scene.is-samengesteld .hero-film__doek { opacity: 0; }

/* ── tekst ────────────────────────────────────────────────────────── */
.hero-film__copy {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 680fr) minmax(0, 440fr); gap: 68px;
  width: min(1188px, calc(100% - 64px)); min-height: 211px;
  margin: var(--copy-gat) auto 72px;
}
.hero-film h1 {
  font-size: clamp(49px, 5.55vw, 80px); font-weight: 620;
  letter-spacing: -.066em; line-height: 1.075; margin: 0; color: var(--aubergine);
}
.hero-film h1 span { display: block; white-space: nowrap; }
.hero-film__intro {
  font-size: 20px; line-height: 1.4; letter-spacing: -.035em; font-weight: 430;
  margin: 0; max-width: 460px; color: var(--aubergine);
}
.hero-film__acties { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.hero-film__knop {
  font-size: 13px; font-weight: 600; letter-spacing: -.015em;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; text-decoration: none; color: var(--aubergine);
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero-film__knop:hover { transform: translateY(-2px); }
.hero-film__knop span { font-size: 21px; font-weight: 400; line-height: 1; }
.hero-film__knop--vol {
  padding: 13px 18px; background: var(--aubergine); color: var(--film-papier); border-radius: 13px;
}
.hero-film__knop--vol:hover { background: var(--film-knop-hover); }
.hero-film__knop--lijn { padding: 10px 2px; border-bottom: 2px solid var(--film-streep); min-height: 44px; }
.hero-film__micro {
  font-size: 11px; line-height: 16px; color: var(--film-micro);
  margin: 14px 0 0; letter-spacing: -.01em;
}
.hero-film__micro span { margin: 0 5px; }

/* ── schalen op desktop ───────────────────────────────────────────────
   Eén maateenheid voor de hele hero, gerekend vanaf het goedgekeurde
   ontwerp op 1440x900: daar is 1 eenheid precies 1px. Op een liggend
   scherm vult de hero het scherm op 50px na, dus de witte kaart begint
   altijd 50px boven de vouw. De opbouw van boven naar beneden, in
   eenheden van het ontwerp:

     96 lucht · 318 scène · 126 kop–object (minus 17% van de scène)
     · 211 tekst · 72 marge + 81 rust = 850

   --ut  de tekst. Groeit mee met breedte én hoogte, tot 1,2x: dan is het
         tekstvlak (1426px) even breed als het witte kopblok (1436px).
   --us  de scène. Neemt de hoogte die de tekst overlaat, maar wordt nooit
         breder dan 66% van het scherm (de objecten lopen tot de rand van
         de film) en hooguit 2x (de film is 1920 breed; groter wordt hij
         wazig). Op een lage laptop krimpt hij dus, zodat de kaart in beeld
         blijft.
   --ug  de afstanden rond de tekst; de kleinste van de twee.
   Blijft er dan nog hoogte over (een breed scherm of 4:3), dan komt die
   gelijk verdeeld boven de scène, tussen scène en kop en onder de tekst,
   in plaats van als één leeg groen vlak onderaan. */
@media (min-width: 1001px) and (orientation: landscape) {
  .hero-film {
    /* De hero vult het scherm op 50px na, maar niet eindeloos. De scène kan
       niet mee omhoog groeien: hij zit vast op 66vw breed (de objecten lopen
       tot de filmrand) en op 2x (de film is 1920px breed). Op een hoog scherm
       bleef daardoor een groeiend leeg groen vlak onder de tekst staan — 310px
       op 2560x1600. Boven 1020px (= het ontwerp van 850 op de maximale
       tekstschaal van 1,2) stopt de hero dus met meerekken en komt de witte
       kaart omhoog. Tot en met 1440x900 verandert er niets: daar is
       100svh - 50px altijd kleiner dan 1020px. */
    --vrij: min(calc(100svh - 50px), 1020px);
    --u-breed: calc(100vw / 1440);
    --u-hoog: calc(var(--vrij) / 850);
    --ut: min(var(--u-breed), var(--u-hoog), 1.2px);
    --tekst-hoogte: max(211px, calc(211 * var(--ut)));
    --scene-top: max(96px, calc(96 * var(--ut)));
    --rest: calc(var(--vrij) - var(--scene-top) - var(--tekst-hoogte));
    --us: min(var(--u-breed), 2px,
              max(calc(var(--rest) / 461.8), calc((var(--rest) - 198 * var(--ut)) / 263.8)));
    --ug: min(var(--us), var(--ut));
    --kunst-breedte: calc(950.4 * var(--us));
    --copy-gat: calc(126 * var(--ug) - var(--scene-hoogte) * .17);
    --lucht: calc(max(0px, var(--vrij) - var(--scene-top) - var(--scene-hoogte) - var(--copy-gat)
                  - var(--tekst-hoogte) - 153 * var(--ug)) / 3);
    min-height: var(--vrij);
    padding-top: calc(var(--scene-top) + var(--lucht));
    background: linear-gradient(var(--film-lucht) 0,
      var(--film-nevel) calc(var(--scene-top) + var(--lucht) + 74 * var(--us)),
      var(--film-zand) calc(var(--scene-top) + var(--lucht) + var(--scene-hoogte) + 66 * var(--ug)),
      var(--film-zand) 100%);
  }
  .hero-film__copy {
    width: min(calc(1188 * max(1px, var(--ut))), calc(100% - 64px));
    min-height: var(--tekst-hoogte);
    gap: max(40px, calc(68 * var(--ut)));
    margin: calc(var(--copy-gat) + var(--lucht)) auto calc(72 * var(--ug));
  }
  /* onder de 1440x900 blijft de tekst zoals hij was (alleen de kop wordt
     kleiner op een laag scherm); daarboven groeit alles gelijk op */
  .hero-film h1 { font-size: max(49px, calc(80 * var(--ut))); }
  .hero-film__intro { font-size: max(18px, calc(20 * var(--ut))); max-width: max(460px, calc(460 * var(--ut))); }
  .hero-film__acties { gap: max(10px, calc(14 * var(--ut))); margin-top: max(20px, calc(20 * var(--ut))); }
  .hero-film__knop { font-size: max(12px, calc(13 * var(--ut))); gap: max(9px, calc(12 * var(--ut))); min-height: max(48px, calc(48 * var(--ut))); }
  .hero-film__knop span { font-size: max(21px, calc(21 * var(--ut))); }
  .hero-film__knop--vol { padding: max(13px, calc(13 * var(--ut))) max(14px, calc(18 * var(--ut))); border-radius: max(13px, calc(13 * var(--ut))); }
  .hero-film__knop--lijn { padding: max(10px, calc(10 * var(--ut))) 2px; min-height: max(44px, calc(44 * var(--ut))); }
  .hero-film__micro { font-size: max(11px, calc(11 * var(--ut))); line-height: max(16px, calc(16 * var(--ut))); margin-top: max(14px, calc(14 * var(--ut))); }
}

/* ── responsive; de breekpunten komen uit het pakket ──────────────── */
@media (max-width: 1279px) {
  .hero-film__copy { gap: 40px; }
  .hero-film__intro { font-size: 18px; }
  .hero-film__knop { font-size: 12px; gap: 9px; }
  .hero-film__knop--vol { padding: 13px 14px; }
  .hero-film__acties { gap: 10px; }
}
/* tablet, en elk staand scherm: tekst onder de scène, de kaart volgt
   direct. Een staand scherm breder dan 1000px (iPad Pro) kreeg anders het
   liggende ontwerp bovenin met een halve meter leeg groen eronder. */
@media (max-width: 1000px), (orientation: portrait) {
  .hero-film { --kunst-breedte: 86vw; --copy-gat: 42px; }
  .hero-film__copy { grid-template-columns: 1fr; gap: 27px; max-width: 690px; min-height: 0; margin-bottom: 58px; }
  .hero-film h1 { font-size: clamp(51px, 7.9vw, 72px); }
  .hero-film__intro { font-size: 20px; max-width: 610px; }
  .hero-film__knop { font-size: 14px; }
  .hero-film__knop--vol { padding: 15px 21px; }
}
@media (max-width: 600px) {
  .hero-film {
    /* 446px breed geeft 149px hoog; met 84px erboven eindigt de
       scène op 233px vanaf de bovenkant van de pagina */
    --kunst-breedte: 446px; --scene-top: 84px; --copy-gat: 27px;
    background: linear-gradient(var(--film-lucht) 0, var(--film-nevel) 140px, var(--film-zand) 320px, var(--film-zand) 100%);
  }
  .hero-film__scene {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 84%, transparent);
  }
  /* 36px onder de microregel: op 0 raakte die de witte kaart eronder
     precies, zonder een pixel lucht. */
  .hero-film__copy { width: auto; margin-left: 25px; margin-right: 25px; margin-bottom: 36px; gap: 16px; }
  .hero-film h1 { font-size: clamp(30px, 10.3vw, 59px); letter-spacing: -.064em; line-height: 1.075; font-weight: 650; }
  .hero-film__intro { font-size: 17px; line-height: 1.52; letter-spacing: -.025em; }
  .hero-film__acties { flex-direction: column; align-items: stretch; gap: 11px; margin-top: 16px; }
  .hero-film__knop { font-size: 15px; min-height: 52px; justify-content: space-between; }
  .hero-film__knop--vol { padding: 16px 19px; border-radius: 14px; }
  .hero-film__knop--lijn { padding: 9px 1px; align-self: flex-start; gap: 20px; min-height: 39px; }
  .hero-film__micro { font-size: 11px; margin-top: 14px; }
}

/* liggende telefoon: de scène mag niet het hele scherm vullen, anders zie
   je de kop pas na scrollen. Hij wordt begrensd door de hoogte. */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 600px) {
  .hero-film { --kunst-breedte: min(86vw, 100svh); --scene-top: 80px; --copy-gat: 27px; }
  .hero-film h1 { font-size: clamp(34px, 11svh, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film__knop { transition: none; }
  .hero-film__doek video { visibility: hidden; }
  .hero-film__stil { visibility: visible; }
}