/*
 * Mauve Elementor - Motion Effects
 */

/* ------------------------------
 * Slide In Down (Smooth)
 * ------------------------------ */
@-webkit-keyframes slideInDownSmooth {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInDownSmooth {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.ms_ani_slideInDownSmooth {
	-webkit-animation-name: slideInDownSmooth;
	animation-name: slideInDownSmooth;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* ------------------------------
 * Slide Out Up (Smooth)
 * ------------------------------ */
@-webkit-keyframes slideOutUpSmooth {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
}
@keyframes slideOutUpSmooth {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -15px, 0);
		transform: translate3d(0, -15px, 0);
	}
}
.ms_ani_slideOutUpSmooth {
	-webkit-animation-name: slideOutUpSmooth;
	animation-name: slideOutUpSmooth;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}


/* ------------------------------
 * Short fade variants (Mauve)
 * ------------------------------ */

/* Fade In (Short) */
@-webkit-keyframes ms_fadeInShort {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes ms_fadeInShort {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.ms_ani_fadeInShort {
	-webkit-animation-name: ms_fadeInShort;
	animation-name: ms_fadeInShort;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* Fade In Up (Short) */
@-webkit-keyframes ms_fadeInUpShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 36px, 0);
		transform: translate3d(0, 36px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes ms_fadeInUpShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 36px, 0);
		transform: translate3d(0, 36px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.ms_ani_fadeInUpShort {
	-webkit-animation-name: ms_fadeInUpShort;
	animation-name: ms_fadeInUpShort;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* Fade In Down (Short) */
@-webkit-keyframes ms_fadeInDownShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -36px, 0);
		transform: translate3d(0, -36px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes ms_fadeInDownShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -36px, 0);
		transform: translate3d(0, -36px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.ms_ani_fadeInDownShort {
	-webkit-animation-name: ms_fadeInDownShort;
	animation-name: ms_fadeInDownShort;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* Fade In Left (Short) */
@-webkit-keyframes ms_fadeInLeftShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-36px, 0, 0);
		transform: translate3d(-36px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes ms_fadeInLeftShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-36px, 0, 0);
		transform: translate3d(-36px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.ms_ani_fadeInLeftShort {
	-webkit-animation-name: ms_fadeInLeftShort;
	animation-name: ms_fadeInLeftShort;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* Fade In Right (Short) */
@-webkit-keyframes ms_fadeInRightShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(36px, 0, 0);
		transform: translate3d(36px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes ms_fadeInRightShort {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(36px, 0, 0);
		transform: translate3d(36px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.ms_ani_fadeInRightShort {
	-webkit-animation-name: ms_fadeInRightShort;
	animation-name: ms_fadeInRightShort;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}

/* Optional: make "Short" variants feel snappier by default.
   Elementor still controls duration via Animation Duration, but when it's empty
   these values help keep things consistent. */
.ms_ani_fadeInShort,
.ms_ani_fadeInUpShort,
.ms_ani_fadeInDownShort,
.ms_ani_fadeInLeftShort,
.ms_ani_fadeInRightShort,
.ms_ani_slideInDownSmooth,
.ms_ani_slideOutUpSmooth {
	-webkit-animation-duration: 350ms;
	animation-duration: 350ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* ------------------------------------------------------------------
 * Text split helpers
 *
 * IMPORTANT: for char-by-char / word-by-word transforms to be visible,
 * each piece must be an inline-block (inline elements don't reliably
 * show per-character transforms across browsers).
 * ------------------------------------------------------------------ */
.ms-animated-text-block,
.ms-animated-item.ms-animated-text-block {
	display: inline-block;
	will-change: transform, opacity;
}

/* Keep words together, but still allow wrapping between words */
.ms-animated-word {
	display: inline-block;
	white-space: nowrap;
}
