/* Gano — Cursor WC3 (guantelete): atlas 256×128 — fila 0 idle, fila 1 miras, fila 3 estados / flechas */

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body:not(.gano-cursor--text),
    body:not(.gano-cursor--text) a,
    body:not(.gano-cursor--text) button,
    body:not(.gano-cursor--text) [role="button"],
    body:not(.gano-cursor--text) label,
    body:not(.gano-cursor--text) select {
        cursor: none !important;
    }

    body.gano-cursor--text,
    body.gano-cursor--text a,
    body.gano-cursor--text button,
    body.gano-cursor--text input,
    body.gano-cursor--text textarea {
        cursor: text !important;
    }
}

@media (pointer: fine) and (prefers-reduced-motion: reduce) {
    .gano-cursor-wrapper {
        display: none !important;
    }

    body,
    body a,
    body button,
    body [role='button'],
    body label,
    body select {
        cursor: auto !important;
    }
}

.gano-cursor-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999999;
}

body.gano-cursor--text .gano-cursor-wrapper {
    opacity: 0;
    visibility: hidden;
}

.gano-cursor-gauntlet {
    --gano-cursor-hx: 10px;
    --gano-cursor-hy: 22px;
    position: fixed;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 1000000;
    transform: translate(calc(-1 * var(--gano-cursor-hx)), calc(-1 * var(--gano-cursor-hy)));
    background-image: url('../assets/cursor/wc3-human-atlas.png');
    background-repeat: no-repeat;
    background-size: 256px 128px;
    background-position: 0 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    animation: gano-wc3-idle 0.64s steps(7) infinite;
}

@keyframes gano-wc3-idle {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -224px 0;
    }
}

/* Hover: fila central del atlas = mira (lectura “clicable”), no la celda inferior que era otro icono */
body.gano-cursor--hover:not(.gano-cursor--invalid):not(.gano-cursor--click) .gano-cursor-gauntlet {
    --gano-cursor-hx: 16px;
    --gano-cursor-hy: 16px;
    animation: none;
    background-position: 0 -32px;
}

body.gano-cursor--invalid .gano-cursor-gauntlet {
    --gano-cursor-hx: 16px;
    --gano-cursor-hy: 16px;
    animation: none;
    background-position: -64px -96px;
}

/* Click: guantelete en pose distinta (fila inferior), no otro frame idéntico de la fila 0 */
body.gano-cursor--click:not(.gano-cursor--invalid) .gano-cursor-gauntlet {
    --gano-cursor-hx: 16px;
    --gano-cursor-hy: 16px;
    animation: none;
    background-position: -96px -96px;
    transform: translate(calc(-1 * var(--gano-cursor-hx)), calc(-1 * var(--gano-cursor-hy))) scale(0.92);
}

@media (max-width: 1024px) {
    .gano-cursor-wrapper {
        display: none !important;
    }

    body,
    body a,
    body button,
    body [role='button'],
    body label,
    body select {
        cursor: auto !important;
    }
}