/* ==========================================
   Configurações Globais
   ========================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   Animações Keyframes
   ========================================== */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes highlightSection {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   Classes de Animação
   ========================================== */
.animate-float {
    animation: float 6s ease-in-out infinite;
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(6, 78, 59, 0.4);
}

.highlight {
    animation: highlightSection 0.5s ease-in-out;
}

.animate-fade-in-up {
    animation: fade-in-up 1s ease-out;
}

.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

/* ==========================================
   Media Queries - Responsividade
   ========================================== */
@media (max-width: 320px) {
    #hero .relative.flex.justify-center.md\:block {
        display: none;
    }
}

@media (max-width: 375px) {
    #hero .relative.flex.justify-center.md\:block {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #hero .relative.flex.justify-center.md\:block img {
        width: 300px !important;
        height: 300px !important;
        aspect-ratio: 1 / 1;
    }
}

.nav-link + .nav-link {
    margin-left: 1.25rem;
}

@media (max-width: 1023px) {
    .nav-link + .nav-link {
        margin-left: 0;
    }
}

:root {
    --color-primary: #10b981;
    --color-secondary: #064e3b;
    --color-accent: #34d399;
    --gradient-primary: linear-gradient(90deg, #10b981, #14b8a6);
}

.badge {
    background-color: var(--color-primary);
}

*:focus {
    outline-color: var(--color-primary);
}