/* Professionelle, dezente Scroll-Animationen */

.animate-left,
.animate-right,
.animate-up,
.animate-down,
.animate-fade,
.animate-zoom,
.animate-blur,
.animate-soft-scale,
.animate-float {
	opacity: 0;
	will-change: opacity, transform, filter;
	transition-property: opacity, transform, filter;
	transition-duration: 1.2s;
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
	transition-delay: .10s;
}

.animate-left      { transform: translate3d(-32px, 0, 0); }
.animate-right     { transform: translate3d(32px, 0, 0); }
.animate-up        { transform: translate3d(0, 26px, 0); }
.animate-down      { transform: translate3d(0, -26px, 0); }
.animate-fade      { transform: translate3d(0, 6px, 0); }
.animate-zoom      { transform: scale(.965); }
.animate-blur      { transform: translate3d(0, 10px, 0); filter: blur(5px); }
.animate-soft-scale { transform: translate3d(0, 12px, 0) scale(.985); }
.animate-float     { transform: translate3d(0, 22px, 0); }

.animate-left.is-visible,
.animate-right.is-visible,
.animate-up.is-visible,
.animate-down.is-visible,
.animate-fade.is-visible,
.animate-zoom.is-visible,
.animate-blur.is-visible.is-visible.is-visible,
.animate-soft-scale.is-visible,
.animate-float.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }

.hover-zoom { overflow: hidden; }
.hover-zoom img {
	display: block;
	width: 100%;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}
.hover-zoom:hover img,
.hover-zoom:focus-within img {
	transform: scale(1.045);
	filter: brightness(.86) saturate(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.animate-left,
	.animate-right,
	.animate-up,
	.animate-down,
	.animate-fade,
	.animate-zoom,
	.animate-blur,
	.animate-soft-scale,
	.animate-float {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
	.hover-zoom img { transition: none; }
}