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

  @keyframes slide-up-fade-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
  }

  .animate-fade-in { animation: fade-in var(--duration) var(--ease-out-expo); }
  .animate-slide-up-fade-in { animation: slide-up-fade-in var(--duration) var(--ease-out-expo); }
  .animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
}