/* Disable animations in Elementor editor */
.elementor-editor-active .fade-in,
.elementor-editor-active .fade-in-left,
.elementor-editor-active .fade-in-right,
.elementor-editor-active .fade-in-scale,
.elementor-editor-active .reveal-left-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
}

/* Base styles for fade-in elements */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Active state when in viewport */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Variation: Fade from left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* Variation: Fade from right */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
/* Variation: Scale up */
.fade-in-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Image reveal left to right animation with clip-path */
.reveal-left-right {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.reveal-left-right.is-visible {
    opacity: 1;
}

.reveal-left-right.reveal-start {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    transform: scale(1.1);
    transition: clip-path 1s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1s ease-out;
}

.reveal-left-right.reveal-start.reveal-animate {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: scale(1);
}

.reveal-left-right.reveal-complete {
    clip-path: none !important;
}

/* Custom delay classes for more control */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }
.delay-900 { transition-delay: 900ms; }
.delay-1000 { transition-delay: 1000ms; }

/* Duration override classes */
.duration-200 { transition-duration: 0.2s !important; }
.duration-300 { transition-duration: 0.3s !important; }
.duration-400 { transition-duration: 0.4s !important; }
.duration-500 { transition-duration: 0.5s !important; }
.duration-600 { transition-duration: 0.6s !important; }
.duration-700 { transition-duration: 0.7s !important; }
.duration-800 { transition-duration: 0.8s !important; }
.duration-1000 { transition-duration: 1s !important; }
.duration-1200 { transition-duration: 1.2s !important; }
.duration-1500 { transition-duration: 1.5s !important; }