/* Shared keyframe animations & utility motion classes */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.4;
  }
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton {
  background: var(--c-bg-elev-2);
  border-radius: var(--r-sm);
  animation: pulse 1.4s ease-in-out infinite;
}

.fade-in {
  animation: fade-in var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}