/* ===================================
   ANIMATIONS & KEYFRAMES
   =================================== */

/* Fade In Up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid Move (background grid animation) */
@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* Holographic Shift */
@keyframes holographicShift {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Card Fade In */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Card Rotate (conic gradient animation) */
@keyframes cardRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Title Glow */
@keyframes titleGlow {
    from {
        filter: drop-shadow(0 0 10px rgba(15, 157, 102, 0.3));
    }
    to {
        filter: drop-shadow(0 0 20px rgba(15, 157, 102, 0.5));
    }
}

/* Slide Down (navbar) */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse (status dot) */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Widget Fade In */
@keyframes widgetFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Fade In (popup) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Fade In */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===================================
   UTILITY ANIMATION CLASSES
   =================================== */

.fade-in-up {
    animation: fade-in-up 1s ease-out;
}

.card-fade-in {
    animation: cardFadeIn 0.8s ease-out;
}

.widget-fade-in {
    animation: widgetFadeIn 0.5s ease-out;
}

.title-glow {
    animation: titleGlow 2s ease-in-out infinite alternate;
}