/* Configuração de Aceleração por Hardware (Atualizada para não borrar com o zoom) */
.layout-hardware {
    will-change: transform;
    transform-origin: 0 0 !important; 
}

/* O fundo do grid agora é esticado nativamente pelo scale() do JS, mantendo a nitidez */
#node-space {
    background-image: 
        linear-gradient(to right, rgba(51, 65, 85, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(51, 65, 85, 0.15) 1px, transparent 1px);
    background-position: 0 0;
    background-size: 60px 60px; /* Tamanho fixo base: a GPU cuida do zoom nativo agora */
    transform-origin: 0 0;
}

/* Cursor de controle da mesa viva */
.cursor-arrastando {
    cursor: grabbing !important;
}

/* Impede que selecione com a ferramenta de texto */
.no-virtual {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e 11 */
    user-select: none;         /* Padrão moderno */
}

/* Força todo o conteúdo interno a ignorar cliques */
.no-virtual * {
    pointer-events: none !important;
}

/* O container principal é o único que captura o clique */
.no-virtual {
    pointer-events: auto !important;
}

/* CONEXÕES NEON (FIOS VIRTUAIS) */
.fio-conexao {
    position: absolute;
    height: 8px; /* Espessura do fio */
    transform-origin: left center; /* Gira a partir do ponto inicial exato */
    z-index: -20; /* Fica atrás de todos os gifs e nós */
    pointer-events: none; /* Impossível de ser clicado */
    border-radius: 4px;
    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

/* O estado inativo (Opaco, aguardando desbloqueio) */
.fio-inativo {
    opacity: 0.25;
    box-shadow: none;
}

/* O estado ativo (Brilhante e Neon) */
.fio-ativo {
    opacity: 0.9;
}

/* Tipos de Fios e suas Cores Neon */
.fio-dependencia.fio-ativo { background: #3b82f6; box-shadow: 0 0 15px #3b82f6, 0 0 30px #3b82f6; }
.fio-exclusividade.fio-ativo { background: #eab308; box-shadow: 0 0 15px #eab308, 0 0 30px #eab308; }
.fio-conflito.fio-ativo { background: #ef4444; box-shadow: 0 0 15px #ef4444, 0 0 30px #ef4444; }
.fio-atracao.fio-ativo { background: #ffffff; box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff; }

/* Cores opacas para fios inativos */
.fio-dependencia.fio-inativo { background: #1e3a8a; }
.fio-exclusividade.fio-inativo { background: #713f12; }
.fio-conflito.fio-inativo { background: #7f1d1d; }
.fio-atracao.fio-inativo { background: #6c82a1; }

/* Animação de Spawn (Nascimento do Nó) */
@keyframes spawnNode {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

.animar-spawn {
    animation: spawnNode 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center center !important;
}