/*
 * CountForward scroll animation initial states.
 *
 * These rules set the starting transform/opacity for elements that will be
 * animated with GSAP + ScrollTrigger. The final states are handled by GSAP
 * tweens on the front end; these CSS rules should never be enqueued in the
 * block/Site Editor.
 */

/* ---------------------------------------------------------------
 * Initial states for scroll-triggered block styles.
 * --------------------------------------------------------------- */

.is-style-fade-up,
.is-style-slide-in-left,
.is-style-slide-in-right,
.is-style-scale-in,
.is-style-stagger-children > *,
.is-style-stagger-slide-in-left > * {
	will-change: transform, opacity;
}

.is-style-fade-up {
	opacity: 0;
	transform: translateY(40px);
}

.is-style-slide-in-left {
	opacity: 0;
	transform: translateX(-60px);
}

.is-style-slide-in-right {
	opacity: 0;
	transform: translateX(60px);
}

.is-style-scale-in {
	opacity: 0;
	transform: scale(0.95);
}

.is-style-stagger-children > * {
	opacity: 0;
	transform: translateY(30px);
}

.is-style-stagger-slide-in-left > * {
	opacity: 0;
	transform: translateX(-60px);
}

.is-style-parallax {
	will-change: transform;
}

/* Gradient text uses its own reveal — don't hide it under stagger initials. */
.is-style-stagger-slide-in-left > .cf-gradient-text,
.is-style-stagger-children > .cf-gradient-text {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ---------------------------------------------------------------
 * Gradient text wipe (scroll / in-view triggered).
 * Pending (pre-wipe) styles apply under html.js — set by an early head
 * script — so above-the-fold text never flashes solid before the wipe.
 * No-JS stays solid readable text.
 * --cf-gradient-text-fill: solid color after the wipe (default: white).
 * --------------------------------------------------------------- */

.cf-gradient-text {
	--cf-gradient-text-fill: var(--wp--preset--color--base);
}

.cf-gradient-text--light-bg {
	--cf-gradient-text-fill: var(--wp--preset--color--contrast);
}

html.js .cf-gradient-text {
	/* Sweep hues sampled from bg-gradient0/1/2.webp (teal → blue → violet). */
	background-image: linear-gradient(
		90deg,
		var(--cf-gradient-text-fill) 0,
		var(--cf-gradient-text-fill) 33.33%,
		#0083a4 40%,
		#005599 45%,
		#25359b 50%,
		#39158f 55%,
		#6500a0 60%,
		transparent 66.67%,
		transparent
	);
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

html.js .cf-gradient-text--animate {
	animation-name: cf-gradient-sweep;
	animation-duration: 1.2s;
	animation-delay: 0.1s;
	animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	animation-fill-mode: forwards;
}

@keyframes cf-gradient-sweep {
	from {
		filter: blur(1px);
		background-position: 100% 0;
	}

	to {
		filter: blur(0);
		background-position: 0 0;
	}
}

/* ---------------------------------------------------------------
 * Reduced motion: keep content visible and disable motion hints.
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.is-style-fade-up,
	.is-style-slide-in-left,
	.is-style-slide-in-right,
	.is-style-scale-in,
	.is-style-stagger-children > *,
	.is-style-stagger-slide-in-left > *,
	.is-style-parallax {
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
	}

	html.js .cf-gradient-text {
		background-image: none;
		-webkit-text-fill-color: unset;
		color: inherit;
		filter: none;
	}

	html.js .cf-gradient-text--animate {
		animation: none;
	}
}