/*
 * Morin Theme motion utilities.
 *
 * Add these classes to Elementor widgets, columns, or containers:
 * motion-fade, motion-up, motion-down, motion-left, motion-right,
 * motion-scale, motion-left-stagger-1..7, motion-up-stagger-1..5,
 * motion-no-out, and motion-hover-scale.
 */

html.motion-enabled .motion-fade,
html.motion-enabled .motion-up,
html.motion-enabled .motion-down,
html.motion-enabled .motion-left,
html.motion-enabled .motion-right,
html.motion-enabled .motion-scale,
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 {
	opacity: 0;
	transition-duration: 900ms;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

html.motion-enabled .motion-up { transform: translate3d(0, -120px, 0); }
html.motion-enabled .motion-down { transform: translate3d(0, 120px, 0); }
html.motion-enabled .motion-left { transform: translate3d(-120px, 0, 0); }
html.motion-enabled .motion-right { transform: translate3d(120px, 0, 0); }
html.motion-enabled .motion-scale { transform: scale(0.88); }
html.motion-enabled .motion-left-stagger-1,
html.motion-enabled .motion-left-stagger-2,
html.motion-enabled .motion-left-stagger-3,
html.motion-enabled .motion-left-stagger-4,
html.motion-enabled .motion-left-stagger-5,
html.motion-enabled .motion-left-stagger-6,
html.motion-enabled .motion-left-stagger-7 { transform: translate3d(-120px, 0, 0); }

html.motion-enabled .motion-up-stagger-1,
html.motion-enabled .motion-up-stagger-2,
html.motion-enabled .motion-up-stagger-3,
html.motion-enabled .motion-up-stagger-4,
html.motion-enabled .motion-up-stagger-5 {
	opacity: 0;
	transform: translate3d(0, 120px, 0);
	transition-duration: 900ms;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

html.motion-enabled .motion-up-stagger-1.is-visible,
html.motion-enabled .motion-up-stagger-2.is-visible,
html.motion-enabled .motion-up-stagger-3.is-visible,
html.motion-enabled .motion-up-stagger-4.is-visible,
html.motion-enabled .motion-up-stagger-5.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

html.motion-enabled .motion-up-stagger-1.is-exiting,
html.motion-enabled .motion-up-stagger-2.is-exiting,
html.motion-enabled .motion-up-stagger-3.is-exiting,
html.motion-enabled .motion-up-stagger-4.is-exiting,
html.motion-enabled .motion-up-stagger-5.is-exiting {
	transition-duration: 1500ms;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-enabled .motion-fade.is-visible,
html.motion-enabled .motion-up.is-visible,
html.motion-enabled .motion-down.is-visible,
html.motion-enabled .motion-left.is-visible,
html.motion-enabled .motion-right.is-visible,
html.motion-enabled .motion-scale.is-visible,
html.motion-enabled .motion-left-stagger-1.is-visible,
html.motion-enabled .motion-left-stagger-2.is-visible,
html.motion-enabled .motion-left-stagger-3.is-visible,
html.motion-enabled .motion-left-stagger-4.is-visible,
html.motion-enabled .motion-left-stagger-5.is-visible,
html.motion-enabled .motion-left-stagger-6.is-visible,
html.motion-enabled .motion-left-stagger-7.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

html.motion-enabled .motion-fade.is-exiting,
html.motion-enabled .motion-up.is-exiting,
html.motion-enabled .motion-down.is-exiting,
html.motion-enabled .motion-left.is-exiting,
html.motion-enabled .motion-right.is-exiting,
html.motion-enabled .motion-scale.is-exiting,
html.motion-enabled .motion-left-stagger-1.is-exiting,
html.motion-enabled .motion-left-stagger-2.is-exiting,
html.motion-enabled .motion-left-stagger-3.is-exiting,
html.motion-enabled .motion-left-stagger-4.is-exiting,
html.motion-enabled .motion-left-stagger-5.is-exiting,
html.motion-enabled .motion-left-stagger-6.is-exiting,
html.motion-enabled .motion-left-stagger-7.is-exiting {
	transition-duration: 1500ms;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.motion-hover-scale {
		transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
		will-change: transform;
	}

	.motion-hover-scale:hover {
		transform: scale(1.1) !important;
	}
}

@media (max-width: 767px) {
	html.motion-enabled,
	html.motion-enabled body {
		overflow-x: hidden;
	}

	html.motion-enabled .motion-left,
	html.motion-enabled .motion-right,
	html.motion-enabled .motion-left-stagger-1,
	html.motion-enabled .motion-left-stagger-2,
	html.motion-enabled .motion-left-stagger-3,
	html.motion-enabled .motion-left-stagger-4,
	html.motion-enabled .motion-left-stagger-5,
	html.motion-enabled .motion-left-stagger-6,
	html.motion-enabled .motion-left-stagger-7 {
		max-width: 100%;
	}

	html.motion-enabled .motion-up { transform: translate3d(0, -40px, 0); }
	html.motion-enabled .motion-down { transform: translate3d(0, 40px, 0); }
	html.motion-enabled .motion-left { transform: translate3d(-40px, 0, 0); }
	html.motion-enabled .motion-right { transform: translate3d(40px, 0, 0); }
	html.motion-enabled .motion-left-stagger-1,
	html.motion-enabled .motion-left-stagger-2,
	html.motion-enabled .motion-left-stagger-3,
	html.motion-enabled .motion-left-stagger-4,
	html.motion-enabled .motion-left-stagger-5,
	html.motion-enabled .motion-left-stagger-6,
	html.motion-enabled .motion-left-stagger-7 { transform: translate3d(-40px, 0, 0); }
	html.motion-enabled .motion-up-stagger-1,
	html.motion-enabled .motion-up-stagger-2,
	html.motion-enabled .motion-up-stagger-3,
	html.motion-enabled .motion-up-stagger-4,
	html.motion-enabled .motion-up-stagger-5 { transform: translate3d(0, 40px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	html.motion-enabled .motion-fade,
	html.motion-enabled .motion-up,
	html.motion-enabled .motion-down,
	html.motion-enabled .motion-left,
	html.motion-enabled .motion-right,
	html.motion-enabled .motion-scale,
	html.motion-enabled .motion-left-stagger-1,
	html.motion-enabled .motion-left-stagger-2,
	html.motion-enabled .motion-left-stagger-3,
	html.motion-enabled .motion-left-stagger-4,
	html.motion-enabled .motion-left-stagger-5,
	html.motion-enabled .motion-left-stagger-6,
	html.motion-enabled .motion-left-stagger-7,
	html.motion-enabled .motion-up-stagger-1,
	html.motion-enabled .motion-up-stagger-2,
	html.motion-enabled .motion-up-stagger-3,
	html.motion-enabled .motion-up-stagger-4,
	html.motion-enabled .motion-up-stagger-5 {
		opacity: 1;
		transform: none;
		transition: none;
	}
}