/* Subtle, Dashboard-Grade Animations & Micro-Interactions */

/* 1. Page & Container entry animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.animate-fade-in {
  animation: fadeIn 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  animation: slideUpFade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays for child items */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* 2. Micro-Interactions for Hovers */
.scale-hover-trigger {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.scale-hover-trigger:hover {
  transform: scale(1.015);
}
.scale-hover-trigger:active {
  transform: scale(0.985);
}

/* 3. Subtle Pulsing for status lights or indicators */
@keyframes pulseSubtle {
  0% {
    transform: scale(0.95);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
}

.pulse-subtle {
  animation: pulseSubtle 2s infinite ease-in-out;
}

/* 4. Loader Refinement */
@keyframes spinSubtle {
  to {
    transform: rotate(360deg);
  }
}

.spinner-subtle {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(var(--primary-hsl), 0.1);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: spinSubtle 800ms linear infinite;
}