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

@layer utilities {
    /* Hero Section Animations */
    @keyframes fade-in {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slide-up {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fade-in {
        animation: fade-in 0.8s ease-out forwards;
    }
    
    .animate-fade-in-delay {
        animation: fade-in 1s ease-out 0.3s forwards;
        opacity: 0;
    }
    
    .animate-fade-in-delay-2 {
        animation: fade-in 1s ease-out 0.6s forwards;
        opacity: 0;
    }
    
    .animate-slide-up {
        animation: slide-up 1s ease-out forwards;
        opacity: 0;
    }
    
    .animate-slide-up-delay {
        animation: slide-up 1s ease-out 0.4s forwards;
        opacity: 0;
    }
    
    .delay-1000 {
        animation-delay: 1s;
    }
}