/* Shared keyframes + transition utility classes */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) translateX(50%); }
  to { opacity: 1; transform: translateY(0) translateX(50%); }
}

.anim-fade-in { animation: fade-in var(--duration-normal) var(--ease-out); }
.anim-slide-up { animation: slide-up var(--duration-slow) var(--ease-out); }

.modal-overlay { animation: fade-in var(--duration-fast) var(--ease-out); }
.modal { animation: slide-up var(--duration-normal) var(--ease-out); }
.toast { animation: toast-in var(--duration-normal) var(--ease-out); }

/* ---- Live-feeling micro animations (homepage) ---- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes trend-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

.btn--primary {
  animation: breathe 3.2s ease-in-out infinite;
}
.btn--primary:hover {
  animation-play-state: paused;
}

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