/* ==========================================================================
   MICRO-ANIMATIONS & TRANSITIONS (BIOSCHEMATICS)
   ========================================================================== */

/* Fade In Animation for Lists & Modals */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseNeon {
    0% {
        box-shadow: 0 0 5px rgba(14, 165, 233, 0.2), 0 0 10px rgba(14, 165, 233, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(14, 165, 233, 0.4), 0 0 25px rgba(14, 165, 233, 0.2);
    }
    100% {
        box-shadow: 0 0 5px rgba(14, 165, 233, 0.2), 0 0 10px rgba(14, 165, 233, 0.1);
    }
}

@keyframes pulseOrange {
    0% {
        box-shadow: 0 0 5px rgba(255, 71, 71, 0.2), 0 0 10px rgba(255, 71, 71, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 71, 71, 0.5), 0 0 25px rgba(255, 71, 71, 0.3);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 71, 71, 0.2), 0 0 10px rgba(255, 71, 71, 0.1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Helper Utility Classes for Animations */
.animate-fade-in {
    animation: fadeIn var(--transition-normal) forwards;
}

.animate-fade-in-scale {
    animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-pulse-neon {
    animation: pulseNeon 2s infinite ease-in-out;
}

.animate-pulse-orange {
    animation: pulseOrange 2.5s infinite ease-in-out;
}

.animate-float {
    animation: float 4s infinite ease-in-out;
}

/* Page Loader / Shimmer Effect */
.shimmer-bg {
    background: linear-gradient(90deg, 
        rgba(30, 41, 59, 0.1) 25%, 
        rgba(51, 65, 85, 0.25) 37%, 
        rgba(30, 41, 59, 0.1) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}