/* ==========================================================================
   rc-hero-lus — header-lus van /start/ (Recalora, richting Meetblad)
   Gescoped onder .rc-hero-lus. Tokens: outputs/recalora/design-refero/05-tokenvoorstel-recalora.md.
   Letters: geen Google Fonts. --rc-sans en --rc-serif nemen de zelf-gehoste --sans en --serif van het theme
   (Atkinson Hyperlegible en Source Serif 4, @font-face via FABLE_FONTS_JSON in functions.php); de H1 staat in
   Source Serif 4 600 (B40). --rc-mono is JetBrains Mono 500, zelf gehost (B35, Ronald
   1-10; fontface-jetbrainsmono.php.txt), met de fallback-stack uit 05 §1 erachter en Consolas voor Windows.
   Beweging: alleen transform en gestapte opacity (B16, B27). Zonder JS, of bij prefers-reduced-motion,
   staat het eindbeeld stil; de start op frame 0 zet het inline script in het template-part (B36).
   Canvas #FAF9F7 is een paginatoken (B02) en staat niet op deze sectie.
   Inzetpakket outputs/_werk/recalora-hero-lus-20261001/ — nog niet in het theme.
   ========================================================================== */
.rc-hero-lus{
  --rc-canvas:#FAF9F7; --rc-haarlijn:#DDD9D3; --rc-raster:rgba(26,46,77,.07); --rc-raster-maat:24px;
  --rc-inkt:#141821; --rc-inkt-2:#4A4F58; --rc-inkt-3:#5A6373;
  --rc-blauw:#1A2E4D; --rc-blauw-d:#0F1B30; --rc-koper:#B87333; --rc-koper-d:#8E561F;
  --rc-op-koper:#141821; --rc-op-koper-d:#FFFFFF; --rc-focus:#1A2E4D; --rc-rand-invoer:#6E7788;
  --rc-sans:var(--sans,"Atkinson Hyperlegible",system-ui,sans-serif);
  --rc-serif:var(--serif,"Source Serif 4","Iowan Old Style",Georgia,serif);
  --rc-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --rc-ease:cubic-bezier(.4,0,.2,1); --rc-lus-duur:9s;
  --rc-gutter:clamp(16px,4vw,48px); --rc-kolom:1200px; --rc-radius-kaart:8px; --rc-radius-knop:4px;
  display:block; padding:clamp(40px,7vw,96px) 0 clamp(32px,5vw,64px); color:var(--rc-inkt); font-family:var(--rc-sans);
}
.rc-hero-lus *,.rc-hero-lus *::before,.rc-hero-lus *::after{box-sizing:border-box}
.rc-hero-lus :focus-visible{outline:3px solid var(--rc-focus); outline-offset:3px; border-radius:4px}
.rc-hero-lus .rc-wrap{max-width:var(--rc-kolom); margin:0 auto; padding:0 var(--rc-gutter); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px clamp(32px,6vw,88px); align-items:center}
@media (max-width:900px){.rc-hero-lus .rc-wrap{grid-template-columns:1fr}}

/* tekstkolom */
.rc-hero-lus .rc-tekst{min-width:0}
/* H1 in de kopletter van het theme: Source Serif 4 600 via var(--serif) (O7 gesloten, B40, Ronald 1-10) */
.rc-hero-lus .rc-kop{margin:0; font:600 clamp(34px,4vw,54px)/1.1 var(--rc-serif); letter-spacing:-.01em; color:var(--rc-blauw-d); text-wrap:balance}
.rc-hero-lus .rc-lede{margin:22px 0 0; font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:var(--rc-inkt-2); max-width:44ch; text-wrap:pretty}
.rc-hero-lus .rc-knoppen{display:flex; flex-wrap:wrap; gap:12px 14px; margin:30px 0 0}
.rc-hero-lus .rc-knop{display:inline-flex; align-items:center; min-height:48px; padding:11px 18px; border-radius:var(--rc-radius-knop); font:700 16px/1.2 var(--rc-sans); text-decoration:none; transition:background-color 120ms var(--rc-ease),color 120ms var(--rc-ease)}
.rc-hero-lus .rc-knop-primair{background:var(--rc-koper); color:var(--rc-op-koper)}
.rc-hero-lus .rc-knop-primair:hover{background:var(--rc-koper-d); color:var(--rc-op-koper-d)}
.rc-hero-lus .rc-knop-secundair{color:var(--rc-blauw); box-shadow:inset 0 0 0 1.5px var(--rc-blauw)}
.rc-hero-lus .rc-knop-secundair:hover{text-decoration:underline; text-underline-offset:4px}

/* de lus: houder met vaste verhouding, ruitpapier, haarlijn (B04, B05, B26) */
.rc-hero-lus .rc-lus{margin:0; min-width:0}
.rc-hero-lus .rc-plot{position:relative; aspect-ratio:5/4; max-width:100%; border-radius:var(--rc-radius-kaart); overflow:hidden; box-shadow:inset 0 0 0 1px var(--rc-haarlijn);
  background-color:var(--rc-canvas);
  background-image:linear-gradient(var(--rc-raster) 1px,transparent 1px),linear-gradient(90deg,var(--rc-raster) 1px,transparent 1px);
  background-size:var(--rc-raster-maat) var(--rc-raster-maat)}
.rc-hero-lus .rc-plot svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.rc-hero-lus .rc-trede-lijn{stroke:var(--rc-blauw); stroke-opacity:.3; stroke-width:1; vector-effect:non-scaling-stroke}
.rc-hero-lus .rc-punt{fill:var(--rc-canvas); stroke:var(--rc-blauw); stroke-width:1.75; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center}
.rc-hero-lus .rc-lijn{stroke:var(--rc-koper); stroke-width:2.5; vector-effect:non-scaling-stroke}
/* tekst van de lus in HTML, nooit onder 15px (B26); labels zonder chip (B09); mono in #5A6373 (B24) */
.rc-hero-lus .rc-trede,.rc-hero-lus .rc-kolommen,.rc-hero-lus .rc-label,.rc-hero-lus .rc-label-rl,.rc-hero-lus .rc-kicker{position:absolute; font:500 15px/1.3 var(--rc-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--rc-inkt-3)}
.rc-hero-lus .rc-trede{left:4%; transform:translateY(-50%); background:var(--rc-canvas); padding:2px 8px 2px 0}
.rc-hero-lus .rc-kolommen{left:4%; right:3%; bottom:4%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center; hyphens:manual}
.rc-hero-lus .rc-label{top:calc(25% - 30px); right:3%; background:var(--rc-canvas); padding:2px 0 2px 8px; text-align:right}
.rc-hero-lus .rc-label-rl{top:calc(47.5% - 49px); right:3%; background:var(--rc-canvas); padding:2px 0 2px 8px; text-align:right}
.rc-hero-lus .rc-kicker{top:4%; left:4%; background:var(--rc-canvas); padding:2px 8px 2px 0}
.rc-hero-lus .rc-lus-voet{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; margin:12px 0 0}
.rc-hero-lus .rc-lus-voet p{margin:0; font-size:15px; line-height:1.5; color:var(--rc-inkt-2)}
.rc-hero-lus .rc-pauze{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:8px 14px; background:transparent; color:var(--rc-inkt); border:0; box-shadow:inset 0 0 0 1px var(--rc-rand-invoer); border-radius:var(--rc-radius-knop); font:500 15px/1 var(--rc-sans); cursor:pointer}
.rc-hero-lus .rc-pauze:hover{box-shadow:inset 0 0 0 1px var(--rc-blauw)}
.rc-hero-lus .rc-pauze .rc-ico{width:10px; height:10px; box-shadow:inset 3px 0 0 currentColor,inset -3px 0 0 currentColor}
.rc-hero-lus[data-pauze="true"] .rc-ico{box-shadow:none; width:0; height:0; border-left:9px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent}
.rc-hero-lus:not([data-klaar="true"]) .rc-pauze{visibility:hidden}

/* Beweging (B16, B27). Rust = eindbeeld. 9 s: richtlijn → lijn op Redelijk → observationeel (lijn blijft) →
   [variant plafond: gecontroleerd → lijn op Sterk] → label; daarna stil tot de lus opnieuw begint. */
.rc-hero-lus[data-klaar="true"] .rc-punt{animation-duration:var(--rc-lus-duur); animation-timing-function:var(--rc-ease); animation-iteration-count:infinite}
.rc-hero-lus[data-klaar="true"] .rc-lijngroep{animation:rc-lijn var(--rc-lus-duur) var(--rc-ease) infinite}
.rc-hero-lus[data-klaar="true"] .rc-label{animation:rc-label var(--rc-lus-duur) steps(1,end) infinite}
.rc-hero-lus[data-klaar="true"] .rc-label-rl{animation:rc-label-rl var(--rc-lus-duur) steps(1,end) infinite}
.rc-hero-lus[data-pauze="true"] .rc-punt,.rc-hero-lus[data-pauze="true"] .rc-lijngroep,.rc-hero-lus[data-pauze="true"] .rc-label,.rc-hero-lus[data-pauze="true"] .rc-label-rl,
.rc-hero-lus[data-uitbeeld="true"] .rc-punt,.rc-hero-lus[data-uitbeeld="true"] .rc-lijngroep,.rc-hero-lus[data-uitbeeld="true"] .rc-label,.rc-hero-lus[data-uitbeeld="true"] .rc-label-rl{animation-play-state:paused}
.rc-hero-lus[data-klaar="true"] .rc-p1{animation-name:rc-p1}
.rc-hero-lus[data-klaar="true"] .rc-p2{animation-name:rc-p2}
.rc-hero-lus[data-klaar="true"] .rc-p3{animation-name:rc-p3}
.rc-hero-lus[data-klaar="true"] .rc-p4{animation-name:rc-p4}
.rc-hero-lus[data-klaar="true"] .rc-p5{animation-name:rc-p5}
.rc-hero-lus[data-klaar="true"] .rc-p6{animation-name:rc-p6}
.rc-hero-lus[data-klaar="true"] .rc-p7{animation-name:rc-p7}
.rc-hero-lus[data-klaar="true"] .rc-p8{animation-name:rc-p8}
/* richtlijn → de zekerheid die de richtlijn zelf uitspreekt: redelijk (eerst) */
@keyframes rc-p4{0%,7%{transform:scale(0)}11%,100%{transform:scale(1)}}
@keyframes rc-p5{0%,10%{transform:scale(0)}14%,100%{transform:scale(1)}}
/* observationeel → Beperkt; de lijn blijft op Redelijk: een zwakkere bron verlaagt het plafond niet */
@keyframes rc-p1{0%,24%{transform:scale(0)}28%,100%{transform:scale(1)}}
@keyframes rc-p2{0%,27%{transform:scale(0)}31%,100%{transform:scale(1)}}
@keyframes rc-p3{0%,30%{transform:scale(0)}34%,100%{transform:scale(1)}}
/* gecontroleerd → Sterk (alleen variant plafond) */
@keyframes rc-p6{0%,43%{transform:scale(0)}47%,100%{transform:scale(1)}}
@keyframes rc-p7{0%,46%{transform:scale(0)}50%,100%{transform:scale(1)}}
@keyframes rc-p8{0%,49%{transform:scale(0)}53%,100%{transform:scale(1)}}
/* plafondlijn, variant plafond: van buiten beeld naar Redelijk, blijft daar bij de zwakkere bron, dan naar Sterk */
@keyframes rc-lijn{0%,15%{transform:translateY(320px)}21%,52%{transform:translateY(90px)}59%,100%{transform:translateY(0)}}
@keyframes rc-label{0%,61%{opacity:0}62%,100%{opacity:1}}
@keyframes rc-label-rl{0%,21%{opacity:0}22%,100%{opacity:1}}

/* variant plafond-redelijk (standaard, besluit Ronald 30-09, O4): geen gecontroleerd onderzoek in het voorbeeld,
   kolom gecontroleerd leeg, de lijn valt stil op Redelijk; het richtlijnlabel gaat op in het plafondlabel */
.rc-hero-lus[data-lus="plafond-redelijk"] .rc-p6,.rc-hero-lus[data-lus="plafond-redelijk"] .rc-p7,.rc-hero-lus[data-lus="plafond-redelijk"] .rc-p8{display:none}
.rc-hero-lus[data-lus="plafond-redelijk"] .rc-lijngroep{transform:translateY(90px)}
.rc-hero-lus[data-lus="plafond-redelijk"] .rc-label-rl{display:none}
.rc-hero-lus[data-lus="plafond-redelijk"] .rc-label{top:calc(47.5% - 49px)}
.rc-hero-lus[data-lus="plafond-redelijk"][data-klaar="true"] .rc-lijngroep{animation-name:rc-lijn-redelijk}
.rc-hero-lus[data-lus="plafond-redelijk"][data-klaar="true"] .rc-label{animation-name:rc-label-redelijk}
@keyframes rc-lijn-redelijk{0%,15%{transform:translateY(320px)}21%,100%{transform:translateY(90px)}}
@keyframes rc-label-redelijk{0%,40%{opacity:0}41%,100%{opacity:1}}

/* reduced motion: eindbeeld, betekenis blijft leesbaar; geen pauzeknop want er beweegt niets */
@media (prefers-reduced-motion:reduce){
  .rc-hero-lus .rc-punt,.rc-hero-lus .rc-lijngroep,.rc-hero-lus .rc-label,.rc-hero-lus .rc-label-rl{animation:none !important}
  .rc-hero-lus .rc-pauze{display:none}
}