/* Motion Effetcs
---------------------------------------- */

.js [data-motion="fadeIn"]:not(.motion-fadeIn),
.js [data-motion="fadeInUp"]:not(.motion-fadeInUp),
.js [data-motion="fadeInDown"]:not(.motion-fadeInDown) {
	opacity: 0;
}

/* Fade In
---------------------------------------- */

.motion-fadeIn {
	animation-name: fadeIn;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Fade In Up
---------------------------------------- */

.motion-fadeInUp {
	animation-name: fadeInUp;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(var(--gin-motion-distance, 20px));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade In Down
---------------------------------------- */

.motion-fadeInDown {
	animation-name: fadeInDown;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(calc(var(--gin-motion-distance, 20px) * -1));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}