/**
 * TO Scroll Text Fill — scoped styles (.toaew-stf / --toaew-stf-*)
 */

.toaew-stf {
	--toaew-stf-active: #111111;
	--toaew-stf-inactive: #d4d4d4;

	width: 100%;
	max-width: 720px;
	margin: 0;
}

.toaew-stf__text {
	margin: 0;
	color: var( --toaew-stf-inactive );
	font-size: clamp( 1.25rem, 2.4vw, 1.75rem );
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.toaew-stf__word {
	color: var( --toaew-stf-inactive );
	transition: color 0.05s linear;
	will-change: color;
}

.toaew-stf__word.is-filled {
	color: var( --toaew-stf-active );
}

.toaew-stf__word.is-mixing {
	color: color-mix(
		in srgb,
		var( --toaew-stf-active ) calc( var( --toaew-stf-word-mix, 0 ) * 100% ),
		var( --toaew-stf-inactive )
	);
}

@supports not ( color: color-mix( in srgb, red 50%, blue ) ) {
	.toaew-stf__word.is-mixing {
		color: var( --toaew-stf-active );
		opacity: calc( 0.35 + ( var( --toaew-stf-word-mix, 0 ) * 0.65 ) );
	}
}

.toaew-stf.is-reduced .toaew-stf__word {
	color: var( --toaew-stf-active );
}

@media ( prefers-reduced-motion: reduce ) {
	.toaew-stf__word {
		color: var( --toaew-stf-active );
		transition: none;
	}
}