.hf-anim {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.hf-anim--up {
	transform: translateY(28px);
}

.hf-anim--left {
	transform: translateX(-44px);
}

.hf-anim--right {
	transform: translateX(44px);
}

.hf-anim.is-visible {
	opacity: 1;
	transform: none;
}

@media (max-width: 1023px) {
	.hf-anim--left,
	.hf-anim--right {
		transform: translateY(28px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}