/* Mascara da imagem do hero */
.masked-hero {
    background-image: var(--hero-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% );
    mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% );
}

.masked-hero-no-gradiant {
    background-image: var(--hero-bg-image, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Menu mobile */
@media (max-width: 767px) {
    #main-nav.mobile-open {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #000000;
        padding: 1.5rem;
        gap: 1rem;
        z-index: 40;
    }
}
/* Estilos para animações de scroll - BIDIRECIONAIS */
.scroll-fade {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .scroll-fade.visible {
        opacity: 1;
        transform: translateY(0);
    }

.scroll-slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .scroll-slide-left.visible {
        opacity: 1;
        transform: translateX(0);
    }

.scroll-slide-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .scroll-slide-right.visible {
        opacity: 1;
        transform: translateX(0);
    }

.scroll-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .scroll-scale.visible {
        opacity: 1;
        transform: scale(1);
    }

/* Animação de entrada da direita (CSS keyframe, sem observer) */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

.animate-slide-right {
    animation: slideInRight 0.8s ease-out both;
}

/* Atraso progressivo para elementos múltiplos */
.scroll-delay-1 {
    transition-delay: 0.1s;
}

.scroll-delay-2 {
    transition-delay: 0.2s;
}

.scroll-delay-3 {
    transition-delay: 0.3s;
}

.scroll-delay-4 {
    transition-delay: 0.4s;
}

/*  Link animations */
a.menu-link, a.green-menu-link {
    text-decoration: none !important;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 0 0 10px 0;
    position: relative;
}

    a.menu-link:after, a.green-menu-link:after {
        background: none repeat scroll 0 0 transparent !important;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #fff !important;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
    }

    a.menu-link:hover:after, a.green-menu-link:hover:after {
        width: 100%;
        left: 0;
    }

    a.green-menu-link:after {
        background: #91c94a !important;
    }