/* ======================================================================== Paw Cursor v1.0 — Cursor personalizado en forma de huella ------------------------------------------------------------------------ - Funciona sólo en dispositivos con hover (escritorio). - Respeta `prefers-reduced-motion`. - Oculta el cursor nativo del sistema cuando está activo. - El caret de texto (al escribir) se mantiene visible, no interfiere. ======================================================================== */ .paw-cursor { position: fixed; top: 0; left: 0; width: 32px; height: 32px; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%) translate3d(0, 0, 0); transition: opacity 0.25s ease, filter 0.2s ease; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)); will-change: transform; } .paw-cursor.is-active { opacity: 1; } .paw-cursor.is-hover { /* Glow sutil al pasar por elementos interactivos (no cambia el tamaño — evita "saltos" visuales fuera de la caja) */ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); } .paw-cursor.is-down { opacity: 0.7; } /* Oculta el cursor nativo del sistema en TODA la página cuando el paw está activo. Activado vía que el JS añade automáticamente. */ html.paw-cursor-on, html.paw-cursor-on *, html.paw-cursor-on a, html.paw-cursor-on button, html.paw-cursor-on input, html.paw-cursor-on select, html.paw-cursor-on textarea, html.paw-cursor-on label { cursor: none !important; } /* Desactiva todo en táctil o con reduced-motion */ @media (hover: none), (prefers-reduced-motion: reduce) { .paw-cursor { display: none !important; } html.paw-cursor-on, html.paw-cursor-on * { cursor: auto !important; } }