/* Platecraft Addons – text fills (headings, marquee): gradient, image in
   the letters, outline. The colors come from the widgets' controls. */

.pl-tf--gradient,
.pl-tf--image {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pl-tf--gradient {
	background-image: linear-gradient(var(--pl-tf-a, 90deg), var(--pl-tf-1, #c2410c), var(--pl-tf-2, #f59e0b), var(--pl-tf-3, var(--pl-tf-2, #f59e0b)));
}
.pl-tf--move {
	background-size: 200% auto;
	animation: pl-tf-move var(--pl-tf-speed, 4s) ease-in-out infinite alternate;
}
.pl-tf--image {
	background-color: currentColor;
	background-repeat: no-repeat;
	background-size: cover;
}
.pl-tf--outline {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: var(--pl-tf-sw, 1.5px) currentColor;
	transition: -webkit-text-fill-color 0.3s ease;
}
.pl-tf--outline:hover {
	-webkit-text-fill-color: var(--pl-tf-hover, transparent);
}

@keyframes pl-tf-move {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 100% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pl-tf--move {
		animation: none;
	}
}