/* Marker highlight (after Magic UI "highlighter"): a marker stroke in --kfx-c draws in behind the text when it
 * scrolls into view. If the block has bold or <mark> words, only those get marked; otherwise the whole text does.
 * Default "slice" decoration means the stroke runs line by line in reading order on multi-line text. */
.kfx-highlight-on-scroll .kfx-hl {
	--kfx-hl-ink: color-mix(in oklab, var(--kfx-c) 42%, transparent);
	background-color: transparent;
	color: inherit;
	background-image: linear-gradient(
		180deg,
		transparent 0 50%,
		var(--kfx-hl-ink) 50% 92%,
		transparent 92%
	);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0% 100%;
	padding: 0 0.12em;
	margin: 0 -0.12em;
	border-radius: 0.2em 0.35em 0.25em 0.4em;
	transition: background-size calc(1.1s * var(--kfx-s)) var(--kfx-ease);
	transition-delay: calc(var(--kfx-hl-d, 0ms) * var(--kfx-s));
}
/* Paragraphs get a slimmer, underline-weight stroke so long copy stays calm. */
p.kfx-highlight-on-scroll .kfx-hl {
	background-image: linear-gradient(
		180deg,
		transparent 0 56%,
		var(--kfx-hl-ink) 56% 94%,
		transparent 94%
	);
}
.kfx-highlight-on-scroll.is-lit .kfx-hl { background-size: 100% 100%; }

/* Without JS (or before it runs) the text is simply plain. Reduced motion: shown fully, no draw. */
@media (prefers-reduced-motion: reduce) {
	.kfx-highlight-on-scroll .kfx-hl { transition: none; background-size: 100% 100%; }
}