/* ==================== HOME PAGE COMPONENT ==================== */
/*
    Estilos específicos da página Home (página inicial).
    Complementa classes Tailwind com animações e comportamentos customizados.
    
    Organização:
    - Animations (fade-in-up keyframes)
    - Responsive adjustments (se necessário)
    
    Nota: Maioria dos estilos usa Tailwind diretamente no HTML.
    Este arquivo contém apenas o que não pode ser feito com Tailwind utilities.
*/

/* ==================== ANIMATIONS ==================== */
/*
    Animação Fade In + Slide Up
    
    Aplicada a elementos .animate-fade-in-up
    - Usado em: Hero text e Hero visual card
    - Duração: 0.8s
    - Easing: ease-out (aceleração no início, desaceleração no fim)
    - Forwards: Mantém estado final após animação
    
    Efeito visual:
    - Elemento começa invisível (opacity: 0) e abaixo da posição final (translateY: 30px)
    - Anima para visível (opacity: 1) e posição original (translateY: 0)
    - Cria sensação de "entrada suave" ao carregar a página
*/
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/*
    Keyframes da animação fadeInUp
    
    from (estado inicial):
    - opacity: 0 → Invisível
    - transform: translateY(30px) → 30px abaixo da posição final
    
    to (estado final):
    - opacity: 1 → Totalmente visível
    - transform: translateY(0) → Posição original
    
    Impacto: Animação de entrada elegante, não intrusiva
*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}