/* ==========================================================================
   Micro-animations & CSS Transitions
   ========================================================================== */

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

.fadeIn {
    animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pulsing highlight for incoming logs */
@keyframes newLogPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
        border-color: var(--primary);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
        border-color: var(--bg-glass-border);
    }
}

.new-item-pulse {
    animation: newLogPulse 1.5s cubic-bezier(0.24, 0, 0.2, 1) 1;
}

/* Smooth numerical counters */
@keyframes floatUp {
    from {
        transform: translateY(4px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Skeleton Loading Screens */
@keyframes skeletonShimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 400px 100%;
    animation: skeletonShimmer 1.4s infinite ease-in-out;
}