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

@layer utilities {
  .animate-slide-down {
    animation: slide-down 0.3s ease-out forwards;
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }
}

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

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

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: 6rem;
}

body { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}