:root {
	--wm-animation-duration: 1.4s;
	--wm-animation-delay: 0s;
	--wm-animation-distance: 150px;
}

[data-animate] {
	will-change: opacity, transform;
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	transition-duration: var(--wm-animation-duration, 1.4s);
	transition-delay: var(--wm-animation-delay, 0s);
}

[data-animate="fade-in"] {
	opacity: 0;
}

[data-animate="fade-in-up"] {
	transform: translateY(var(--wm-animation-distance, 150px));
}

[data-animate="fade-in-left"] {
	transform: translateX(calc(-1 * var(--wm-animation-distance, 150px)));
}

[data-animate="fade-in-right"] {
	transform: translateX(var(--wm-animation-distance, 150px));
}

[data-animate][data-animation-state="animated"] {
	opacity: 1;
	transform: translate(0, 0) !important;
	will-change: auto;
}

html.disable-animations [data-animate] {
	transition: none !important;
	opacity: 1 !important;
	transform: none !important;
	will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.disable-animations) [data-animate] {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		will-change: auto !important;
	}
}