/* ============================================
   METRICS PULSE ANIMATION
   ============================================ */

/* Pulse + Glow animation for metric values when they update */
@keyframes metricPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes metricGlow {
    0% {
        box-shadow: 0 0 0 rgba(76, 175, 80, 0);
        text-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
        text-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
    }
    100% {
        box-shadow: 0 0 0 rgba(76, 175, 80, 0);
        text-shadow: 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Class to trigger the animation */
.metric-updating {
    animation: metricPulse 300ms ease-out, metricGlow 300ms ease-out;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Ensure the animation can be triggered multiple times */
.comm-stat-value {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Optional: Add a subtle color shift during update */
.metric-updating.positive-change {
    color: #4caf50 !important;
}

.metric-updating.negative-change {
    color: #f44336 !important;
}

/* Smooth return to original color */
.comm-stat-value {
    transition: color 0.5s ease;
}