/* Gutenberg Animations CSS */

/* ============================================
   FADE ANIMATIONS
   ============================================ */

/* Fade-In from bottom (default) */
body:not(.block-editor-page) .scroll-fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-fade-in.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

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

body:not(.block-editor-page) .scroll-fade-in-left.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

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

body:not(.block-editor-page) .scroll-fade-in-right.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Fade-In from top */
body:not(.block-editor-page) .scroll-fade-in-top {
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-fade-in-top.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   ZOOM ANIMATIONS
   ============================================ */

/* Zoom-In from bottom (default) */
body:not(.block-editor-page) .scroll-zoom-in {
	opacity: 0;
	transform: scale(0.8) translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-zoom-in.fade-in-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* Zoom-In from left */
body:not(.block-editor-page) .scroll-zoom-in-left {
	opacity: 0;
	transform: scale(0.8) translateX(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-zoom-in-left.fade-in-visible {
	opacity: 1;
	transform: scale(1) translateX(0);
}

/* Zoom-In from right */
body:not(.block-editor-page) .scroll-zoom-in-right {
	opacity: 0;
	transform: scale(0.8) translateX(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-zoom-in-right.fade-in-visible {
	opacity: 1;
	transform: scale(1) translateX(0);
}

/* Zoom-In from top */
body:not(.block-editor-page) .scroll-zoom-in-top {
	opacity: 0;
	transform: scale(0.8) translateY(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-zoom-in-top.fade-in-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* ============================================
   ROTATE ANIMATIONS
   ============================================ */

/* Rotate-In from bottom (default) */
body:not(.block-editor-page) .scroll-rotate-in {
	opacity: 0;
	transform: rotate(-10deg) scale(0.9) translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-rotate-in.fade-in-visible {
	opacity: 1;
	transform: rotate(0deg) scale(1) translateY(0);
}

/* Rotate-In from left */
body:not(.block-editor-page) .scroll-rotate-in-left {
	opacity: 0;
	transform: rotate(-10deg) scale(0.9) translateX(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-rotate-in-left.fade-in-visible {
	opacity: 1;
	transform: rotate(0deg) scale(1) translateX(0);
}

/* Rotate-In from right */
body:not(.block-editor-page) .scroll-rotate-in-right {
	opacity: 0;
	transform: rotate(10deg) scale(0.9) translateX(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-rotate-in-right.fade-in-visible {
	opacity: 1;
	transform: rotate(0deg) scale(1) translateX(0);
}

/* Rotate-In from top */
body:not(.block-editor-page) .scroll-rotate-in-top {
	opacity: 0;
	transform: rotate(-10deg) scale(0.9) translateY(-30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-rotate-in-top.fade-in-visible {
	opacity: 1;
	transform: rotate(0deg) scale(1) translateY(0);
}

/* ============================================
   BOUNCE ANIMATIONS
   ============================================ */

/* Bounce-In from bottom (default) */
body:not(.block-editor-page) .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);
}

body:not(.block-editor-page) .scroll-bounce-in.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Bounce-In from left */
body:not(.block-editor-page) .scroll-bounce-in-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body:not(.block-editor-page) .scroll-bounce-in-left.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Bounce-In from right */
body:not(.block-editor-page) .scroll-bounce-in-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body:not(.block-editor-page) .scroll-bounce-in-right.fade-in-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Bounce-In from top */
body:not(.block-editor-page) .scroll-bounce-in-top {
	opacity: 0;
	transform: translateY(-50px);
	transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

body:not(.block-editor-page) .scroll-bounce-in-top.fade-in-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   FLIP ANIMATIONS
   ============================================ */

/* Flip-In from bottom (default - rotateX) */
body:not(.block-editor-page) .scroll-flip-in {
	opacity: 0;
	transform: perspective(400px) rotateX(90deg);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-flip-in.fade-in-visible {
	opacity: 1;
	transform: perspective(400px) rotateX(0deg);
}

/* Flip-In from left (rotateY) */
body:not(.block-editor-page) .scroll-flip-in-left {
	opacity: 0;
	transform: perspective(400px) rotateY(-90deg);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-flip-in-left.fade-in-visible {
	opacity: 1;
	transform: perspective(400px) rotateY(0deg);
}

/* Flip-In from right (rotateY) */
body:not(.block-editor-page) .scroll-flip-in-right {
	opacity: 0;
	transform: perspective(400px) rotateY(90deg);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-flip-in-right.fade-in-visible {
	opacity: 1;
	transform: perspective(400px) rotateY(0deg);
}

/* Flip-In from top (rotateX) */
body:not(.block-editor-page) .scroll-flip-in-top {
	opacity: 0;
	transform: perspective(400px) rotateX(-90deg);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body:not(.block-editor-page) .scroll-flip-in-top.fade-in-visible {
	opacity: 1;
	transform: perspective(400px) rotateX(0deg);
}

/* ============================================
   SLOW MODIFIER
   Macht alle Animationen langsamer (1.5x)
   ============================================ */

body:not(.block-editor-page) [class*="scroll-"].animation-slow {
	transition-duration: 1.2s !important;
}

body:not(.block-editor-page) .scroll-bounce-in.animation-slow,
body:not(.block-editor-page) .scroll-bounce-in-left.animation-slow,
body:not(.block-editor-page) .scroll-bounce-in-right.animation-slow,
body:not(.block-editor-page) .scroll-bounce-in-top.animation-slow {
	transition-duration: 0.9s !important;
}

/* 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 */
[class*="scroll-fade-"],
[class*="scroll-zoom-"],
[class*="scroll-rotate-"],
[class*="scroll-bounce-"],
[class*="scroll-flip-"] {
	will-change: opacity, transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	[class*="scroll-fade-"],
	[class*="scroll-zoom-"],
	[class*="scroll-rotate-"],
	[class*="scroll-bounce-"],
	[class*="scroll-flip-"] {
		transition: opacity 0.3s ease-out;
		transition-delay: 0s !important;
		transform: none !important;
	}

	[class*="scroll-fade-"].fade-in-visible,
	[class*="scroll-zoom-"].fade-in-visible,
	[class*="scroll-rotate-"].fade-in-visible,
	[class*="scroll-bounce-"].fade-in-visible,
	[class*="scroll-flip-"].fade-in-visible {
		opacity: 1;
		transform: none !important;
	}
}

/* Editor Styles - Make animations visible and triggerable in Gutenberg */
/* Override frontend styles completely to keep elements visible */
/* Only apply when NOT animating (no .serend-preview-animate class) */
.block-editor [class*="scroll-"]:not(.serend-preview-animate),
.block-editor-block-list__layout [class*="scroll-"]:not(.serend-preview-animate) {
	/* Keep elements visible in editor - override frontend opacity: 0 */
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	transition: none !important;
}


/* Animation classes for editor preview */
/* These animations are triggered when the user clicks "Show Animation" */

/* Fade animations */
.block-editor .scroll-fade-in.serend-preview-animate,
.block-editor-block-list__layout .scroll-fade-in.serend-preview-animate {
	animation: fadeInUp 0.8s ease-out forwards;
}
.block-editor .scroll-fade-in-left.serend-preview-animate,
.block-editor-block-list__layout .scroll-fade-in-left.serend-preview-animate {
	animation: fadeInLeft 0.8s ease-out forwards;
}
.block-editor .scroll-fade-in-right.serend-preview-animate,
.block-editor-block-list__layout .scroll-fade-in-right.serend-preview-animate {
	animation: fadeInRight 0.8s ease-out forwards;
}
.block-editor .scroll-fade-in-top.serend-preview-animate,
.block-editor-block-list__layout .scroll-fade-in-top.serend-preview-animate {
	animation: fadeInTop 0.8s ease-out forwards;
}

/* Zoom animations */
.block-editor .scroll-zoom-in.serend-preview-animate,
.block-editor-block-list__layout .scroll-zoom-in.serend-preview-animate {
	animation: zoomInUp 0.8s ease-out forwards;
}
.block-editor .scroll-zoom-in-left.serend-preview-animate,
.block-editor-block-list__layout .scroll-zoom-in-left.serend-preview-animate {
	animation: zoomInLeft 0.8s ease-out forwards;
}
.block-editor .scroll-zoom-in-right.serend-preview-animate,
.block-editor-block-list__layout .scroll-zoom-in-right.serend-preview-animate {
	animation: zoomInRight 0.8s ease-out forwards;
}
.block-editor .scroll-zoom-in-top.serend-preview-animate,
.block-editor-block-list__layout .scroll-zoom-in-top.serend-preview-animate {
	animation: zoomInTop 0.8s ease-out forwards;
}

/* Rotate animations */
.block-editor .scroll-rotate-in.serend-preview-animate,
.block-editor-block-list__layout .scroll-rotate-in.serend-preview-animate {
	animation: rotateInUp 0.8s ease-out forwards;
}
.block-editor .scroll-rotate-in-left.serend-preview-animate,
.block-editor-block-list__layout .scroll-rotate-in-left.serend-preview-animate {
	animation: rotateInLeft 0.8s ease-out forwards;
}
.block-editor .scroll-rotate-in-right.serend-preview-animate,
.block-editor-block-list__layout .scroll-rotate-in-right.serend-preview-animate {
	animation: rotateInRight 0.8s ease-out forwards;
}
.block-editor .scroll-rotate-in-top.serend-preview-animate,
.block-editor-block-list__layout .scroll-rotate-in-top.serend-preview-animate {
	animation: rotateInTop 0.8s ease-out forwards;
}

/* Bounce animations */
.block-editor .scroll-bounce-in.serend-preview-animate,
.block-editor-block-list__layout .scroll-bounce-in.serend-preview-animate {
	animation: bounceInUp 0.8s ease-out forwards;
}
.block-editor .scroll-bounce-in-left.serend-preview-animate,
.block-editor-block-list__layout .scroll-bounce-in-left.serend-preview-animate {
	animation: bounceInLeft 0.8s ease-out forwards;
}
.block-editor .scroll-bounce-in-right.serend-preview-animate,
.block-editor-block-list__layout .scroll-bounce-in-right.serend-preview-animate {
	animation: bounceInRight 0.8s ease-out forwards;
}
.block-editor .scroll-bounce-in-top.serend-preview-animate,
.block-editor-block-list__layout .scroll-bounce-in-top.serend-preview-animate {
	animation: bounceInTop 0.8s ease-out forwards;
}

/* Flip animations */
.block-editor .scroll-flip-in.serend-preview-animate,
.block-editor-block-list__layout .scroll-flip-in.serend-preview-animate {
	animation: flipInUp 0.8s ease-out forwards;
}
.block-editor .scroll-flip-in-left.serend-preview-animate,
.block-editor-block-list__layout .scroll-flip-in-left.serend-preview-animate {
	animation: flipInLeft 0.8s ease-out forwards;
}
.block-editor .scroll-flip-in-right.serend-preview-animate,
.block-editor-block-list__layout .scroll-flip-in-right.serend-preview-animate {
	animation: flipInRight 0.8s ease-out forwards;
}
.block-editor .scroll-flip-in-top.serend-preview-animate,
.block-editor-block-list__layout .scroll-flip-in-top.serend-preview-animate {
	animation: flipInTop 0.8s ease-out forwards;
}

/* Slow modifier for editor animations */
.block-editor .animation-slow.serend-preview-animate,
.block-editor-block-list__layout .animation-slow.serend-preview-animate {
	animation-duration: 1.2s !important;
}

/* Animation keyframes for editor preview */

/* Fade keyframes */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
	from { opacity: 0; transform: translateX(30px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInTop {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Zoom keyframes */
@keyframes zoomInUp {
	from { opacity: 0; transform: scale(0.8) translateY(30px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes zoomInLeft {
	from { opacity: 0; transform: scale(0.8) translateX(-30px); }
	to { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes zoomInRight {
	from { opacity: 0; transform: scale(0.8) translateX(30px); }
	to { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes zoomInTop {
	from { opacity: 0; transform: scale(0.8) translateY(-30px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Rotate keyframes */
@keyframes rotateInUp {
	from { opacity: 0; transform: rotate(-10deg) scale(0.9) translateY(30px); }
	to { opacity: 1; transform: rotate(0deg) scale(1) translateY(0); }
}
@keyframes rotateInLeft {
	from { opacity: 0; transform: rotate(-10deg) scale(0.9) translateX(-30px); }
	to { opacity: 1; transform: rotate(0deg) scale(1) translateX(0); }
}
@keyframes rotateInRight {
	from { opacity: 0; transform: rotate(10deg) scale(0.9) translateX(30px); }
	to { opacity: 1; transform: rotate(0deg) scale(1) translateX(0); }
}
@keyframes rotateInTop {
	from { opacity: 0; transform: rotate(-10deg) scale(0.9) translateY(-30px); }
	to { opacity: 1; transform: rotate(0deg) scale(1) translateY(0); }
}

/* Bounce keyframes */
@keyframes bounceInUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceInLeft {
	from { opacity: 0; transform: translateX(-50px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInRight {
	from { opacity: 0; transform: translateX(50px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes bounceInTop {
	from { opacity: 0; transform: translateY(-50px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Flip keyframes */
@keyframes flipInUp {
	from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
	to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
@keyframes flipInLeft {
	from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
	to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
@keyframes flipInRight {
	from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
	to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}
@keyframes flipInTop {
	from { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
	to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}