/* Kinnection, bouwstenen: inhoud. Prompt 05.
   Alles wat je leest of bekijkt: sectiekop, kaart, paneel, band in indigo, puntenlijst, citaat, cijferblok, beeldslot en label.
   De binnenkomst van kaarten staat in binnenkomst.js. */

/* ===== Sectiekop: bovenlabel, titel, inleiding =====
   Gewoon onder elkaar, of gedeeld: titel in de smalle helft, inleiding in de brede. */
.sectiekop{display:grid;gap:var(--gap-tight)}
.sectiekop .t-h1,.sectiekop .t-h2{max-width:var(--measure-title)}
.sectiekop .t-lead{max-width:var(--measure-lead);margin-top:var(--gap-tight)}
.sectiekop p:not([class]){max-width:var(--measure-text)}
@media (min-width:900px){
  .sectiekop-gedeeld{grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));gap:var(--gap-tight) var(--gap-columns);align-items:end}
  .sectiekop-gedeeld .t-label{grid-column:1 / -1}
  .sectiekop-gedeeld .t-lead{margin-top:0;max-width:var(--measure-text)}
}

/* ===== Het woord dat golft =====
   Eén woord in de grote kop, met data-golf. golfwoord.js laat de letters één keer na elkaar op en neer gaan.
   Op gsm is de golf kleiner. Het woord breekt nooit af. */
[data-golf]{display:inline-block;white-space:nowrap}
[data-golf] .letter{display:inline-block}
[data-golf].golft .letter{animation:woord-golf var(--duration-story) var(--ease-calm) both;animation-delay:calc(var(--stagger) * var(--n,0))}
@keyframes woord-golf{0%,100%{transform:none}35%{transform:translateY(-0.12em)}70%{transform:translateY(0.03em)}}
@media (min-width:900px){
  @keyframes woord-golf{0%,100%{transform:none}35%{transform:translateY(-0.2em)}70%{transform:translateY(0.05em)}}
}

/* ===== Kaart: om te lezen =====
   Wit op crème, crème op wit. Drie naast elkaar in een .tafel. Een kaart kantelt licht onder de muis, op gsm niet.
   Is de hele kaart een link (a.kaart), dan zakt ze in zoals een knop. */
.tafel{display:grid;gap:var(--gap-grid)}
.kaart{position:relative;z-index:var(--layer-content);display:block;padding:var(--pad-card);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);background:var(--op-card);color:var(--color-text);box-shadow:var(--op-card-shadow);text-decoration:none;transition:rotate var(--duration-spring) var(--ease-calm),translate var(--duration-spring) var(--ease-calm),box-shadow var(--duration-instant) var(--ease-calm)}
.op-moment .kaart{--op-card:var(--color-ground);--op-card-shadow:var(--shadow-card-on-moment);border-color:var(--color-ground);color:var(--color-text)}
.op-moment a.kaart:focus-visible{outline-color:var(--color-focus-on-moment)}
.kaart-teken{width:var(--icon-lg);height:var(--icon-lg);fill:none;stroke:var(--color-border);stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--gap-element)}
.kaart-teken .vol{fill:var(--color-accent);stroke:none}
.kaart .t-title + p{margin-top:var(--gap-tight);color:var(--color-text-muted)}
.kaart .tekstlink{margin-top:var(--gap-tight)}
@media (min-width:900px){
  .tafel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tafel > .kaart:nth-child(3n+1){rotate:calc(var(--tilt-rest) * -1)}
  .tafel > .kaart:nth-child(3n+2){rotate:var(--tilt-rest);translate:0 var(--gap-tight)}
  .tafel > .kaart:nth-child(3n){rotate:calc(var(--tilt-rest) * -0.5)}
}
@media (min-width:900px){
  .tafel > .kaart:hover{rotate:var(--tilt-hover);translate:0 calc(var(--gap-inline) * -1)}
  .tafel > .kaart:nth-child(3n+2):hover{rotate:calc(var(--tilt-hover) * -1);translate:0 var(--gap-hair)}
}
.kaart.toestand-aanwijzen{rotate:var(--tilt-hover);translate:0 calc(var(--gap-inline) * -1)}
a.kaart{cursor:pointer}
a.kaart:active,.kaart.toestand-ingedrukt{translate:0 var(--press-card);box-shadow:none;rotate:0deg}

/* Binnenkomst: een kaart landt op tafel. binnenkomst.js zet .wacht tot ze in beeld komt. */
[data-binnenkomst]{transition:opacity var(--duration-enter) var(--ease-calm),transform var(--duration-enter) var(--ease-spring),rotate var(--duration-spring) var(--ease-calm),translate var(--duration-spring) var(--ease-calm),box-shadow var(--duration-instant) var(--ease-calm);transition-delay:calc(var(--stagger) * var(--n,0))}
[data-binnenkomst].wacht{opacity:0;transform:translateY(var(--gap-block))}
@media (min-width:900px){
  [data-binnenkomst].wacht{transform:translate(calc(var(--gap-block) * -1),var(--gap-block)) rotate(calc(var(--tilt-enter) * -1))}
}
[data-binnenkomst]:hover{transition-delay:0s}

/* ===== Paneel: het grote vlak van één stap, zoals een dag uit de week =====
   Met class="op-moment" erbij is het het ene indigo moment van de pagina. */
.paneel{position:relative;z-index:var(--layer-content);padding:var(--pad-panel);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-panel);background:var(--op-card);box-shadow:var(--shadow-card)}
.op-wit .paneel{background:var(--color-ground)}
.paneel.op-moment{background:var(--color-moment);box-shadow:var(--shadow-card-strong)}
.paneel-rooster{display:grid;gap:var(--gap-block);align-items:start}
.paneel .t-display{margin-bottom:var(--gap-element)}
.paneel .t-display small{font:var(--type-title);letter-spacing:var(--tracking-normal);color:var(--op-label);white-space:nowrap}
.paneel .t-h3 + p{margin-top:var(--gap-tight)}
@media (min-width:900px){
  .paneel-rooster{grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));gap:var(--gap-columns)}
  /* Omgekeerd: de helften wisselen van kant, en de brede helft blijft van het beeld. Bijgestuurd in prompt 09: voordien wisselde enkel de volgorde. */
  .paneel-rooster.omgekeerd{grid-template-columns:minmax(0,var(--split-wide)) minmax(0,var(--split-narrow))}
  .paneel-rooster.omgekeerd > :first-child{order:2}
}

/* ===== Band in indigo: het slot van de pagina =====
   Over de volle breedte, hooguit één keer per pagina, met de luide weefovergang erboven. */
.band{padding-block:var(--gap-block) var(--gap-section)}
.band .t-h2{max-width:var(--measure-title)}
.band .t-lead{margin-top:var(--gap-element);max-width:var(--measure-lead);color:var(--op-text-muted)}
.band .knoppen,.band > .binnen > .knop{margin-top:var(--gap-block)}
.band .t-small{margin-top:var(--gap-element)}

/* ===== Puntenlijst: drie korte punten met een vinkje ===== */
.punten{border-top:var(--stroke-rule) solid var(--op-rule)}
.punten li{position:relative;padding:var(--gap-tight) 0 var(--gap-tight) calc(var(--icon-sm) + var(--gap-tight));border-bottom:var(--stroke-rule) solid var(--op-rule);font-weight:var(--weight-bold)}
.punten li::before{content:"";position:absolute;left:0;top:calc(var(--gap-tight) + 0.2em);width:var(--icon-sm);height:var(--icon-sm);background:var(--color-accent);clip-path:polygon(10% 52%,24% 38%,40% 54%,76% 16%,90% 30%,40% 82%)}

/* ===== Citaat =====
   Eén stem, groot gezet, op een kaart met een groot aanhalingsteken in terracotta. Enkel echte citaten, met beroep en regio.
   De naam komt er pas bij na toestemming. Bijgestuurd in prompt 09 op vraag van Chalo: het stuk lijn naast het citaat is weg,
   want de doorlopende lijn van de pagina loopt er al naast. */
.citaat{position:relative;z-index:var(--layer-content);max-width:var(--measure-text);padding:var(--pad-panel);border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--op-card-shadow)}
.op-wit .citaat{background:var(--color-ground)}
.citaat::before{content:"\201C";display:block;height:0.7em;margin-bottom:var(--gap-tight);font:var(--type-display);color:var(--color-accent);transform:scale(1.8);transform-origin:left 40%}
.citaat blockquote{font:var(--type-h3);letter-spacing:var(--tracking-title);color:var(--color-heading)}
.citaat figcaption{margin-top:var(--gap-element);font:var(--type-small);color:var(--color-text-muted)}
.citaat figcaption b{display:block;font:var(--type-button);color:var(--color-heading)}
/* Een doorklik hoort in de kaart, onder wie het zei. Opdracht 12g, keuze van Chalo op 27-09-2026: vanaf 900 breed
   neemt de kaart de volle breedte, in twee kolommen. Links het aanhalingsteken, wie het zei en de doorklik; rechts het
   citaat, groter gezet. Zo staat een citaat nooit meer alleen in een halve pagina. */
.citaat .tekstlink{margin-top:var(--gap-tight)}
@media (min-width:900px){
  .citaat{display:grid;grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));grid-template-rows:auto auto 1fr;column-gap:var(--gap-columns);max-width:none}
  .citaat::before{grid-column:1;grid-row:1}
  .citaat blockquote{grid-column:2;grid-row:1 / span 3;font:var(--type-h2)}
  .citaat figcaption{grid-column:1;grid-row:2}
  .citaat .tekstlink{grid-column:1;grid-row:3;align-self:start}
}

/* ===== Cijferblok: één groot cijfer met wat het betekent =====
   Enkel echte cijfers. Hooguit drie naast elkaar. */
.cijfers{display:grid;gap:var(--gap-grid)}
.cijfer{display:grid;gap:var(--gap-inline);align-content:start;padding-top:var(--gap-tight);border-top:var(--stroke-check) solid var(--op-heading)}
.cijfer b{font:var(--type-number);letter-spacing:var(--tracking-heading);color:var(--op-heading)}
.cijfer b small{font:var(--type-title);letter-spacing:var(--tracking-normal)}
.cijfer span{max-width:var(--measure-lead);color:var(--op-text-muted)}
@media (min-width:600px){
  .cijfers{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Beeldslot: een vast kader met rand en schaduw =====
   Liggend (4 op 3) is de standaard. Staand (4 op 5) enkel naast een grote kop, en op gsm wordt ook dat liggend.
   Leeg toont het slot zijn maat, zodat je weet welk beeld erin moet. */
.beeldslot{position:relative;z-index:var(--layer-content)}
.beeldslot-kader{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:var(--ratio-landscape);overflow:hidden;border:var(--stroke-border) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--op-card-shadow)}
.beeldslot-kader > img,.beeldslot-kader > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beeldslot-kader > span{padding:var(--pad-inset);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:center;color:var(--color-text-label)}
.beeldslot figcaption{margin-top:var(--gap-tight);font:var(--type-small);color:var(--op-text-muted)}
.beeldslot[aria-busy="true"] .beeldslot-kader{background:var(--color-placeholder)}
.beeldslot[aria-busy="true"] .beeldslot-kader > *{visibility:hidden}
@media (min-width:900px){
  .beeldslot-staand .beeldslot-kader{aspect-ratio:var(--ratio-portrait)}
}

/* ===== Label: één woord dat iets benoemt. Niet klikbaar. ===== */
.labels{display:flex;flex-wrap:wrap;gap:var(--gap-inline)}
.label{display:inline-flex;align-items:center;gap:var(--gap-hair);padding:var(--gap-hair) var(--gap-tight);border-radius:var(--radius-check);background:var(--op-tint);color:var(--op-heading);font:var(--type-button-sm)}
.label-vol{background:var(--op-action);color:var(--op-action-text)}
.label-accent{background:var(--color-accent);color:var(--color-text-on-accent)}
.label-rand{background:transparent;box-shadow:inset 0 0 0 var(--stroke-border) var(--op-border)}

/* ===== Aanwijzen: kleine antwoorden op de muis. Prompt 10, gekozen door Chalo op een proefpagina. =====
   Enkel verschuiven, draaien en schalen, dus niets wordt opnieuw opgebouwd en het scrollen hapert niet.
   Aanwijzen toont nooit inhoud die je anders mist. Op gsm gebeurt hier niets van.
   De voorwaarde is "een muis, of een breed scherm": sommige computers met een aanraakscherm melden geen muis, ook als er een is.

   De tekening op een kaart: geef de delen een klasse en ze bewegen wanneer je de kaart aanwijst.
     beweegt           hoort bij elk deel dat beweegt
     waaier-1, waaier-2, waaier-3   een stapel die openwaaiert
     van-onder groeit  een staafje in een golf, met style="--n:0" voor de beurt
     draait            een vlakje dat een toer tolt
     trekt             een lijn die zich tekent, met pathLength="1"
     duwt              een knop die twee keer ingeduwd wordt
     haakt-1, haakt-2  twee helften van een schakel
     scharnier beugel, en van-onder slotlijf   een slot dat openzwaait en dichtvalt */
.kaart-teken{overflow:visible;transform-origin:left bottom;transition:transform var(--duration-spring) var(--ease-spring)}
.kaart-teken .beweegt{transform-box:fill-box;transform-origin:center;transition:transform var(--duration-enter) var(--ease-spring);transition-delay:calc(var(--stagger) * var(--n,0))}
.kaart-teken .van-onder{transform-origin:center bottom}
.kaart-teken .scharnier{transform-origin:right bottom}
.kaart-teken .trekt{stroke-dasharray:1;stroke-dashoffset:0}
.punten li::before,.citaat::before{transition:transform var(--duration-spring) var(--ease-spring)}
@keyframes staaf-golf{0%{transform:scaleY(1)}30%{transform:scaleY(0.25)}65%{transform:scaleY(1.45)}100%{transform:scaleY(1)}}
@keyframes vlak-tol{0%{transform:rotate(0) scale(1)}55%{transform:rotate(300deg) scale(1.5)}100%{transform:rotate(360deg) scale(1)}}
@keyframes lijn-trek{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes knop-duw{0%,100%{transform:none}20%{transform:translateY(18%) scale(0.9,0.7)}45%{transform:translateY(-10%) scale(1.08)}65%{transform:translateY(12%) scale(0.94,0.8)}85%{transform:translateY(-4%)}}
@keyframes haak-a{0%,100%{transform:none}35%{transform:translate(-30%,30%) rotate(-12deg)}70%{transform:translate(10%,-10%)}}
@keyframes haak-b{0%,100%{transform:none}35%{transform:translate(30%,-30%) rotate(-12deg)}70%{transform:translate(-10%,10%)}}
@keyframes slot-open{0%,100%{transform:none}30%{transform:translateY(-35%) rotate(28deg)}60%{transform:translateY(-35%) rotate(28deg)}80%{transform:translateY(8%)}}
@keyframes slot-bonk{0%,75%,100%{transform:none}85%{transform:translateY(8%) scale(1.06,0.92)}}
@media (hover:hover),(min-width:900px){
  .kaart:hover .kaart-teken{transform:scale(1.25) rotate(calc(var(--tilt-enter) * -1))}
  .kaart:hover .waaier-1{transform:translate(-22%,10%) rotate(-24deg)}
  .kaart:hover .waaier-2{transform:translate(-6%,0) rotate(-8deg)}
  .kaart:hover .waaier-3{transform:translate(16%,-4%) rotate(12deg)}
  .kaart:hover .groeit{animation:staaf-golf var(--duration-enter) var(--ease-calm) both;animation-delay:calc(var(--stagger) * 1.5 * var(--n,0))}
  .kaart:hover .draait{animation:vlak-tol var(--duration-enter) var(--ease-calm)}
  .kaart:hover .trekt{animation:lijn-trek var(--duration-enter) var(--ease-calm) both;animation-delay:calc(var(--stagger) * 3)}
  .kaart:hover .duwt{animation:knop-duw var(--duration-story) var(--ease-calm)}
  .kaart:hover .haakt-1{animation:haak-a var(--duration-enter) var(--ease-spring)}
  .kaart:hover .haakt-2{animation:haak-b var(--duration-enter) var(--ease-spring)}
  .kaart:hover .beugel{animation:slot-open var(--duration-story) var(--ease-calm)}
  .kaart:hover .slotlijf{animation:slot-bonk var(--duration-story) var(--ease-calm)}
  .punten li:hover::before{transform:scale(1.4) rotate(calc(var(--tilt-enter) * -1))}
  .citaat:hover::before{transform:scale(2.1) rotate(calc(var(--tilt-enter) * -1))}
}