/**
 * Voorkomt een flits van de onbewerkte (volledig zichtbare) tekst
 * vóórdat SplitText + de scroll-animatie actief worden. text-reveal.js
 * maakt de wrapper zelf weer zichtbaar zodra de regels zijn opgesplitst
 * — de losse regels (.line) worden daarna door GSAP's eigen .from()
 * verborgen/onthuld, niet meer door deze regel.
 *
 * BELANGRIJK: de class hieronder staat er BEWUST twee keer (`.js-split.
 * js-split`) — dat verdubbelt de CSS-specificiteit zonder de selector
 * inhoudelijk te veranderen. Nodig gebleken omdat Kadence's eigen
 * thema-CSS voor headings (bv. h1/h2) een concurrerende regel blijkt te
 * hebben die anders wint bij gelijke specificiteit (later in de
 * cascade geladen) — bevestigd doordat alleen `!important` het
 * zichtbaar oploste. Specificiteit verhogen is hier de nette oplossing,
 * geen `!important` nodig.
 *
 * LET OP: als JavaScript om wat voor reden dan ook niet laadt, blijft
 * deze tekst onzichtbaar (geen automatische fallback ingebouwd) — gezien
 * dit hele design-systeem al zwaar op GSAP leunt (knoppen, hero's, etc.)
 * is dat een bewust geaccepteerde afweging, geen losse bug hier.
 */
.js-split.js-split {
	opacity: 0;
}

/* Mask-wrapper om elke regel — zorgt dat een regel fysiek buiten deze
   geclipte ruimte kan staan (via yPercent, zie text-reveal.js), niet
   afhankelijk van opacity alleen.

   padding-bottom + evenveel negatieve margin-bottom: geeft ruimte voor
   letter-staarten (g, j, p, q, y) die anders net afgekapt worden door
   de overflow:hidden — zonder dat de regelafstand tussen regels
   daardoor groter wordt (de negatieve marge trekt het weer gelijk). */
.js-split-mask {
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
}