/* hero.css: de eerste indruk. Wordmerk "Beweging" over een halftone-veld (js/shader.js), met de statement-sectie als gordijn eroverheen.

   Eindstaat eerst: zonder JS, bij een fout, bij reduce en bij "Beweging uit" staat alles er, met het CSS-puntenpatroon (.hero__veld) of
   het stilstaande shaderframe. Beginstaten (opacity 0) alleen onder .js:not(.motion-failed):not(.motion-off) en binnen no-preference.
   De wrapper .hero-doek loopt van 10-hero tot en met 20-statement (zie de opmerking in 10-hero.mjs). */

.hero-doek {
  --hero-peek: clamp(4.5rem, 15svh, 9rem);     /* zoveel van de statement-sectie steekt onder de vouw uit: er komt meer */
  --hero-papier: var(--papier);
  position: relative;
  isolation: isolate;
}

.hero {
  position: relative;
  display: flex;
  min-height: calc(100svh - var(--hero-peek));
  padding-top: calc(var(--header-h) + var(--s-24));
  padding-bottom: var(--s-24);
  background-color: var(--hero-papier);
}

/* Gordijn: vanaf 900 px en een ruime hoogte blijft de hero staan terwijl de statement-sectie eroverheen schuift.
   Sticky, geen pin; zonder overflow hidden op een voorouder (html en body gebruiken clip). Niet bij reduce, "Beweging uit" of een fout. */
@media (min-width: 900px) and (min-height: 40rem) and (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .hero {
    position: sticky;
    top: 0;
  }
}

/* ---------- Het veld ---------- */
.hero__veld,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* CSS-puntenpatroon: de terugval zonder JS, zonder WebGL en na contextverlies. Twee punten per tegel geven een raster van 45 graden,
   net als de shader; een grote en een kleine laag, elk met een eigen masker, geven de helling van ijl naar dicht. */
/* Maskers gebruiken alleen het alfakanaal: #000 betekent hier "volledig zichtbaar", het is geen kleur op het scherm. */
.hero__veld {
  overflow: clip;
  /* de header ligt over de bovenrand en de zijrand over de onderrand: daar vervaagt het patroon, zoals de stille zones van de shader */
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--header-h) * 0.6), #000 calc(var(--header-h) + 7rem), #000 72%, rgb(0 0 0 / 0.4) 100%);
  mask-image: linear-gradient(to bottom, transparent calc(var(--header-h) * 0.6), #000 calc(var(--header-h) + 7rem), #000 72%, rgb(0 0 0 / 0.4) 100%);
}
.hero__veld::before,
.hero__veld::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hero__veld::before {
  background-image:
    radial-gradient(circle at 25% 25%, var(--inkt) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 75% 75%, var(--inkt) 0 1.2px, transparent 1.7px);
  background-size: 20px 20px;
  /* de kleine punten verdwijnen waar de grote staan (doorsnede van twee maskers), anders zit er een punt in elk punt */
  -webkit-mask-image: linear-gradient(to top right, transparent 10%, #000 85%), radial-gradient(ellipse 52% 52% at 90% 34%, transparent 0%, transparent 26%, #000 64%);
  mask-image: linear-gradient(to top right, transparent 10%, #000 85%), radial-gradient(ellipse 52% 52% at 90% 34%, transparent 0%, transparent 26%, #000 64%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.55;
}
.hero__veld::after {
  background-image:
    radial-gradient(circle at 25% 25%, var(--inkt) 0 3.4px, transparent 3.9px),
    radial-gradient(circle at 75% 75%, var(--inkt) 0 3.4px, transparent 3.9px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 90% 34%, #000 0%, #000 30%, rgb(0 0 0 / 0.45) 56%, transparent 80%);
  mask-image: radial-gradient(ellipse 52% 52% at 90% 34%, #000 0%, #000 30%, rgb(0 0 0 / 0.45) 56%, transparent 80%);
}

/* In de terugval wijken de punten niet voor de tekst (dat doet alleen de shader): alinea en label krijgen een halo van papier, zodat de punten rond de letters wegvallen */
.no-js .hero__lead,
.motion-failed .hero__lead,
.hero--css .hero__lead,
.no-js .hero__label,
.motion-failed .hero__label,
.hero--css .hero__label {
  text-shadow:
    0 0 0.12em var(--hero-papier),
    0 0 0.25em var(--hero-papier),
    0 0 0.45em var(--hero-papier),
    0 0 0.45em var(--hero-papier),
    0 0 0.8em var(--hero-papier);
}

/* Op een telefoon loopt de kolom grote punten achter de alinea (de maskers staan op 90 procent van de breedte): in de terugval lichter, zodat "effecten:" en
   "cursor" niet op middelgrijze punten staan (D37). De shader heeft zijn eigen stille zones. */
@media (max-width: 599px) {
  .no-js .hero__veld::after,
  .motion-failed .hero__veld::after,
  .hero--css .hero__veld::after { opacity: 0.5; }
}

/* Het canvas bedekt het CSS-patroon zodra WebGL draait; bij terugval verdwijnt het canvas */
.hero--css .hero__canvas { display: none; }

@media (forced-colors: active) {
  .hero__veld,
  .hero__canvas { display: none; }
}

/* ---------- Inhoud ---------- */
.hero__inhoud {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-32);
  width: 100%;
}

/* Visuele volgorde: intro, wordmerk, zijrand. In de DOM staat de kop voorop (leesvolgorde, paginatitel). */
.hero__intro { order: 1; display: grid; gap: var(--s-24); }
.hero__titel {
  order: 2;
  width: fit-content;
  max-width: 100%;
  margin-left: -0.045em;                       /* de B heeft links een zijafstand: de stam sluit aan op de tekstrand */
}
.hero__zij { order: 3; }

.hero__lead {
  max-width: 44ch;
  color: var(--fg);
  text-wrap: balance;
}
.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}
.hero__knop { display: inline-flex; max-width: 100%; }
.hero .btn--secundair { background-color: var(--hero-papier); }   /* eigen vlak: de rand en het label staan nooit op punten */

.hero__zij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
}
.hero__label {
  max-width: 28ch;
  margin-left: auto;
  color: var(--fg);
  text-align: right;
  text-wrap: balance;
}
.hero__pauze {
  justify-content: center;
  gap: 0.625rem;
  min-width: min(11.75rem, 100%);              /* de naam blijft "Achtergrond pauzeren" (aria-pressed wisselt), de breedte dus ook */
  max-width: 100%;
  padding: 0.5rem 1.125rem 0.5rem 1rem;        /* bij een grote tekst breekt het label af in plaats van buiten beeld te vallen */
  background-color: var(--hero-papier);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: left;
}
.hero__pauze[hidden] { display: none; }
.hero__pauze-icoon .p-speel { display: none; }
.hero__pauze[aria-pressed="true"] .p-speel { display: inline; }
.hero__pauze[aria-pressed="true"] .p-balk { display: none; }

/* Brede schermen: de zijrand staat rechts naast het wordmerk, op de grondlijn van de woordvorm. Daaronder een rij onder het wordmerk. */
@media (min-width: 1100px) {
  .hero__inhoud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 15.5rem);
    grid-template-areas: "intro intro" "titel zij";
    align-content: end;
    align-items: end;
    column-gap: var(--goot);
  }
  .hero__intro { grid-area: intro; }
  .hero__titel { grid-area: titel; }
  .hero__zij {
    grid-area: zij;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--s-12);
    padding-bottom: 0.2em;
  }
  .hero__label { margin-left: 0; }
  /* Het wordmerk past in de kolom naast de zijrand. --fs-hero rekent met de volle breedte; hier gaan de zijkolom (hooguit 15,5rem) en de goot
     eraf, zodat "Beweging" tussen 1100 en circa 1480 px breed niet midden in het woord afbreekt (gemeten op 1280 en 1366 breed). 4,15 em is
     de breedte van het woord plus een marge van 2 procent. Zonder container-eenheden valt de regel weg en blijft --fs-hero staan; nowrap
     voorkomt dan het afbreken van de tekens (het woord steekt hooguit enkele pixels de zijkolom in). */
  .hero__inhoud { container-type: inline-size; }
  .hero__titel {
    font-size: min(var(--fs-hero), calc((100cqw - 15.5rem - var(--goot)) / 4.15));
    white-space: nowrap;
  }
}

/* Smalle schermen en grote tekst: de acties onder elkaar mogen, het label links */
@media (max-width: 479px) {
  .hero__acties { flex-direction: column; align-items: flex-start; }
  .hero__label { text-align: left; margin-left: 0; max-width: none; }
}

/* ---------- Beginstaten van de intro (hero.js speelt ze af na het gordijn) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .hero__lead,
  .js:not(.motion-failed):not(.motion-off) .hero__knop,
  .js:not(.motion-failed):not(.motion-off) .hero__zij > * { opacity: 0; }
  .js:not(.motion-failed):not(.motion-off) .hero__canvas,
  .js:not(.motion-failed):not(.motion-off) .hero:not(.hero--css) .hero__veld { opacity: 0; }
}