/*
 * SKS Motion Effects.
 * Uses the individual translate property so component hover transforms remain intact.
 */

:where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
) {
	--skswf-motion-duration: var(--sks-motion-duration, 650ms);
	--skswf-motion-delay: var(--sks-motion-delay, 0ms);
	--skswf-motion-distance: var(--sks-motion-distance, 20px);
	--skswf-motion-x: 0px;
	--skswf-motion-y: 0px;
	--skswf-motion-ease: var(--sks-motion-ease, cubic-bezier(.22, 1, .36, 1));
}

:where([data-skswf-motion="fade-in"], .sks-fade-in) {
	--skswf-motion-x: 0px;
	--skswf-motion-y: 0px;
}

:where([data-skswf-motion="fade-in-up"], .sks-fade-in-up) {
	--skswf-motion-x: 0px;
	--skswf-motion-y: var(--skswf-motion-distance);
}

:where([data-skswf-motion="fade-in-down"], .sks-fade-in-down) {
	--skswf-motion-x: 0px;
	--skswf-motion-y: calc(var(--skswf-motion-distance) * -1);
}

:where([data-skswf-motion="fade-in-left"], .sks-fade-in-left) {
	--skswf-motion-x: calc(var(--skswf-motion-distance) * -1);
	--skswf-motion-y: 0px;
}

:where([data-skswf-motion="fade-in-right"], .sks-fade-in-right) {
	--skswf-motion-x: var(--skswf-motion-distance);
	--skswf-motion-y: 0px;
}

:where(
	[data-skswf-motion="slide-in"],
	[data-skswf-motion^="slide-in-"],
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
) {
	--skswf-motion-distance: 40px;
}

:where(
	[data-skswf-motion="slide-in"],
	[data-skswf-motion="slide-in-up"],
	.sks-slide-in,
	.sks-slide-in-up
) {
	--skswf-motion-x: 0px;
	--skswf-motion-y: var(--skswf-motion-distance);
}

:where([data-skswf-motion="slide-in-down"], .sks-slide-in-down) {
	--skswf-motion-x: 0px;
	--skswf-motion-y: calc(var(--skswf-motion-distance) * -1);
}

:where([data-skswf-motion="slide-in-left"], .sks-slide-in-left) {
	--skswf-motion-x: calc(var(--skswf-motion-distance) * -1);
	--skswf-motion-y: 0px;
}

:where([data-skswf-motion="slide-in-right"], .sks-slide-in-right) {
	--skswf-motion-x: var(--skswf-motion-distance);
	--skswf-motion-y: 0px;
}

html.skswf-motion-js :where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
):not(.is-visible):not(.is-motion-complete) {
	opacity: 0;
	translate: var(--skswf-motion-x) var(--skswf-motion-y);
	will-change: opacity, translate;
}

html.skswf-motion-js :where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
).is-visible {
	opacity: 1;
	translate: 0 0;
	transition-property: opacity, translate;
	transition-duration: var(--skswf-motion-duration);
	transition-delay: var(--skswf-motion-delay);
	transition-timing-function: var(--skswf-motion-ease);
	will-change: opacity, translate;
}

.is-motion-complete:where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
) {
	opacity: 1;
	translate: 0 0;
	will-change: auto;
}

.sks-delay-50 { --skswf-motion-delay: 50ms; }
.sks-delay-75 { --skswf-motion-delay: 75ms; }
.sks-delay-100 { --skswf-motion-delay: 100ms; }
.sks-delay-150 { --skswf-motion-delay: 150ms; }
.sks-delay-200 { --skswf-motion-delay: 200ms; }
.sks-delay-250 { --skswf-motion-delay: 250ms; }
.sks-delay-300 { --skswf-motion-delay: 300ms; }
.sks-delay-400 { --skswf-motion-delay: 400ms; }
.sks-delay-500 { --skswf-motion-delay: 500ms; }

.sks-duration-450 { --skswf-motion-duration: 450ms; }
.sks-duration-500 { --skswf-motion-duration: 500ms; }
.sks-duration-600 { --skswf-motion-duration: 600ms; }
.sks-duration-700 { --skswf-motion-duration: 700ms; }
.sks-duration-800 { --skswf-motion-duration: 800ms; }

.sks-duration-1000 {
	--skswf-motion-duration: 1000ms;
}

.sks-distance-12 {
	--skswf-motion-distance: 12px;
}

.sks-distance-18 {
	--skswf-motion-distance: 18px;
}

.sks-distance-24 {
	--skswf-motion-distance: 24px;
}

.sks-distance-32 {
	--skswf-motion-distance: 32px;
}

.sks-ease-soft {
	--skswf-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.sks-ease-standard {
	--skswf-motion-ease: cubic-bezier(.4, 0, .2, 1);
}

.sks-ease-out {
	--skswf-motion-ease: cubic-bezier(0, 0, .2, 1);
}

html.skswf-motion-editor :where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
),
.elementor-editor-active :where(
	[data-skswf-motion],
	.sks-fade-in,
	.sks-fade-in-up,
	.sks-fade-in-down,
	.sks-fade-in-left,
	.sks-fade-in-right,
	.sks-slide-in,
	.sks-slide-in-up,
	.sks-slide-in-down,
	.sks-slide-in-left,
	.sks-slide-in-right
) {
	opacity: 1 !important;
	translate: 0 0 !important;
	transition: none !important;
	will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	:where(
		[data-skswf-motion],
		.sks-fade-in,
		.sks-fade-in-up,
		.sks-fade-in-down,
		.sks-fade-in-left,
		.sks-fade-in-right,
		.sks-slide-in,
		.sks-slide-in-up,
		.sks-slide-in-down,
		.sks-slide-in-left,
		.sks-slide-in-right
	) {
		opacity: 1 !important;
		translate: 0 0 !important;
		transition: none !important;
		will-change: auto !important;
	}
}