/* film.css — de hero als scroll-verhaal (operatorbesluit #19, 2026-10-02).
   Bron: site/content/film/ (SLOT.md). Beat sheet: SMART SYSTEM/SITE/motion/2026-10-02/MOTION.md.
   Herstel en beeldvullende hero: SMART SYSTEM/SITE/UX/specs/2026-10-02_hero-film-favicon.md (DW-1, DW-2, DW-3).
   Regels: alleen var(--…) voor duur, curve en ruimte (vorm.json -> maat); animeren alleen transform en opacity.
   De standaardregels hieronder ZIJN het eindframe: zonder JS, bij reduced motion en na de film staat
   precies dit. De startpose van akte 1 bestaat alleen in het @media-blok onderaan. */

/* ── de hero met de film ─────────────────────────────────────────────────── */
/* .film-blok = de figuur (met de bediening in haar kopregel); staand is dit blok wat pint. */
.hero-grid{grid-template-areas:"copy film"}
.hero-copy{grid-area:copy}
.film-blok{grid-area:film;display:flex;flex-direction:column;justify-content:center;min-width:0;background:var(--bg)}
@media(max-width:940px){
  .hero-grid{grid-template-areas:"copy" "film";row-gap:var(--ruimte-8)}
}
/* DW-3 · liggend vanaf 768: de hero is een beeldvullend toneel (100svh - nav), tweekoloms, en past,
   zodat de film pint. De h1 blijft het LCP-element; alleen maten, geen beweging. */
@media(min-width:768px) and (aspect-ratio > 5/4){
  .hero{padding-block:clamp(var(--ruimte-4),4svh,var(--ruimte-12)) var(--ruimte-12)}   /* spec 2026-10-06: geen 100svh-toneel meer, de film pint niet */
  .hero>.w{width:100%}
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);grid-template-areas:"copy film";row-gap:0}
  .hero-copy{max-width:none}
  .hero h1{font-size:min(clamp(40px,5.6vw,64px),7.2svh)}
  /* .film-rij-hoogte: zie het blok lage liggende schermen (de basisregel staat hieronder) */
}
/* Staand: wenkbrauw, h1, antwoordveld, toneel, dan de lede. De lede heeft geen focusbare inhoud,
   dus de afwijking tussen DOM- en beeldvolgorde raakt de tabvolgorde niet (WCAG 1.3.2 getoetst). */
@media(max-aspect-ratio:5/4){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "h1" "lede" "cta" "pakket" "tweede" "film";grid-template-rows:none;row-gap:0}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{grid-area:eyebrow}
  .hero-copy>h1{grid-area:h1}
  .hero-copy>.lede{grid-area:lede;margin-top:var(--ruimte-4)}
  .hero-copy>.pakketrij{grid-area:pakket}
  .hero-copy>.herocta{grid-area:cta}
  .hero-copy>.herosecondary{grid-area:tweede}
  .hero-copy>.herocta{margin-top:var(--ruimte-6)}
  /* DW-3.5: het filmblok is staand een eigen toneel van een scherm hoog, na h1 en veld. */
  .film-blok{margin-top:var(--ruimte-6);padding-top:var(--ruimte-2)}
}

/* ── het toneel ──────────────────────────────────────────────────────────── */
.film{--film-merk:clamp(72px,9vw,96px);--film-gap:var(--ruimte-6);margin:0;display:grid;grid-template-areas:"kop" "toneel" "schriften" "naar";row-gap:var(--ruimte-6);min-width:0}
@media(max-width:520px){.film{--film-gap:var(--ruimte-4)}}
/* DW-2 · liggend: één kopregel boven de rijen, label links en bediening rechts. Past het niet naast
   elkaar, dan staat de bediening rechts erboven (wrap-reverse), nooit tussen label en rijen. */
.film-kop{grid-area:kop;display:flex;flex-wrap:wrap-reverse;align-items:baseline;justify-content:space-between;gap:var(--ruimte-3) var(--ruimte-4);min-width:0}
/* DW-1 · het toneel knipt af op zijn rand: geen kaart of rij buiten het toneel of het beeld. */
.film-toneel{grid-area:toneel;position:relative;display:grid;grid-template-columns:var(--film-merk) minmax(0,1fr);grid-template-areas:"links rijen" "links grens";column-gap:var(--film-gap);row-gap:var(--ruimte-3);min-width:0;overflow:clip}
/* DW-1 · de D-kolom is dekkend: een kaart die naar het hol vliegt, verdwijnt áchter de kolom. */
.film-links{grid-area:links;display:grid;align-items:center;justify-items:center;position:relative;z-index:2;background:var(--bg);isolation:isolate}
.film-links>*{grid-area:1/1}
.film-merk{width:var(--film-merk);height:auto;aspect-ratio:1;overflow:visible}
.film-merk path,.film-merk rect{transform-box:fill-box;transform-origin:center}

/* akte 1: de week staat waar de D straks komt (alleen de live tak) */
.film-week{display:grid;gap:var(--ruimte-1);margin:0;position:relative;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--fg-faint);visibility:hidden}
.film-dag{display:block;padding:0 var(--ruimte-2)}
.film-dagmerk{position:absolute;left:0;top:0;width:2px;height:1.6em;background:var(--fg-muted)}

.film-label{display:grid;margin:0;min-width:0;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.film-label>span{grid-area:1/1}
.film-kolom{visibility:hidden}

/* DW-1 · de linkerrand van de rijkolom is de uitgang van de D: een rij schuift er zichtbaar uit,
   en geen letter staat ooit onder het merk (alleen horizontaal afgeknipt). */
.film-rijen{grid-area:rijen;list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);overflow-x:clip;overflow-clip-margin:0}
.film-rij{display:grid;align-items:center;min-height:60px;border-bottom:1px solid var(--hair)}
.film-rij>*{grid-area:1/1;min-width:0}
.film-regel{display:grid;gap:2px;padding:var(--ruimte-2) 0}
.film-naam{font-size:15px;font-weight:600;line-height:1.35;color:var(--fg)}
.film-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-1) var(--ruimte-2)}
.film-chip{font-style:normal;font-family:var(--mono);font-size:14px;line-height:1.5;white-space:nowrap}
.film-klaar{color:var(--fg-faint)}
.film-wacht{color:var(--fg-muted);padding:0 var(--ruimte-1);border:1px solid currentColor;border-radius:var(--r-chip)}
.film-kaart{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ruimte-1) var(--ruimte-3);margin-inline:var(--ruimte-3);padding:var(--ruimte-2) var(--ruimte-3);border:1px solid var(--hair-2);border-radius:var(--r-chip);background:var(--surface);visibility:hidden}
.film-kaart b{font-weight:600;font-size:15px;line-height:1.35;min-width:0}
.film-kaart i{font-style:normal;font-family:var(--mono);font-size:14px;color:var(--fg-muted);white-space:nowrap}

.film-grens{grid-area:grens;display:flex;align-items:center;gap:var(--ruimte-3);margin:0;font-family:var(--mono);font-size:14px;color:var(--fg-muted)}
.film-lijn{display:block;flex:0 0 var(--ruimte-12);height:1px;background:var(--fg-faint);transform-origin:left center}

/* de bijschriften: in het eindframe een korte lijst, E als slotregel. Elke regel houdt zijn plek
   vanaf het eerste frame (alleen opacity en transform bewegen), dus het vak verspringt niet. */
.film-schriften{grid-area:schriften;display:grid;gap:var(--ruimte-1)}
.film-bs{margin:0;max-width:none;font-size:clamp(16px,1.5vw,var(--t-kop3));line-height:1.35;font-weight:400;color:var(--fg-muted)}
.film-slot{margin-top:var(--ruimte-2);font-weight:650;letter-spacing:-.016em;color:var(--fg);text-wrap:balance}
.film-naar{grid-area:naar;margin:0}

/* de bediening: alleen in de live tak (film.js haalt `hidden` weg) */
.film-chrome{display:flex;flex-wrap:wrap;gap:var(--ruimte-2);justify-content:flex-end;margin:0 0 0 auto}
.film-chrome[hidden]{display:none}
.film-knop{min-height:32px;padding:var(--ruimte-1) var(--ruimte-3);border:1px solid var(--hair-2);border-radius:var(--r-chip);background:transparent;color:var(--fg-muted);font-family:var(--mono);font-size:14px;letter-spacing:.04em;cursor:pointer}
.film-knop[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}
.film-knop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.film-knop:hover{color:var(--fg);border-color:var(--fg)}}
/* DW-3 · lage liggende schermen (tot 760 hoog): de film is dan de hoogste kolom; de lucht krimpt
   een tokenstap zodat de hero onder de nav past en de film pint (toetsen 910x670, 1024x670). */
@media(min-width:768px) and (aspect-ratio > 5/4) and (max-height:760px){
  .hero{padding-block:var(--ruimte-2)}
  .film-kop{margin-bottom:var(--ruimte-2)}   /* de cameraduw (toneel 1,04 om het hol, t20-38) eet ~7 px van de lucht onder de knoppen; zo blijft die >= 16 */
  .film{row-gap:var(--ruimte-4)}
  .film-regel{padding-block:var(--ruimte-1)}
  .film-rij{min-height:clamp(44px,7svh,60px)}   /* hier, niet in DW-3: de basisregel .film-rij staat later in dit blad */
}
/* DW-2 · staand: label boven het toneel, bediening onder de figuur; rij-tussenruimte (ruimte-4) plus
   ruimte-2 = ruimte-6 onder .film-naar. */
@media(max-aspect-ratio:5/4){
  .film{grid-template-areas:"schriften" "label" "toneel" "naar" "chrome";row-gap:var(--ruimte-4)}
  .film-kop{display:contents}
  .film-label{grid-area:label}
  .film-chrome{grid-area:chrome;justify-content:flex-start;margin:var(--ruimte-2) 0 0}
}

/* spec 2026-10-06_home-above-fold par. 5 (rij 1f) · modus vrij: een vast toneel van drie rijen, figuur
   <= 430 px liggend en <= 280 px staand. Het eindframe toont label, rijen, grensregel, slotregel E en de
   doorverwijzing; de bijschriften A-D zijn het verhaal van de scrollfilm en vallen in deze modus weg
   (staand ook E: de h1 en de lede zeggen het al). Alleen tokens. */
.film[data-modus="vrij"]{row-gap:var(--ruimte-4)}
.film[data-modus="vrij"] .film-bs:not(.film-slot){display:none}
.film[data-modus="vrij"] .film-slot{margin-top:0}
@media(max-aspect-ratio:5/4){
  .hero:has(.film[data-modus="vrij"]){padding-bottom:var(--ruimte-12)}
  .film-blok:has(.film[data-modus="vrij"]){margin-top:var(--ruimte-4);padding-top:0}
  .film[data-modus="vrij"]{--film-merk:var(--ruimte-12);grid-template-areas:"label" "toneel" "naar";row-gap:var(--ruimte-2)}
  .film[data-modus="vrij"] .film-schriften{display:none}
  .film[data-modus="vrij"] .film-kaart{margin-inline:0;padding-block:var(--ruimte-1)}
  .film[data-modus="vrij"] .film-rij{min-height:var(--ruimte-12)}
  .film[data-modus="vrij"] .film-regel{padding-block:var(--ruimte-1)}
}

/* het goedkeur-blok direct onder de film (#19, aanvulling 2026-10-02) */
.besluit{padding:var(--ritme) 0}
@media(max-width:767px){.besluit{padding-block:var(--ruimte-12)}}
.besluit .demo{max-width:560px;margin:0 auto}
/* DW-3 (Q2): de hint en de tweede link van de hero staan als eerste regel van dit blok. */
.heronavolg{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ruimte-3) var(--ruimte-6);margin-bottom:var(--ruimte-12)}
.heronavolg .herohint{margin:0}
.heronavolg .herosecondary{margin:0}

/* ── de live tak: de startpose van akte 1 ────────────────────────────────── */
@media(prefers-reduced-motion:no-preference) and (scripting:enabled){
  /* de bediening houdt haar plek vanaf de eerste verf (geen CLS als film.js haar toont of weghaalt) */
  html.js .film:not([data-modus="vrij"]) .film-chrome[hidden]{display:flex;visibility:hidden}
  html.js:not(.film-uit) .film-kaart,
  html.js:not(.film-uit) .film-kolom,
  html.js:not(.film-uit) .film-week{visibility:visible}
  html.js:not(.film-uit) .film-kaart{opacity:0;transform:translateY(24px) scale(.94)}
  html.js:not(.film-uit) .film-regel,
  html.js:not(.film-uit) .film-wacht,
  html.js:not(.film-uit) .film-lijst,
  html.js:not(.film-uit) .film-grens span,
  html.js:not(.film-uit) .film-bs:not([data-bs="a"]),
  html.js:not(.film-uit) .film-naar{opacity:0}
  html.js:not(.film-uit) .film-merk{opacity:0;transform:scale(.92)}
  html.js:not(.film-uit) .film-lijn{transform:scaleX(0)}
  /* Vangnet: zet film.js binnen --film-vangnet geen .film-aan, dan komt het eindframe terug. */
  html.js:not(.film-uit):not(.film-aan) .film-kaart,
  html.js:not(.film-uit):not(.film-aan) .film-kolom,
  html.js:not(.film-uit):not(.film-aan) .film-week{animation:film-weg var(--duur-2) var(--soepel-uit) var(--film-vangnet) forwards}
  html.js:not(.film-uit):not(.film-aan) .film-regel,
  html.js:not(.film-uit):not(.film-aan) .film-wacht,
  html.js:not(.film-uit):not(.film-aan) .film-lijst,
  html.js:not(.film-uit):not(.film-aan) .film-grens span,
  html.js:not(.film-uit):not(.film-aan) .film-bs,
  html.js:not(.film-uit):not(.film-aan) .film-naar,
  html.js:not(.film-uit):not(.film-aan) .film-merk,
  html.js:not(.film-uit):not(.film-aan) .film-lijn{animation:film-terug var(--duur-2) var(--soepel-uit) var(--film-vangnet) forwards}
}
@keyframes film-terug{to{opacity:1;transform:none}}
@keyframes film-weg{to{opacity:0;visibility:hidden}}