/* ==========================================================================
   Animation utilities — fade, slide, zoom, and effect keyframes
   ========================================================================== */

@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes slideUp{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft{ from{ opacity: 0; transform: translateX(-24px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes slideInRight{ from{ opacity: 0; transform: translateX(24px); } to{ opacity: 1; transform: translateX(0); } }
@keyframes zoomIn{ from{ opacity: 0; transform: scale(0.9); } to{ opacity: 1; transform: scale(1); } }
@keyframes pulseSoft{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
@keyframes shimmer{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }

.anim-fade{ animation: fadeIn 600ms ease both; }
.anim-slide-up{ animation: slideUp 650ms ease both; }
.anim-slide-left{ animation: slideInLeft 650ms ease both; }
.anim-slide-right{ animation: slideInRight 650ms ease both; }
.anim-zoom{ animation: zoomIn 550ms ease both; }
.anim-delay-1{ animation-delay: 120ms; }
.anim-delay-2{ animation-delay: 240ms; }
.anim-delay-3{ animation-delay: 360ms; }

/* Hover lift used across interactive cards */
.hover-lift{ transition: transform 220ms ease, box-shadow 220ms ease; }
.hover-lift:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Counter pulse when a stat finishes animating */
.stat-number.is-done{ animation: pulseSoft 500ms ease; }

/* Skeleton shimmer for lazy-loading placeholders */
.skeleton{
  background: linear-gradient(90deg, var(--color-border) 25%, #f0f4fa 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  .anim-fade, .anim-slide-up, .anim-slide-left, .anim-slide-right, .anim-zoom, .stat-number.is-done, .skeleton{
    animation: none !important;
  }
}