/**
 * Canvas: scroll-driven text effects.
 *
 * Two effects that read the scroll engine's progress custom properties:
 *
 *  1. `.text-fill-effect`: a heading painted with a gradient whose width is
 *     `--cnvs-scroll-start`, so the copy fills in as the section scrolls past.
 *     The base rule in style.css clips the gradient to the glyphs and paints
 *     the unfilled remainder transparent; the placeholder token here makes the
 *     unfilled remainder a faint contrast tint instead, which is what the
 *     effect needs to be legible before it fills.
 *  2. `.text-splitter.scroll-detect`, per-character fade and rotation driven
 *     by `--cnvs-scroll-percent` and staggered by `--cnvs-split-index`.
 *
 * Loaded only on pages carrying `text-fill-effect` or `text-splitter`
 * (see the `canvas_pattern_features` map in inc/block-theme.php).
 */

.text-fill-effect {
	--cnvs-text-fill-placeholder: rgba(var(--cnvs-contrast-rgb), 0.1);
	--cnvs-text-fill-color: linear-gradient(to right, var(--cnvs-contrast-1000), var(--cnvs-contrast-1000));

	position: relative;
	background-image: var(--cnvs-text-fill-color);
	background-size: calc(var(--cnvs-scroll-start) * 100%) 100%;
	background-repeat: no-repeat;
	-webkit-text-fill-color: var(--cnvs-text-fill-placeholder);
}

.text-splitter.scroll-detect span {
	opacity: calc(0.1 + (1 * var(--cnvs-scroll-percent)));
	transform: rotateX(20deg);
	transition: all .3s ease;
	transition-delay: 0s;
}

.text-splitter.scroll-detect.scroll-detect-inview span {
	transform: rotateX(0);
	transition-delay: calc(.04s * var(--cnvs-split-index));
}