/* =========================
   KEYFRAMES
========================= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes pawWalk {
  0%, 100% { transform: translateY(0)   scale(1); opacity: 0.4; }
  50%      { transform: translateY(-8px) scale(1.2); opacity: 1; }
}

/* =========================
   UTILITIES
========================= */
.animate-fade-in     { animation: fadeIn 600ms ease both; }
.animate-fade-fast   { animation: fadeInFast 300ms ease both; }
.animate-slide-left  { animation: slideInLeft 500ms ease both; }
.animate-slide-right { animation: slideInRight 500ms ease both; }
.animate-slide-up    { animation: slideInUp 500ms ease both; }
.animate-scale-in    { animation: scaleIn 400ms ease both; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }

.page-enter { animation: fadeIn 600ms ease both; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface) 50%, var(--color-border) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-sm);
}

/* Paw loader */
.paw-loader {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.paw-loader span {
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pawWalk 0.9s ease-in-out infinite;
}
.paw-loader span:nth-child(2) { animation-delay: 150ms; }
.paw-loader span:nth-child(3) { animation-delay: 300ms; }
.paw-loader span:nth-child(4) { animation-delay: 450ms; }

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