/**
 * Shared Ecovenir homepage motion.
 *
 * Content is visible by default. The hidden starting state is activated only
 * after the first-party observer has initialized, so no-JS rendering is safe.
 */

body.ecovenir-motion-enabled {
	--ec-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ec-motion-section-distance: 1rem;
	--ec-motion-item-distance: 1.5rem;
	--ec-motion-item-scale: 0.985;
	--ec-motion-media-scale: 1.02;
	--ec-motion-section-duration: 520ms;
	--ec-motion-item-duration: 620ms;
	--ec-motion-media-duration: 720ms;
}

body.ecovenir-motion-intensity-subtle {
	--ec-motion-section-distance: 0.65rem;
	--ec-motion-item-distance: 1rem;
	--ec-motion-item-scale: 0.992;
	--ec-motion-media-scale: 1.012;
	--ec-motion-section-duration: 460ms;
	--ec-motion-item-duration: 540ms;
	--ec-motion-media-duration: 620ms;
}

body.ecovenir-motion-intensity-expressive {
	--ec-motion-section-distance: 1.35rem;
	--ec-motion-item-distance: 1.85rem;
	--ec-motion-item-scale: 0.975;
	--ec-motion-media-scale: 1.028;
	--ec-motion-section-duration: 580ms;
	--ec-motion-item-duration: 680ms;
	--ec-motion-media-duration: 820ms;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal:not(.is-ec-motion-visible) {
	opacity: 0;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--section:not(.is-ec-motion-visible) {
	transform: translate3d(0, var(--ec-motion-section-distance), 0);
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--item:not(.is-ec-motion-visible) {
	transform: translate3d(0, var(--ec-motion-item-distance), 0) scale(var(--ec-motion-item-scale));
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--media:not(.is-ec-motion-visible) {
	transform: scale(var(--ec-motion-media-scale));
}

/* Never leave a keyboard-focused control inside a visually hidden reveal. */
html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal:focus-within,
html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal.is-ec-motion-focus-revealed {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
	will-change: auto !important;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal.is-ec-motion-visible {
	animation-delay: var(--ec-motion-delay, 0ms);
	animation-fill-mode: backwards;
	animation-timing-function: var(--ec-motion-ease);
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--section.is-ec-motion-visible {
	animation-duration: var(--ec-motion-section-duration);
	animation-name: ecovenir-motion-section-in;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--item.is-ec-motion-visible {
	animation-duration: var(--ec-motion-item-duration);
	animation-name: ecovenir-motion-item-in;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal--media.is-ec-motion-visible {
	animation-duration: var(--ec-motion-media-duration);
	animation-name: ecovenir-motion-media-in;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal.is-ec-motion-animating {
	will-change: opacity, transform;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-category-card.ecovenir-motion-reveal--item:not(.is-ec-motion-visible)::after {
	opacity: 0.08;
	transform: scale(0.9) rotate(3deg);
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-category-card.ecovenir-motion-reveal--item.is-ec-motion-visible::after {
	animation: ecovenir-motion-icon-in 720ms var(--ec-motion-ease) var(--ec-motion-delay, 0ms) backwards;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-category-card.is-ec-motion-focus-revealed::after {
	animation: none !important;
}

html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-category-card:focus-within::after {
	animation: none !important;
	opacity: 0.24 !important;
}

@keyframes ecovenir-motion-section-in {
	from {
		opacity: 0;
		transform: translate3d(0, var(--ec-motion-section-distance), 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ecovenir-motion-item-in {
	from {
		opacity: 0;
		transform: translate3d(0, var(--ec-motion-item-distance), 0) scale(var(--ec-motion-item-scale));
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes ecovenir-motion-media-in {
	from {
		opacity: 0;
		transform: scale(var(--ec-motion-media-scale));
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes ecovenir-motion-icon-in {
	from {
		opacity: 0.08;
		transform: scale(0.9) rotate(3deg);
	}

	to {
		opacity: 0.16;
		transform: scale(1) rotate(0);
	}
}

@media (max-width: 600px) {
	body.ecovenir-motion-mobile-reduced {
		--ec-motion-section-distance: 0.75rem;
		--ec-motion-item-distance: 0.75rem;
		--ec-motion-item-scale: 1;
		--ec-motion-media-scale: 1.01;
		--ec-motion-section-duration: 400ms;
		--ec-motion-item-duration: 440ms;
		--ec-motion-media-duration: 500ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal,
	html.ecovenir-motion-js body.ecovenir-motion-enabled .ecovenir-motion-reveal::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
	}
}