/* UrbanFix Shared Animations — animations.css */

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

/* Fade + lift (general purpose enter) */
@keyframes uf-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle pop (for badges, success states) */
@keyframes uf-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

/* Horizontal slide in from right */
@keyframes uf-slideRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Horizontal slide in from left */
@keyframes uf-slideLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Pulse ring — for unread badges */
@keyframes uf-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,90,42,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(200,90,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,90,42,0); }
}

/* Shimmer skeleton */
@keyframes uf-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Typing dots */
@keyframes uf-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%            { transform: translateY(-6px); opacity: 1; }
}

/* Checkmark draw */
@keyframes uf-check-draw {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

/* Gentle float — for empty-state illustrations */
@keyframes uf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Utility classes ── */

.uf-animate-in {
  animation: uf-fadeUp 0.32s cubic-bezier(0.22,1,0.36,1) both;
}

.uf-animate-in-delay-1 { animation-delay: 0.06s; }
.uf-animate-in-delay-2 { animation-delay: 0.12s; }
.uf-animate-in-delay-3 { animation-delay: 0.18s; }
.uf-animate-in-delay-4 { animation-delay: 0.24s; }
.uf-animate-in-delay-5 { animation-delay: 0.30s; }

.uf-pop { animation: uf-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Skeleton loader */
.uf-skeleton {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e4dd 50%, #f0ede8 75%);
  background-size: 400px 100%;
  animation: uf-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* Typing indicator */
.uf-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: #f0ede8;
  border-radius: 18px 18px 18px 4px;
  width: fit-content;
}
.uf-typing span {
  width: 7px; height: 7px;
  background: #8C867D;
  border-radius: 50%;
  display: inline-block;
}
.uf-typing span:nth-child(1) { animation: uf-dot-bounce 1.2s infinite 0.0s; }
.uf-typing span:nth-child(2) { animation: uf-dot-bounce 1.2s infinite 0.2s; }
.uf-typing span:nth-child(3) { animation: uf-dot-bounce 1.2s infinite 0.4s; }