/* =========================================
   CONTROLE EXCLUSIVO DO MOUSE AXIMOZ
   ========================================= */

/* 1. Esconde o mouse real apenas se a classe estiver ativa no body */
body.mouse-aximoz-ativo, 
body.mouse-aximoz-ativo a, 
body.mouse-aximoz-ativo button,
body.mouse-aximoz-ativo input,
body.mouse-aximoz-ativo select,
body.mouse-aximoz-ativo .magnetic-btn {
    cursor: none !important;
}

/* 2. Configurações Base */
#cursor-dot, #cursor-outline {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform;
}

/* Bolinha interna */
#cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    z-index: 2147483647 !important; /* O valor MÁXIMO possível no CSS */
}

/* Círculo externo */
#cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent);
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    z-index: 2147483646 !important; /* Logo abaixo do dot, mas acima do resto */
}

/* 3. Só mostra as bolinhas se a classe estiver no body */
body.mouse-aximoz-ativo #cursor-dot,
body.mouse-aximoz-ativo #cursor-outline {
    opacity: 1;
}

/* 4. Garante que as bolinhas sumam totalmente no modo "Padrão" */
body:not(.mouse-aximoz-ativo) #cursor-dot,
body:not(.mouse-aximoz-ativo) #cursor-outline {
    display: none !important;
}

/* 5. Efeito de expansão para o JavaScript */
.cursor-expand {
    width: 65px !important;
    height: 65px !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #ffffff !important;
}