/* Configuração para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #0E7E7E #bdecb6;
    /* Thumb | Track */
}

/* Configuração para Chrome, Edge e Safari */
*::-webkit-scrollbar {
    width: 6px;
    /* Aumentei para 6px para facilitar o clique, mas pode manter 3px se preferir */
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: #bdecb6;
    /* Cor do fundo da barra */
}

*::-webkit-scrollbar-thumb {
    background-color: #0E7E7E;
    /* Cor padrão do scroll */
    border-radius: 20px;
    transition: background 0.3s ease;
}

/* ESTADO: AO PASSAR O MOUSE (Hover) */
*::-webkit-scrollbar-thumb:hover {
    background-color: #0E7E7E;
    /* Cor NevozAzulAlt ao passar o mouse */
}

/* ESTADO: AO CLICAR E ARRASTAR (Active) */
*::-webkit-scrollbar-thumb:active {
    background-color: #0c0d4e;
    /* Cor AzuleDark (NevozAzulDark) quando segurar */
    cursor: grabbing;
}


/* css/animacoes.css */

/* Configuração inicial para todos os elementos que possuem data-anime */
[data-anime] {
    opacity: 0;
    transition: 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Direções das animações */
[data-anime="down"] {
    transform: translate3d(0, -50px, 0);
    -webkit-transform: translate3d(0, -50px, 0);
}

[data-anime="up"] {
    transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0);
}

[data-anime="left"] {
    transform: translate3d(-50px, 0, 0);
    -webkit-transform: translate3d(-50px, 0, 0);
}

[data-anime="right"] {
    transform: translate3d(50px, 0, 0);
    -webkit-transform: translate3d(50px, 0, 0);
}

/* Estado Final: Quando o JS adicionar a classe .animate */
[data-anime].animate {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
}