/**
 * Widget Animations CSS
 * Global fade-in/fade-out animations for all Elementor widgets
 */

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Apply fade-in animation to elements */
.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

.fade-in-delay-1 {
    animation: fadeIn 0.8s ease 0.2s forwards;
    opacity: 0;
}

.fade-in-delay-2 {
    animation: fadeIn 0.8s ease 0.4s forwards;
    opacity: 0;
}

.fade-in-delay-3 {
    animation: fadeIn 0.8s ease 0.6s forwards;
    opacity: 0;
}

/* Apply fade-out animation on hover for interactive elements */
.fade-out-hover:hover {
    animation: fadeOut 0.5s ease forwards;
}

/* Smooth transition for fade effects */
.fade-transition {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-transition:hover {
    opacity: 0.8;
    transform: translateY(-5px);
}

/* Ensure animations work on page load */
.fade-in,
.fade-in-delay-1,
.fade-in-delay-2,
.fade-in-delay-3 {
    animation-fill-mode: forwards;
}

/* Prevent animation from running multiple times */
.fade-in:not(.animated),
.fade-in-delay-1:not(.animated),
.fade-in-delay-2:not(.animated),
.fade-in-delay-3:not(.animated) {
    animation-play-state: running;
}

.fade-in.animated,
.fade-in-delay-1.animated,
.fade-in-delay-2.animated,
.fade-in-delay-3.animated {
    animation-play-state: paused;
    opacity: 1;
    transform: translateY(0);
}