@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes grow-in {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 120% 50%;
  }
}

.animate-fade {
  animation: fade-in 0.7s ease-out both;
}

.animate-grow {
  animation: grow-in 0.65s ease-out both;
}

.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer 2.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade,
  .animate-grow,
  .animate-shimmer {
    animation: none !important;
  }
}