/* =========================================================
   MSK CURSOR — custom cursor + glitch trail
   ========================================================= */

:root {
    --msk-cursor-size: 20px;
    --msk-cursor-z: 99999;
}

.msk-cursor,
.msk-cursor-trail {
    display: none;
}

@media (pointer: fine) and (hover: hover) {
    /* Esconde o cursor nativo em toda a superfície do site.
       Isso evita o I-beam nativo aparecer durante seleção de textos comuns. */
    html.msk-cursor-enabled,
    html.msk-cursor-enabled body,
    html.msk-cursor-enabled body * {
        cursor: none !important;
    }

    /* Campos de texto continuam com cursor nativo para não atrapalhar digitação. */
    html.msk-cursor-enabled body input[type="text"],
    html.msk-cursor-enabled body input[type="email"],
    html.msk-cursor-enabled body input[type="password"],
    html.msk-cursor-enabled body input[type="search"],
    html.msk-cursor-enabled body input[type="tel"],
    html.msk-cursor-enabled body input[type="url"],
    html.msk-cursor-enabled body input[type="number"],
    html.msk-cursor-enabled body textarea,
    html.msk-cursor-enabled body [contenteditable="true"] {
        cursor: text !important;
    }

    .msk-cursor {
        position: fixed;
        left: 0;
        top: 0;
        z-index: var(--msk-cursor-z);
        display: block;
        width: var(--msk-cursor-size);
        height: var(--msk-cursor-size);
        pointer-events: none;
        user-select: none;
        opacity: 0;
        will-change: transform, opacity;
        transition: opacity .16s ease, filter .18s ease;
    }

    .msk-cursor.is-visible {
        opacity: 1;
    }

    .msk-cursor.is-pressed {
        filter: brightness(1.12) saturate(1.15);
    }

    .msk-cursor img {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }

    .msk-cursor__layer {
        position: absolute;
        inset: 0;
        opacity: 0;
        will-change: opacity;
        transition: opacity var(--msk-cursor-fade-ms, 280ms) ease-in-out;
    }

    .msk-cursor__layer.is-active {
        opacity: 1;
    }

    .msk-cursor-trail {
        position: fixed;
        inset: 0;
        z-index: calc(var(--msk-cursor-z) - 1);
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    html.msk-cursor-text-mode .msk-cursor {
        opacity: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msk-cursor,
    .msk-cursor-trail {
        display: none !important;
    }
}