/*
 * Individual transform properties deliberately compose with Elementor's own
 * transform declaration instead of replacing it with a second transform.
 */
.peap-motion {
	--peap-motion-scroll-x: 0px;
	--peap-motion-scroll-y: 0px;
	--peap-motion-mouse-x: 0px;
	--peap-motion-mouse-y: 0px;
	--peap-motion-entrance-x: 0px;
	--peap-motion-entrance-y: 0px;
	--peap-motion-scroll-rotate: 0deg;
	--peap-motion-entrance-rotate: 0deg;
	--peap-motion-tilt-x: 0deg;
	--peap-motion-tilt-y: 0deg;
	--peap-motion-scroll-scale: 1;
	--peap-motion-mouse-scale: 1;
	--peap-motion-entrance-scale: 1;
	--peap-motion-opacity: 1;
	--peap-motion-entrance-opacity: 1;
	--peap-motion-blur: 0px;
	--peap-motion-entrance-blur: 0px;
	--peap-motion-base-filter: brightness(1);
	--peap-motion-duration: 700ms;
	--peap-motion-delay: 0ms;
	--peap-motion-easing: ease-out;
	translate: calc(var(--peap-motion-scroll-x) + var(--peap-motion-mouse-x) + var(--peap-motion-entrance-x)) calc(var(--peap-motion-scroll-y) + var(--peap-motion-mouse-y) + var(--peap-motion-entrance-y));
	rotate: calc(var(--peap-motion-scroll-rotate) + var(--peap-motion-entrance-rotate) + var(--peap-motion-tilt-y));
	scale: calc(var(--peap-motion-scroll-scale) * var(--peap-motion-mouse-scale) * var(--peap-motion-entrance-scale));
	transform: var(--peap-motion-base-transform, none) rotateX(var(--peap-motion-tilt-x));
	transform-origin: var(--peap-motion-origin, center center);
	filter: var(--peap-motion-base-filter) blur(calc(var(--peap-motion-blur) + var(--peap-motion-entrance-blur)));
	opacity: calc(var(--peap-motion-opacity) * var(--peap-motion-entrance-opacity));
	will-change: translate, rotate, scale, opacity, filter;
}

.peap-motion.peap-motion--entrance-pending {
	transition: translate var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay), rotate var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay), scale var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay), filter var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay), opacity var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay), transform var(--peap-motion-duration) var(--peap-motion-easing) var(--peap-motion-delay);
}

.peap-motion.peap-motion--debug {
	outline: 1px dashed #2271b1;
	outline-offset: 2px;
}

.peap-motion.peap-motion--sticky-active {
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

@media (prefers-reduced-motion: reduce) {
	.peap-motion[data-peap-motion-reduced="yes"] {
	transition-duration: 0.01ms !important;
	transition-delay: 0ms !important;
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	translate: none;
	rotate: none;
	scale: 1;
	transform: var(--peap-motion-base-transform, none);
	filter: var(--peap-motion-base-filter);
	opacity: 1;
	}
}