/* 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;
}

.js [data-motion="parallax"] {
	will-change: transform;
	transform: translateZ(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);
	}
}

/* Parallax Effect
---------------------------------------- */

.motion-parallax {
	transition: transform 0.1s ease-out;
}

/* Cover block: small / large parallax background (scaled to cover when moving)
---------------------------------------- */

[data-cover-background-motion] {
	overflow: hidden;
}

[data-cover-background-motion] .cover-background-motion {
	will-change: transform;
	transform: translateZ(0);
	transform-origin: center top;
	/* No transition so scale is not animated on load */
	object-fit: cover;
}

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

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

	[data-cover-background-motion] .cover-background-motion {
		transform: none !important;
		transition: none !important;
	}
}