/* Keyframe Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes slideIn {
  from { 
    opacity: 0; 
    transform: translateX(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes glow {
  0%, 100% { box-shadow: var(--glow-primary); }
  50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.5); }
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.glow-effect {
  animation: glow 2s ease-in-out infinite;
}

/* Transition Utilities */
.transition-all {
  transition: all 0.2s ease;
}

.transition-fast {
  transition: all 0.1s ease;
}

.transition-slow {
  transition: all 0.4s ease;
}

/* Hover Effects */
.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-glow:hover {
  box-shadow: var(--glow-primary);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(0, 212, 255, 0.2), 
    transparent
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

/* Status Indicators */
.status-online {
  background: var(--accent-success);
  animation: pulse 2s infinite;
}

.status-offline {
  background: var(--accent-danger);
}

.status-loading {
  background: var(--accent-warning);
  animation: pulse 1s infinite;
}

/* Interactive Elements */
.interactive {
  cursor: pointer;
  user-select: none;
}

.interactive:active {
  transform: scale(0.98);
}

/* Chart Animations */
.chart-enter {
  animation: fadeIn 0.6s ease-out;
}

.chart-update {
  transition: all 0.3s ease;
}

/* Data Animations */
.data-change {
  animation: glow 0.5s ease-out;
}

.price-up {
  color: var(--accent-success);
  animation: glow 0.5s ease-out;
}

.price-down {
  color: var(--accent-danger);
  animation: glow 0.5s ease-out;
}