/* Motion Effects
---------------------------------------- */

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

/* Shared Animation Behavior
---------------------------------------- */

.motion-fadeIn,
.motion-fadeInUp,
.motion-fadeInDown {
	animation-name: motion-fade;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;

	/* Default motion variables */
	--motion-opacity-from: 0;
	--motion-translate-from: 0;
}

/* Effect Variations
---------------------------------------- */

.motion-fadeIn {
	--motion-opacity-from: 0;
	--motion-translate-from: 0;
}

.motion-fadeInUp {
	--motion-opacity-from: 0;
	--motion-translate-from: var(--powder-motion-distance, 20px);
}

.motion-fadeInDown {
	--motion-opacity-from: 0;
	--motion-translate-from: calc(var(--powder-motion-distance, 20px) * -1);
}

/* Unified Keyframes
---------------------------------------- */

@keyframes motion-fade {
	from {
		opacity: var(--motion-opacity-from);
		transform: translateY(var(--motion-translate-from));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Reduced Motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.motion-fadeIn,
	.motion-fadeInUp,
	.motion-fadeInDown {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}