/**
 * Handgetekende kras onder een woord/zin — tekent zich in zodra het element
 * in beeld scrolt en blijft daarna staan. Zelfde look als de homepage-hero-kras
 * (17 padvarianten, JS kiest er één). Herbruikbaar via class .lc-ink-word.
 *
 * Markup (server): <span class="lc-ink-word">tekst</span>
 * JS (ink-scribble.js) injecteert de SVG + zet .is-drawn bij in-view.
 */
.lc-ink-word {
	position: relative;
	white-space: nowrap; /* de kras loopt onder één regel; korte zin past */
}
.lc-ink-scribble {
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: -0.18em;
	width: calc( 100% + 0.1em );
	height: 0.55em;
	overflow: visible;
	pointer-events: none;
}
.lc-ink-scribble path {
	fill: none;
	stroke: var( --main, #8BBA3F );
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100; /* onzichtbaar tot .is-drawn */
}
/* Tekent één keer in als het woord in beeld komt; forwards → blijft staan. */
.lc-ink-word.is-drawn .lc-ink-scribble path {
	animation: lc-ink-draw var( --lc-scr-dur, 1.3s ) ease-out forwards;
}
@keyframes lc-ink-draw {
	to { stroke-dashoffset: 0; }
}
/* Geen beweging gewenst → direct volledig getekend, geen animatie. */
@media ( prefers-reduced-motion: reduce ) {
	.lc-ink-scribble path { animation: none !important; stroke-dashoffset: 0; }
}