/* animations.css
===== KEYFRAME ANIMATIONS ===== */
@keyframes particle-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
}

@keyframes logo-glow {
    from { box-shadow: 0 0 20px rgba(102, 221, 102, 0.4); }
    to { box-shadow: 0 0 30px rgba(102, 221, 102, 0.7); }
}

@keyframes title-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(102, 221, 102, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(102, 221, 102, 0.8)); }
}

@keyframes gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* ===== ANIMATION CLASSES ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 0.8s ease forwards;
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 0.8s ease forwards;
}