@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes ring-draw {
  from { stroke-dashoffset: var(--ring-circumference); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes qr-scan-line {
  0% { top: 6%; }
  50% { top: 92%; }
  100% { top: 6%; }
}

.animate-in { animation: fade-in-up var(--transition-slow) both; }
.animate-fade { animation: fade-in var(--transition-base) both; }
.toast { animation: toast-in var(--transition-base) both; }
.modal-overlay.open .modal { animation: scale-in var(--transition-base) both; }
.pulse { animation: pulse-dot 1.6s ease-in-out infinite; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite; display: inline-block;
}
.spinner.dark { border-color: var(--color-border); border-top-color: var(--color-primary-500); }

.page-content > * { animation: fade-in-up var(--transition-slow) both; }
.page-content > *:nth-child(2) { animation-delay: 40ms; }
.page-content > *:nth-child(3) { animation-delay: 80ms; }
.page-content > *:nth-child(4) { animation-delay: 120ms; }

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