/* Global animation styles for home page */

/* Keyframe animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        transform: rotate(-10deg) scale(0.9);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation classes - ensure initial state is hidden */
[data-animate] {
    opacity: 0;
}

[data-animate="slide-left"] {
    transform: translateX(-100px);
}

[data-animate="slide-right"] {
    transform: translateX(100px);
}

[data-animate="scale"] {
    transform: scale(0.8);
}

[data-animate="rotate"] {
    transform: rotate(-10deg) scale(0.9);
}

/* Animated state - applied by JavaScript */
[data-animate].animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure smooth transitions */
[data-animate] {
    transition: all 0.8s ease-out;
}

/* Override any conflicting styles */
#value-props [data-animate],
#faq-section [data-animate],
#cta-section [data-animate] {
    opacity: 0 !important;
}

#value-props [data-animate].animated,
#faq-section [data-animate].animated,
#cta-section [data-animate].animated {
    opacity: 1 !important;
}

/* Fix for GSAP conflicts */
.vp-subheads > div {
    opacity: 1 !important;
    transform: none !important;
}