/* Metrics Animation Styles */

.metric-pulse {
  animation: metricPulse 0.6s ease-out !important;
}

@keyframes metricPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(34, 139, 34, 0.15);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgba(34, 139, 34, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(34, 139, 34, 0.15);
  }
}

@keyframes numberCounterPulse {
  0% {
    transform: scale(1);
    color: #228b22;
  }
  50% {
    transform: scale(1.15);
    color: #2eac2e;
  }
  100% {
    transform: scale(1);
    color: #228b22;
  }
}

.metric-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(34, 139, 34, 0.25) !important;
}

.metric-card:active {
  transform: translateY(-1px);
}

.metric-value {
  font-weight: 800;
  font-size: 2.5rem !important;
  color: #228b22;
  display: inline-block;
  min-width: 90px;
  text-align: center;
  font-family: 'Arial', monospace;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.metric-card[data-animate="true"] .metric-value {
  position: relative;
}

.metric-card[data-animate="true"]:hover .metric-value {
  animation: counterGlow 0.5s ease-out;
}

.metric-card.animating .metric-value {
  animation: numberCounterPulse 1.5s ease-out;
}

/* Smooth counter animation */
@keyframes counterGlow {
  0% {
    text-shadow: 0 0 0px rgba(34, 139, 34, 0);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 12px rgba(34, 139, 34, 0.8);
    transform: scale(1.1);
  }
  100% {
    text-shadow: 0 0 0px rgba(34, 139, 34, 0);
    transform: scale(1);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .metric-value {
    font-size: 2rem !important;
  }
}