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

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 123, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
    composes: animation-forwards;
}

.slide-in {
    animation: slideIn 0.7s ease-in-out;
    composes: animation-forwards;
}

.animation-forwards {
    animation-fill-mode: forwards;
}

.feature-card {
    animation: glowPulse 3s linear 5;
}

/* 
[data-aos] is used for elements that should animate on scroll. 
The 'aos-animate' class is added dynamically to trigger the animation.
*/
[data-aos] {
    opacity: 0;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

[data-aos].aos-animate {
    opacity: 1;
}