/* Scroll-triggered fade animation for feature cards */
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translate3d(0px, 50px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
}

@keyframes fadeOutToBottom {
    from {
        opacity: 1;
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
    to {
        opacity: 0;
        transform: translate3d(0px, 50px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
}

/* Animation classes */
.feature-card-hidden {
    opacity: 0;
    transform: translate3d(0px, 50px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.feature-card-visible {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Staggered animation delays */
.feature-card-1 {
    transition-delay: 0s;
}

.feature-card-2 {
    transition-delay: 0.1s;
}

.feature-card-3 {
    transition-delay: 0.2s;
}

.feature-card-4 {
    transition-delay: 0.3s;
}