/* * CONFIGURAÇÃO DO PONTEIRO FLUIDO * Aplicada apenas em dispositivos com mouse (não-touch). */ @media (hover: hover) and (pointer: fine) { body { /* Esconde o cursor padrão do sistema */ cursor: none; } /* Garante que links e botões também não mostrem o cursor padrão */ a, button, [role="button"] { cursor: none; } /* * 1. O PONTEIRO ÚNICO (O "SEGUIDOR") */ #pointer-follower { position: fixed; /* Começa fora da tela para evitar "flash" no carregamento */ top: 0; left: 0; /* Estado Padrão: Ponto sólido */ width: 10px; height: 10px; background-color: #9779db; /* Cor ciano sólida */ border: 2px solid transparent; /* Borda transparente para transição suave */ border-radius: 50%; /* Impede que o ponteiro interaja com cliques */ pointer-events: none; z-index: 10000; /* Centraliza o elemento no cursor (metade do width/height) */ margin-top: -5px; margin-left: -5px; /* * A MÁGICA DA FLUIDEZ: * - 'transform' tem um 'cubic-bezier' que dá uma sensação elástica. * - Outras propriedades (width, height, etc.) têm um 'ease-out' suave. * - Ajuste a duração (ex: 0.3s) para mais ou menos "delay". */ transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), width 0.4s cubic-bezier(0.23, 1, 0.32, 1), height 0.4s cubic-bezier(0.23, 1, 0.32, 1), margin-top 0.4s cubic-bezier(0.23, 1, 0.32, 1), margin-left 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.4s ease, border-color 0.4s ease; } /* * 2. O ESTADO DE INTERAÇÃO (HOVER) * Esta classe é aplicada ao via JavaScript */ body.pointer-interactive #pointer-follower { /* Expande */ width: 56px; height: 56px; /* Re-centraliza (metade do novo width/height) */ margin-top: -22.5px; margin-left: -22.5px; /* Transforma em anel (vazado) */ background-color: transparent; border-color: #9779db; /* Mostra a borda ciano */ } /* * 3. O ESTADO DE CLIQUE (FEEDBACK) * Esta classe é aplicada ao via JavaScript */ body.pointer-down #pointer-follower { /* Encolhe para dar feedback de clique */ /* Usamos 'scale' junto com o 'transform' do JS */ transform-origin: center center; /* A transição do 'transform' no estado normal cuidará da animação */ /* Apenas o 'scale' é adicionado/removido via JS */ } } /* Fim da @media query (hover: hover) */ /* * CONFIGURAÇÕES GERAIS (fora da media query) */ body { min-height: 100vh; }