/* Gutenberg Animations CSS */

/* Scroll Fade-In Animation (Standard - von unten) */
.scroll-fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Fade-In from left */
.scroll-fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in-left.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Fade-In from right */
.scroll-fade-in-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in-right.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Slower animation (from bottom) */
.scroll-fade-in-slow {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.scroll-fade-in-slow.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Additional animations */

/* Zoom-In Effekt */
.scroll-zoom-in {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-zoom-in.fade-in-visible {
	opacity: 1;
	transform: scale(1);
}

/* Rotation Effekt */
.scroll-rotate-in {
	opacity: 0;
	transform: rotate(10deg) scale(0.9);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-rotate-in.fade-in-visible {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* Bounce Effekt */
.scroll-bounce-in {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.scroll-bounce-in.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Flip Effekt */
.scroll-flip-in {
	opacity: 0;
	transform: perspective(400px) rotateY(90deg);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-flip-in.fade-in-visible {
	opacity: 1;
	transform: perspective(400px) rotateY(0deg);
}

/* DYNAMIC DELAY CLASSES */
/* Generates all possible delays from 0ms to 2000ms in 100ms steps */
.animation-delay-0 { transition-delay: 0ms !important; }
.animation-delay-100 { transition-delay: 100ms !important; }
.animation-delay-200 { transition-delay: 200ms !important; }
.animation-delay-300 { transition-delay: 300ms !important; }
.animation-delay-400 { transition-delay: 400ms !important; }
.animation-delay-500 { transition-delay: 500ms !important; }
.animation-delay-600 { transition-delay: 600ms !important; }
.animation-delay-700 { transition-delay: 700ms !important; }
.animation-delay-800 { transition-delay: 800ms !important; }
.animation-delay-900 { transition-delay: 900ms !important; }
.animation-delay-1000 { transition-delay: 1000ms !important; }
.animation-delay-1100 { transition-delay: 1100ms !important; }
.animation-delay-1200 { transition-delay: 1200ms !important; }
.animation-delay-1300 { transition-delay: 1300ms !important; }
.animation-delay-1400 { transition-delay: 1400ms !important; }
.animation-delay-1500 { transition-delay: 1500ms !important; }
.animation-delay-1600 { transition-delay: 1600ms !important; }
.animation-delay-1700 { transition-delay: 1700ms !important; }
.animation-delay-1800 { transition-delay: 1800ms !important; }
.animation-delay-1900 { transition-delay: 1900ms !important; }
.animation-delay-2000 { transition-delay: 2000ms !important; }

/* Performance optimizations */
.scroll-fade-in,
.scroll-fade-in-left,
.scroll-fade-in-right,
.scroll-fade-in-slow,
.scroll-zoom-in,
.scroll-rotate-in,
.scroll-bounce-in,
.scroll-flip-in {
	will-change: opacity, transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.scroll-fade-in,
	.scroll-fade-in-left,
	.scroll-fade-in-right,
	.scroll-fade-in-slow,
	.scroll-zoom-in,
	.scroll-rotate-in,
	.scroll-bounce-in,
	.scroll-flip-in {
		transition: opacity 0.3s ease-out;
		transition-delay: 0s !important;
		transform: none !important;
	}

	.scroll-fade-in.fade-in-visible,
	.scroll-fade-in-left.fade-in-visible,
	.scroll-fade-in-right.fade-in-visible,
	.scroll-fade-in-slow.fade-in-visible,
	.scroll-zoom-in.fade-in-visible,
	.scroll-rotate-in.fade-in-visible,
	.scroll-bounce-in.fade-in-visible,
	.scroll-flip-in.fade-in-visible {
		opacity: 1;
		transform: none !important;
	}
}