/* =========================================================================
   CleanerTurf — front-end animations
   Everything is gated on html.ct-js so the block editor (and no-JS visitors)
   always see fully visible content.
   ====================================================================== */

/* ---- Scroll reveal -------------------------------------------------- */
html.ct-js .reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.8s var(--ct-ease, ease), transform 0.8s var(--ct-ease, ease);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}

html.ct-js .reveal--left {
	transform: translate3d(-36px, 0, 0);
}

html.ct-js .reveal--right {
	transform: translate3d(36px, 0, 0);
}

html.ct-js .reveal--zoom {
	transform: scale(0.94);
}

html.ct-js .reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---- Hero ----------------------------------------------------------- */
@keyframes ct-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes ct-underline {
	from {
		background-size: 0% 100%;
	}
	to {
		background-size: 100% 100%;
	}
}

@keyframes ct-pop {
	from {
		opacity: 0;
		transform: scale(0.7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ct-drift {
	0%,
	100% {
		background-position: 0% 0%, 100% 100%, 0 0;
	}
	50% {
		background-position: 6% 4%, 94% 92%, 0 0;
	}
}

html.ct-js .ct-hero {
	background-size: 140% 140%, 140% 140%, 100% 100%;
	animation: ct-drift 18s ease-in-out infinite;
}

html.ct-js .ct-float-badge {
	opacity: 0;
	animation: ct-pop 0.6s var(--ct-ease, ease) 0.9s forwards, ct-float 5.5s ease-in-out 1.6s infinite;
	translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 14px);
	transition: translate 0.5s var(--ct-ease, ease);
}

html.ct-js .ct-float-badge--bl {
	animation-delay: 1.1s, 2.4s;
}

html.ct-js .ct-hero .hl {
	background-size: 0% 100%;
	animation: ct-underline 0.9s var(--ct-ease, ease) 0.7s forwards;
}

html.ct-js .ct-hero-media .wp-block-image img {
	transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -6px), 0) scale(1.02);
	transition: transform 0.6s var(--ct-ease, ease);
}

/* Swaying grass edge */
@keyframes ct-sway {
	0%,
	100% {
		background-position-x: 0;
	}
	50% {
		background-position-x: 14px;
	}
}

html.ct-js .ct-grass-edge {
	animation: ct-sway 7s ease-in-out infinite;
}

/* ---- Marquee (JS clones the chips for a seamless loop) -------------- */
@keyframes ct-marquee {
	to {
		transform: translateX(-50%);
	}
}

html.ct-js .ct-marquee.is-running .ct-marquee__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: ct-marquee 36s linear infinite;
}

html.ct-js .ct-marquee.is-running:hover .ct-marquee__track {
	animation-play-state: paused;
}

/* ---- Step badges pulse --------------------------------------------- */
@keyframes ct-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.55);
	}
	100% {
		box-shadow: 0 0 0 14px rgba(255, 176, 0, 0);
	}
}

html.ct-js .ct-stepnum {
	animation: ct-ring 2.4s ease-out infinite;
}

html.ct-js .ct-band__item:nth-child(2) .ct-stepnum {
	animation-delay: 0.5s;
}

html.ct-js .ct-band__item:nth-child(3) .ct-stepnum {
	animation-delay: 1s;
}

/* ---- Featured plan glow -------------------------------------------- */
@keyframes ct-glow {
	0%,
	100% {
		box-shadow: 0 30px 60px -28px rgba(0, 49, 19, 0.55), 0 0 0 0 rgba(255, 176, 0, 0);
	}
	50% {
		box-shadow: 0 30px 60px -24px rgba(0, 49, 19, 0.6), 0 0 0 6px rgba(255, 176, 0, 0.22);
	}
}

html.ct-js .ct-plan--featured {
	animation: ct-glow 4s ease-in-out infinite;
}

/* ---- Compare slider intro nudge ------------------------------------ */
@keyframes ct-nudge {
	0%,
	100% {
		--pos: 50%;
	}
	30% {
		--pos: 38%;
	}
	65% {
		--pos: 62%;
	}
}

@property --pos {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 50%;
}

html.ct-js .ct-compare.is-ready.is-nudging {
	animation: ct-nudge 2.4s ease-in-out 1;
}

/* ---- FAQ open --------------------------------------------------------*/
@keyframes ct-fade-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ct-faq .wp-block-details[open] > :not(summary) {
	animation: ct-fade-down 0.35s var(--ct-ease, ease);
}

/* ---- Respect reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.ct-js .reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	html.ct-js .ct-hero,
	html.ct-js .ct-float-badge,
	html.ct-js .ct-hero .hl,
	html.ct-js .ct-grass-edge,
	html.ct-js .ct-stepnum,
	html.ct-js .ct-plan--featured,
	html.ct-js .ct-marquee.is-running .ct-marquee__track,
	html.ct-js .ct-compare.is-ready.is-nudging {
		animation: none !important;
	}

	html.ct-js .ct-float-badge {
		opacity: 1;
	}

	html.ct-js .ct-hero .hl {
		background-size: 100% 100%;
	}
}