@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @keyframes mesh {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .animate-mesh {
    background-size: 200% 200%;
    animation: mesh 30s ease-in-out infinite;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
  }

  @keyframes slide-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-slide-up {
    animation: slide-up 1.2s ease-out forwards;
  }

  @keyframes zoom-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-zoom-in {
    animation: zoom-in 1.2s ease-out forwards;
  }
}