/* boosten.nu — index.html: de hero als scroll-gestuurde film.

   De video wordt niet afgespeeld maar afgetast: je scrollpositie bepaalt welk
   frame je ziet. Daarom is vooruit en achteruit even soepel, en hoeft er geen
   play() te slagen — wat op mobiel geregeld geweigerd wordt.

   Dat werkt alleen omdat assets/video/hero-scroll-1600.mp4 all-intra is: elk
   frame is een keyframe (362 frames, 30 fps, 12,07 s, 1600 px breed, CRF 30). Vervang je die video, let daar
   dan op — een gewone export heeft één keyframe per twee seconden en dan hikt
   het scrubben zichtbaar.

   Dezelfde aanpak als cinema.js op websites.html, waar de laptopclips ook
   afgetast worden.

   Op een telefoon, bij een spaarstand-verbinding en bij prefers-reduced-motion
   blijft .herofilm--live uit, en dan geldt de terugval onderaan dit bestand:
   een gewone hero van één scherm hoog, zonder scrollfilm. Die 5,9 MB wordt dan
   niet eens opgehaald; op telefoon speelt er een korte staande loop. Zonder JavaScript krijg je hetzelfde. */

.herofilm {
  /* De scrollruimte ná het eerste beeld. Dit is de enige knop om aan te
     draaien: meer = de film houdt de pagina langer vast en gaat langzamer,
     minder = sneller maar hakkeliger. Bij 260vh op een scherm van 900px zit je
     op ruim 6 px scroll per frame. */
  --film-run: 260vh;
  position: relative;
}

/* De film loopt onder de sticky header door, zodat die niet als losse balk
   op een donkere hero ligt. De kop houdt zelf --header-h ruimte vrij. Alleen
   als de film echt draait; in de statische terugval blijft de header staan
   waar hij staat. */
.herofilm--live { margin-top: calc(-1 * var(--header-h)); }

.herofilm__runway { height: calc(100vh + var(--film-run)); }

.herofilm__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--navy-900);
}

.herofilm__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Donkere laag over de video, zodat de kop leesbaar blijft wat er ook in beeld
   is. Zwaarder linksonder, waar de tekst staat. */
.herofilm__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 30, 47, .82) 0%, rgba(10, 30, 47, .55) 42%, rgba(10, 30, 47, .12) 78%),
    linear-gradient(to top, rgba(10, 30, 47, .55) 0%, rgba(10, 30, 47, 0) 45%);
}

.herofilm__copy {
  position: relative;
  height: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--header-h) var(--space-5) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  max-width: min(var(--container-lg), 100%);
}

/* De tekst staat op de donkere film, dus de kleuren uit .hero__copy kloppen
   hier niet. */
.herofilm__copy h1 {
  font: var(--type-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--cream-100);
  max-width: 20ch;
}
.herofilm__copy .lead {
  font: var(--type-body);
  font-size: var(--text-lg);
  color: var(--navy-200);
  max-width: 46ch;
}
.herofilm__copy .lead a {
  color: var(--cream-100);
  text-decoration-color: var(--gold-400);
}
.herofilm__copy .lead a:hover { color: var(--gold-400); }
.herofilm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.herofilm__note { font: var(--type-mono); color: var(--navy-200); }

/* Het merkteken uit de hoek, zoals op de andere pagina's, maar lichter omdat
   het hier op donker ligt. */
/* Het watermerk staat alleen op telefoon; op laptop haalt het de rust uit
   de film weg. Zie de breakpoint onderaan dit bestand. */
.herofilm__watermark {
  display: none;
  position: absolute;
  right: -6%;
  top: -14%;
  width: min(46vw, 620px);
  height: auto;
  opacity: .05;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

/* Scrollwenk, alleen aan het begin. */
.herofilm__hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-mono);
  font-size: var(--text-sm);
  color: var(--navy-200);
  pointer-events: none;
}
.herofilm__hint::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, var(--gold-400), rgba(224, 172, 72, 0));
}

/* ---------- de statische terugval ----------
   Telefoon, spaarstand, prefers-reduced-motion: geen video, geen scrollruimte,
   gewoon een hero van normale hoogte. Zonder JavaScript is dit ook wat je
   krijgt, want .herofilm--live wordt door de JS gezet. */

.herofilm:not(.herofilm--live) .herofilm__runway { height: auto; }
.herofilm:not(.herofilm--live) .herofilm__stage {
  /* relative, niet static: anders hangt het absoluut gepositioneerde
     watermerk aan .herofilm en valt het buiten deze overflow: hidden. */
  position: relative;
  height: auto;
  min-height: 78vh;
}
.herofilm:not(.herofilm--live) .herofilm__video,
.herofilm:not(.herofilm--live) .herofilm__hint { display: none; }
/* Zonder video is de scrim de achtergrond; de navy van het toneel doet de rest. */
.herofilm:not(.herofilm--live) .herofilm__scrim {
  background: linear-gradient(to top right, rgba(10, 30, 47, .35), rgba(27, 70, 103, .55));
}
.herofilm:not(.herofilm--live) .herofilm__copy {
  min-height: 78vh;
  padding-top: var(--space-9);
  padding-bottom: var(--space-10);
}

/* ---------- smalle schermen ---------- */

@media (max-width: 759px) {
  .herofilm__watermark { display: block; }
  .herofilm__copy h1 { max-width: none; }
  .herofilm__copy .lead { max-width: none; }
  .herofilm__actions { width: 100%; }
  .herofilm__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ---------- de header zolang je in de film zit ----------
   hero-film.js zet .film-over op <body> zolang de film de headerregel nog
   bedekt. Alles hier is dus tijdelijk en op index.html; zodra de pagina
   eroverheen komt is de header weer gewoon de cremebalk. */

/* Let op de specificiteit: site.css heeft `.header__logo img { display: block }`
   (0,1,1), dus een losse klasse (0,1,0) verliest daarvan. Vandaar het
   element erbij. */
.header__logo img.header__logo--light { display: none; }

body.film-over .header::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.film-over .header__logo img:first-child { display: none; }
body.film-over .header__logo img.header__logo--light { display: block; }
/* Bleek navy op bewegend beeld leest slecht: de links staan meteen in cream,
   de kleur die eerst pas bij hover kwam. */
body.film-over .nav a { color: var(--cream-100); }
/* Omdat kleur nu geen hover meer kan aangeven, komt er een lijntje onder:
   hetzelfde balkje als de actieve pagina, maar in cream en uitgeschoven. */
body.film-over .nav a:not([aria-current="page"])::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px;
  height: var(--border-width-thick); background: var(--cream-100);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}
body.film-over .nav a:not([aria-current="page"]):hover::after,
body.film-over .nav a:not([aria-current="page"]):focus-visible::after { transform: scaleX(1); }
body.film-over .menu-toggle { color: var(--cream-100); }

/* De navy CTA valt weg op donker; op de film wordt hij goud. */
body.film-over .header__cta {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: transparent;
}
body.film-over .header__cta:hover { background: var(--gold-400); }

/* Niet hard omklappen bij de overgang. De balk houdt ook zijn krimp-transitie
   uit site.css. */
.header::before { transition: background-color 220ms var(--ease-standard), border-color 220ms var(--ease-standard), transform var(--dur-slow) var(--ease-out); }
.header__cta,
.nav a { transition: background-color 220ms var(--ease-standard), color 220ms var(--ease-standard), border-color 220ms var(--ease-standard); }

@media (prefers-reduced-motion: reduce) {
  .header::before, .header__cta, .nav a { transition: none; }
  body.film-over .nav a::after { transition: none; }
}

/* ---------- de kop die opbouwt ----------
   De woorden komen één voor één op met een korte blur; over "boosten" trekt
   één keer een lichtstreep en er tekent zich een gouden streep onder met een
   schuine rechterkant, de hoek uit het logo. */
.herofilm__kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-300);
}
.herofilm__title .w { display: inline-block; animation: hf-wrise 900ms var(--ease-out) both; }
.herofilm__title .w:nth-child(2) { animation-delay: 90ms; }
.herofilm__title .w:nth-child(3) { animation-delay: 180ms; }
.herofilm__title .w--boost {
  position: relative;
  color: transparent;
  background: linear-gradient(100deg, var(--cream-100) 0 40%, var(--gold-300) 48%, var(--paper) 50%, var(--gold-300) 52%, var(--cream-100) 60% 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: hf-wrise 900ms var(--ease-out) 270ms both, hf-sweep 2.2s var(--ease-standard) 1.1s 1 both;
}
.herofilm__title .w--boost::after {
  content: ""; position: absolute; left: .02em; right: .04em; bottom: -.04em; height: .09em;
  background: var(--gold-500);
  clip-path: polygon(0 0, calc(100% - .09em) 0, 100% 100%, 0 100%);
  transform: scaleX(0); transform-origin: left center;
  animation: hf-uline 700ms var(--ease-out) 900ms forwards;
}
/* Merk-intro (intro/boosten-intro.js): de woorden van de kop wachten tot de
   scheur opengaat. Tijdens de intro staat hun animatie uit; zodra
   html.bi-revealing staat, geldt hij weer en begint hij opnieuw. Zo zijn ze
   niet al klaar onder de intro en lopen ze niet dubbel met data-bi-reveal op
   de kop zelf. Speelt de intro niet, dan komt bi-intro nooit en loopt alles
   zoals altijd. */
html.bi-intro:not(.bi-revealing) .herofilm__title .w,
html.bi-intro:not(.bi-revealing) .herofilm__title .w--boost::after { animation: none; }
@keyframes hf-wrise { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hf-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hf-uline { to { transform: scaleX(1); } }

/* De wisselende belofte onder de kop */
.herofilm__rot { font-size: var(--text-sm); color: var(--gold-300); min-height: 1.6em; }
.herofilm__rot-pre { color: var(--gold-500); }

/* Telefoon: een staande loop achter de kop. Op desktop niet getoond en ook
   niet opgehaald (preload="none", src zet hero-film.js alleen op telefoon). */
.herofilm__mobile { display: none; }
@media (max-width: 759px) {
  .herofilm__mobile {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .herofilm:not(.herofilm--live) .herofilm__scrim {
    background: linear-gradient(to top, rgba(10, 30, 47, .94) 0%, rgba(10, 30, 47, .7) 45%, rgba(10, 30, 47, .3) 100%);
  }
  .herofilm:not(.herofilm--live) .herofilm__copy { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .herofilm__title .w--boost { background-position: 0 0; }
  .herofilm__title .w--boost::after { transform: none; }
}