/* ========================================
   CURSOR PERSONALIZADO
   Litl Studio Website
   
   - Cursor circular personalizado
   - Efecto hover en elementos interactivos
   - Compatible con Chrome, Safari, Firefox
   - Se oculta en dispositivos táctiles
   ======================================== */

/* Ocultar cursor nativo en dispositivos con mouse */
*,
*::before,
*::after {
    cursor: none !important;
}

/* Forzar en todos los navegadores */
html,
body,
a,
button,
input,
textarea,
select {
    cursor: none !important;
}

/* Cursor personalizado */
.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none; /* No interfiere con clicks */
    z-index: var(--z-cursor);
    transform: translate(-50%, -50%);
    
    /* Transiciones suaves */
    transition: width var(--timing-fast) var(--ease-smooth),
                height var(--timing-fast) var(--ease-smooth),
                background-color var(--timing-fast) var(--ease-smooth),
                border-width var(--timing-fast) var(--ease-smooth),
                opacity var(--timing-fast) ease;
    
    /* Mix blend mode para efecto visual */
    mix-blend-mode: difference;
    
    /* Optimización de performance */
    will-change: transform;
    
    /* Importante para cross-browser */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

/* Estado hover - cursor crece sobre elementos interactivos */
.cursor.hover {
    width: 60px;
    height: 60px;
    background-color: rgba(51, 51, 51, 0.1);
    border-width: 1px;
}

/* ==================
   COMPATIBILIDAD CROSS-BROWSER
   ================== */

/* Safari específico */
@supports (-webkit-appearance: none) {
    * {
        cursor: none !important;
        -webkit-cursor: none !important;
    }
}

/* Firefox específico */
@-moz-document url-prefix() {
    * {
        cursor: none !important;
    }
}

/* ==================
   MOBILE / TOUCH DEVICES
   ================== */

/* Ocultar cursor personalizado en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none !important;
        opacity: 0 !important;
    }
    
    /* Restaurar cursor nativo en mobile/tablet */
    *,
    *::before,
    *::after {
        cursor: auto !important;
    }
}

/* También detectar por touch capability */
@media (pointer: coarse) {
    .cursor {
        display: none !important;
    }
    
    * {
        cursor: auto !important;
    }
}

/* ==================
   OPTIMIZACIÓN
   ================== */

/* Ajuste para dispositivos de baja performance */
@media (prefers-reduced-motion: reduce) {
    .cursor {
        transition: none !important;
        animation: none !important;
    }
}

/* Alta resolución - ajustar grosor de borde */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cursor {
        border-width: 1.5px;
    }
    
    .cursor.hover {
        border-width: 1px;
    }
}