/* Defaults (can be overridden per element via CSS variables) */
.animated.fadeInDownBlur,
.animated.fadeInUpBlur {
	--ebea-blur: 10px;
	--ebea-distance: 20px;
	will-change: transform, opacity, filter;
}

/* Down = comes from above (negative Y) */
@keyframes fadeInDownBlur {
	0% {
		opacity: 0;
		transform: translate3d(0, calc(var(--ebea-distance) * -1), 0);
		filter: blur(var(--ebea-blur));
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

/* Up = comes from below (positive Y) */
@keyframes fadeInUpBlur {
	0% {
		opacity: 0;
		transform: translate3d(0, var(--ebea-distance), 0);
		filter: blur(var(--ebea-blur));
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		filter: blur(0);
	}
}

/* Tie animation-name to the class Elementor outputs */
.animated.fadeInDownBlur { animation-name: fadeInDownBlur; }
.animated.fadeInUpBlur   { animation-name: fadeInUpBlur; }