/* ===================================================
   Animations
   =================================================== */

/* Counter animation */
@keyframes countUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

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

/* Shimmer loading */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    min-height: 20px;
}

/* Glow effects */
.glow-blue {
    box-shadow: 0 0 20px rgba(79, 139, 255, 0.4);
}

.glow-green {
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.4);
}

.glow-red {
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.4);
}

/* Entrance animations */
.fade-in {
    animation: fadeIn 0.4s ease;
}

.slide-up {
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

/* Stagger children */
.stagger-children>*:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.10s;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.20s;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.25s;
}

.stagger-children>*:nth-child(6) {
    animation-delay: 0.30s;
}

/* Number update flash */
@keyframes flash-green {
    0% {
        color: var(--text-primary);
    }

    50% {
        color: var(--accent-green);
        text-shadow: 0 0 10px var(--accent-green);
    }

    100% {
        color: var(--text-primary);
    }
}

@keyframes flash-red {
    0% {
        color: var(--text-primary);
    }

    50% {
        color: var(--accent-red);
        text-shadow: 0 0 10px var(--accent-red);
    }

    100% {
        color: var(--text-primary);
    }
}

.flash-green {
    animation: flash-green 0.8s ease;
}

.flash-red {
    animation: flash-red 0.8s ease;
}

/* Rotating sync icon */
@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    animation: rotate360 1s linear infinite;
}

/* Alert shake */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.shake {
    animation: shake 0.5s ease;
}