/* stapel.css: Home, sectie "Drie regels" (effect 06, kaartenstapel).

   Eindstaat eerst: een gewone verticale lijst kaarten. Dat is ook wat je ziet zonder JavaScript, na een fout, bij prefers-reduced-motion en
   bij "Beweging uit". De stapel (position: sticky met een eigen top-offset per kaart) komt er pas bij als js/sections/stapel.js de klasse
   .is-gestapeld op de sectie zet, alleen met beweging aan en als elke kaart in het scherm past. Die regels staan onder
   .js:not(.motion-failed):not(.motion-off) en binnen @media (prefers-reduced-motion: no-preference). Geen enkele voorouder heeft overflow
   hidden (dat zou sticky breken). */

.stapel {
  --stapel-stap: 28px;                                   /* verschil in top-offset tussen twee kaarten */
  --stapel-tekst: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --stapel-pad: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  padding-block: var(--sectie);
}
/* Na het gepinde donker-verhaal is de stage al effen papier: de kop volgt meteen, anders staat er na het hoogtepunt (de zoom op "Rust") circa
   0,4 schermhoogte lege strook (7740 tot 8040 op 1440 bij 900, D03). Alleen met de pin, in de eindstaat blijft de gewone sectie-adem. */
.js:not(.motion-failed):not(.motion-off) .donker.is-gepind + .stapel { padding-top: var(--s-16); }

.stapel__kop { margin-bottom: var(--s-64); }
.stapel__intro { margin-top: var(--s-16); max-width: 30ch; }

.stapel__lijst {
  display: grid;
  gap: var(--s-24);
  margin: 0;
  padding: 0;
}

/* ---------- Kaart ---------- */
.stapel__kaart {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--s-24);
  min-height: clamp(26rem, 72svh, 44rem);
  padding: var(--stapel-pad);
  border-radius: var(--r-vlak);
  background-color: var(--bg);
  color: var(--fg);
  transform-origin: 50% 0;
}
.stapel__kaart--papier {
  --bg: var(--papier-2);
  --fg: var(--inkt);
  --fg-dim: var(--gedempt);
}
.stapel__kaart--accent {
  --bg: var(--accent);
  --fg: var(--inkt);                                     /* inkt op accent: 4,52 op 1 */
}
.stapel__kaart--inkt { color: var(--fg); }               /* .is-inkt zet de rest */

.stapel__nr {
  font-family: var(--f-display);
  font-size: clamp(7rem, 4rem + 16vw, 18rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.stapel__kaart--accent .stapel__nr {                     /* omlijnd cijfer op het accent: vulling in de kaartkleur, streek eronder */
  color: var(--bg);
  -webkit-text-stroke: 4px var(--inkt);
  paint-order: stroke fill;
}
.stapel__kaart--inkt .stapel__nr { color: var(--accent); }   /* accent op inkt: 4,52 op 1, groot cijfer */

.stapel__tekst { align-self: end; }
.stapel__kaart-kop {
  font-size: clamp(2rem, 1rem + 3.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
}
.stapel__tekst p {
  max-width: 40ch;
  margin-top: var(--s-16);
  font-size: var(--stapel-tekst);
  line-height: 1.5;
}
.stapel__dim { display: none; }

@media (min-width: 900px) {
  .stapel__kaart {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--goot);
  }
  .stapel__nr { grid-row: 1; }
  .stapel__tekst { grid-row: 2; }
  /* Drie verschillende opstellingen: cijfer linksboven en tekst rechtsonder, tekst linksboven en cijfer rechtsonder, cijfer rechtsboven en tekst linksonder */
  .stapel__kaart:nth-child(1) .stapel__nr { grid-column: 1 / span 5; align-self: start; }
  .stapel__kaart:nth-child(1) .stapel__tekst { grid-column: 6 / span 7; }
  .stapel__kaart:nth-child(2) { grid-template-rows: 1fr auto; }
  .stapel__kaart:nth-child(2) .stapel__tekst { grid-column: 1 / span 8; grid-row: 1; align-self: start; }
  .stapel__kaart:nth-child(2) .stapel__nr { grid-column: 8 / span 5; grid-row: 2; justify-self: end; align-self: end; }
  .stapel__kaart:nth-child(3) .stapel__nr { grid-column: 8 / span 5; justify-self: end; align-self: start; }
  .stapel__kaart:nth-child(3) .stapel__tekst { grid-column: 1 / span 7; }
}

/* ---------- Stapel (alleen met beweging aan, door js/sections/stapel.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .stapel.is-gestapeld .stapel__kaart {
    position: sticky;
    top: calc(var(--header-h) + var(--s-16) + var(--i) * var(--stapel-stap));
    will-change: transform;                              /* drie kaarten, scrub-lagen */
  }
  .js:not(.motion-failed):not(.motion-off) .stapel.is-gestapeld .stapel__lijst::after {
    content: "";
    height: 24svh;                                       /* de laatste kaart blijft nog even liggen voordat de hele stapel loskomt */
  }
  .js:not(.motion-failed):not(.motion-off) .stapel.is-gestapeld .stapel__dim {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--inkt);
    opacity: 0;
    pointer-events: none;
  }
}

/* De cursor-ring is accent en zou op de accentkaart verdwijnen: boven die kaart is hij inkt (zoals boven het vlak, zie vlak.css). */
html:has(.stapel__kaart--accent:hover) .cursor { --accent: var(--inkt); }