:root {
	--acfai-accent-distance: 28px;
	--acfai-accent-duration: 500ms;
	--acfai-accent-delay: 0ms;
	--acfai-accent-easing: cubic-bezier(.22, 1, .36, 1);
}

.acfai-animations-ready .acfai-accent-target {
	opacity: 0;
	transform: var(--acfai-accent-transform, translate3d(0, 0, 0)) scale(.985);
	transition:
		opacity var(--acfai-accent-duration) var(--acfai-accent-easing) var(--acfai-accent-delay),
		transform var(--acfai-accent-duration) var(--acfai-accent-easing) var(--acfai-accent-delay);
	will-change: opacity, transform;
}

.acfai-animations-ready .acfai-accent-up {
	--acfai-accent-transform: translate3d(0, var(--acfai-accent-distance), 0);
}

.acfai-animations-ready .acfai-accent-down {
	--acfai-accent-transform: translate3d(0, calc(var(--acfai-accent-distance) * -1), 0);
}

.acfai-animations-ready .acfai-accent-left {
	--acfai-accent-transform: translate3d(var(--acfai-accent-distance), 0, 0);
}

.acfai-animations-ready .acfai-accent-right {
	--acfai-accent-transform: translate3d(calc(var(--acfai-accent-distance) * -1), 0, 0);
}

.acfai-animations-ready .acfai-accent-target.acfai-in-view {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.acfai-animations-ready .acfai-accent-target,
	.acfai-animations-ready .acfai-accent-target.acfai-in-view {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}
