/* Scroll-film "De Bestuurstafel" — daglicht-precisie-laag bovenop styles.css.
   De film is filmmoment 2 (naast de hero): koel near-black, in- en uitstappen
   via de 120px overgangsband + tick-liniaal (markup in index.html).
   Engine (film.js) ongewijzigd; alleen de huid is nieuw. */
:root{--seam:var(--film-bg)}   /* was #592d19 (warm, uit de footage); nu de koele filmwereld */

/* ---- driver + stage --------------------------------------------------- */
.film{position:relative;background:var(--film-bg)}
.film__driver{height:850vh;position:relative}   /* 5 hoofdstukken x 170vh */
.film__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--film-bg)}
#film-canvas,#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- beats (copy over de film) ---------------------------------------- */
/* paneel op koele near-black basis: gegarandeerd leesbaar op elke
   footage-helderheid; radius en hairline volgen het design system */
.beat{position:absolute;z-index:3;left:var(--pad-x);top:50%;
  transform:translateY(-50%);opacity:0;width:min(58vw,860px);
  pointer-events:none;will-change:opacity,transform;
  padding:clamp(22px,3.5vh,40px) clamp(24px,2.6vw,44px);
  background:rgba(10,13,18,.6);
  -webkit-backdrop-filter:blur(18px) saturate(.92);
  backdrop-filter:blur(18px) saturate(.92);
  border:1px solid var(--film-hairline);border-radius:var(--radius-m)}
/* bredere beats voor stats (2) en pijlers (3): het mock-raster is 4-breed */
@media (min-width:1024px){.beat--wide{width:min(84vw,1112px)}}
/* gecentreerde finale-hoofdstukken (4 en 5) — engine overschrijft transform,
   dus centreren via left + negatieve marge, niet via translateX */
@media (min-width:1024px){
  .beat--center{left:50%;margin-left:calc(-.5 * min(58vw,860px));text-align:center}
  .beat--center .lead{margin-inline:auto}
}
@media (max-width:1023px){.beat{width:92vw;top:9vh}}
.beat .display{font:var(--type-display);letter-spacing:-.025em;color:var(--film-ink);
  font-size:clamp(30px,min(4.6vw,7vh),52px)}
.beat .lead{margin-top:16px;color:var(--film-ink-2);
  font:italic 400 clamp(17px,min(1.8vw,2.8vh),22px)/1.5 var(--font-serif);max-width:560px}
/* Hoofdstuk-indexen en -tellers blijven weg (Clayton, 2026-08-17), maar de
   drie hoofdstuklabels zijn contentcontract (31bc366) en op 2026-08-18 door
   Clayton teruggevraagd. Ze dragen de meetlijn-metastijl uit het mockup. */
.beat .kicker{font:var(--type-meta);letter-spacing:var(--ls-meta);
  text-transform:uppercase;color:var(--film-ink-2);
  margin-bottom:clamp(10px,1.6vh,14px)}
.beat .meta{color:var(--film-ink-2);margin-top:clamp(14px,2.4vh,22px);
  font:var(--type-small)}
.beat--center .meta{margin-inline:auto}
.beat__cta{margin-top:clamp(18px,3vh,28px)}
.beat--center .beat__cta{display:flex;justify-content:center}

/* stats en pijlers binnen een beat: compacter dan de mock-vrijstand */
.beat .stats{margin-top:clamp(18px,3.5vh,32px)}
.beat .stat{padding:0 clamp(14px,1.8vw,28px)}
.beat .stat:first-child{padding-left:0}
.beat .stat__num{font-size:clamp(28px,min(3.4vw,5.5vh),48px)}
.beat .stat__num--word{font-size:clamp(18px,min(1.9vw,3.2vh),26px);padding-top:10px}
/* Krappere kolommen: "Directietrainingen" brak af op de laatste letter. */
.beat .pillars{margin-top:clamp(18px,3.5vh,32px);gap:16px}
.beat .pillar{padding:20px}
/* overflow-wrap:break-word (body) brak "Directietrainingen" middenin af zodra
   het woord net niet paste; kleiner corps laat het heel. */
.beat .pillar__t{font-size:clamp(15px,1.42vw,19px);line-height:1.3;
  overflow-wrap:normal}
@media (max-width:1023px){
  .beat .stats{flex-wrap:wrap}
  .beat .stat{flex:1 1 40%;padding:10px 14px}
  .beat .stat:nth-child(odd){padding-left:0;border-left:0}
}

/* ---- seam-fade + film-loader ------------------------------------------ */
.film__fade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 42%,var(--seam) 96%)}
.film__loader{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  gap:14px;align-items:center;justify-content:center;background:var(--film-bg);
  transition:opacity .6s ease;font:var(--type-meta);letter-spacing:.24em;
  text-transform:uppercase;color:var(--film-ink-2)}
.film__loader span{display:block}
.film__loader b{display:block;font-weight:400;width:clamp(120px,16vw,220px);
  height:2px;background:var(--film-hairline)}
.film__loader i{display:block;height:100%;width:0%;background:var(--film-accent)}
.film__loader.done{opacity:0;pointer-events:none}

/* ---- landing zone: film -> licht via band + ticks (markup) ------------- */
.film-landing{padding-top:var(--space-8)}

/* ---- korte viewports (1366x768-klasse): beats compacter ---------------- */
@media (max-height:800px){
  .beat{padding:clamp(16px,2.5vh,26px) clamp(20px,2.2vw,32px)}
  .beat .display{font-size:clamp(26px,min(4vw,6vh),40px)}
  .beat .stats{margin-top:clamp(12px,2vh,20px)}
  .beat .stat__num{font-size:clamp(24px,min(3vw,4.8vh),40px)}
  .beat .stat__detail{display:none}
  .beat .pillars{margin-top:clamp(12px,2vh,20px);gap:14px}
  .beat .pillar{padding:16px}
  .beat .pillar__d{font-size:13px}
  .beat__meta{margin-top:12px}
}

/* ---- reduced motion: statisch en eerlijk ------------------------------ */
.film__poster{display:none}
@media (prefers-reduced-motion:reduce){
  #film-canvas,.film__fade,.film__loader{display:none}
  .film__driver{height:auto}
  .film__stage{position:static;height:auto;overflow:visible;background:var(--film-bg)}
  .film__poster{display:block;width:100%;height:auto}
  .beat{position:static;transform:none;opacity:1;max-width:none;width:auto;
    margin:0;padding:clamp(40px,8vh,90px) var(--pad-x);pointer-events:auto;
    background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  #hero-canvas{display:none}
  .hero__media{background:url("assets/hero-poster.jpg") center/cover no-repeat}
}