/* ==========================================================================
   The Recyclers — motion
   A layer over the finished design. Every start state is gated on
   `.rcy-motion` (set in <head> by inc/enqueue.php, dropped again if
   assets/js/motion.js never starts) and on no-preference for reduced motion,
   so a failed script or a reduced-motion setting leaves everything visible.
   Standalone `translate`/`scale` only — never `transform` (see CLAUDE.md).
   ========================================================================== */

/* The ring's fill, as a number the browser can interpolate. */
@property --rcy-pct {
	syntax: "<number>";
	inherits: false;
	initial-value: 70;
}

.is-style-rcy-donut {
	background:
		radial-gradient(closest-side, var(--wp--preset--color--base) 72%, transparent 73%),
		conic-gradient(var(--wp--preset--color--primary) 0 calc(var(--rcy-pct) * 1%), var(--wp--preset--color--mint-strong) calc(var(--rcy-pct) * 1%) 100%);
}

@media (prefers-reduced-motion: no-preference) {

	/* Hero: the copy rises in sequence, the photograph settles. ------------- */

	.rcy-motion .is-style-rcy-hero .rcy-hero__inner > * {
		animation: rcy-rise 0.9s var(--rcy-ease) both;
	}

	.rcy-motion .is-style-rcy-hero .rcy-hero__inner > :nth-child(2) { animation-delay: 0.1s; }
	.rcy-motion .is-style-rcy-hero .rcy-hero__inner > :nth-child(3) { animation-delay: 0.2s; }
	.rcy-motion .is-style-rcy-hero .rcy-hero__inner > :nth-child(4) { animation-delay: 0.3s; }
	.rcy-motion .is-style-rcy-hero .rcy-hero__inner > :nth-child(5) { animation-delay: 0.4s; }

	.rcy-motion .is-style-rcy-hero .wp-block-cover__image-background {
		animation: rcy-settle 2.4s var(--rcy-ease) both;
	}

	/* Cards: fade up in a stagger as their row scrolls in. ----------------- */

	.rcy-motion .rcy-reveal:not(.rcy-in) {
		opacity: 0;
		translate: 0 28px;
	}

	.rcy-motion .rcy-reveal.rcy-revealing {
		transition:
			opacity 0.7s var(--rcy-ease) var(--rcy-delay, 0s),
			translate 0.7s var(--rcy-ease) var(--rcy-delay, 0s);
	}

	/* The ring fills from empty. */
	.rcy-motion .is-style-rcy-donut:not(.rcy-in) {
		--rcy-pct: 0;
	}

	.rcy-motion .is-style-rcy-donut {
		transition: --rcy-pct 1.8s var(--rcy-ease) 0.2s;
	}

	/* The recycling mark on the offer badge turns slowly. */
	.is-style-rcy-badge::before {
		animation: rcy-spin 8s linear infinite;
	}

	/* The offer's button breathes, to draw the eye to the one action. */
	.is-style-rcy-offer-card .wp-block-button.is-style-rcy-white .wp-block-button__link {
		animation: rcy-glow 2.8s ease-in-out infinite;
	}
}

@keyframes rcy-rise {
	from { opacity: 0; translate: 0 24px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes rcy-settle {
	from { scale: 1.08; }
	to { scale: 1; }
}

@keyframes rcy-spin {
	to { rotate: 360deg; }
}

@keyframes rcy-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgb(126 231 135 / 0%); }
	50% { box-shadow: 0 0 0 10px rgb(126 231 135 / 22%); }
}