/* SWÓN PROJECT - Custom Cursor Styles con Yin Yang */

/* Variables locales para el cursor */
:root {
    --cursor-accent: #1E90FF;
    --cursor-accent-hover: #4BA3FF;
    --cursor-cyan: #00B7C2;
    --cursor-text: #F4F9FF;
    --cursor-dark-blue: #0B1A35;
    --cursor-light-blue: #66B3FF;
}

/* Ocultar cursor del sistema */
html, body, * {
    cursor: none !important;
}

/* Cursor personalizado - Contenedor principal */
.custom-cursor {
    position: fixed !important;
    width: 40px;
    height: 40px;
    pointer-events: none !important;
    z-index: 999999 !important;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* Cursor exterior (doble borde) */
.cursor-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(30, 144, 255, 0.5);
    border-radius: 50%;
    transition: all 0.15s ease-out;
}

/* Cursor interior - contenedor del yin yang */
.cursor-inner {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-out;
    animation: yinYangRotate 8s linear infinite;
}

/* SVG del Yin Yang */
.cursor-inner svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

/* Grupo del Yin Yang */
.yin-yang-group {
    transform-origin: center;
}

/* Animación de rotación suave */
@keyframes yinYangRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Estado hover */
.custom-cursor.hover .cursor-outer {
    border-color: var(--cursor-cyan);
    border-width: 3px;
    transform: scale(1.2);
}

.custom-cursor.hover .cursor-inner {
    animation-duration: 4s;
}

/* Cambiar colores del yin yang en hover */
.custom-cursor.hover .yang-half,
.custom-cursor.hover .yang-big-circle,
.custom-cursor.hover .yang-dot {
    fill: var(--cursor-cyan);
}

.custom-cursor.hover .yin-base,
.custom-cursor.hover .yin-big-circle,
.custom-cursor.hover .yin-dot {
    fill: #122445; /* Azul marino más claro para contraste */
}

/* Estado click */
.custom-cursor.click .cursor-outer {
    transform: scale(0.9);
    border-color: var(--cursor-accent-hover);
}

.custom-cursor.click .cursor-inner {
    animation-duration: 0.5s;
    transform: translate(-50%, -50%) scale(0.8) rotate(180deg);
}

/* Ocultar en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor {
        display: none !important;
    }
    
    html, body, * {
        cursor: auto !important;
    }
}

/* Sombra sutil para el yin yang */
.cursor-inner {
    filter: drop-shadow(0 0 3px rgba(30, 144, 255, 0.3));
}

.custom-cursor.hover .cursor-inner {
    filter: drop-shadow(0 0 5px rgba(0, 183, 194, 0.5));
}

/* Ajuste del brillo en click */
.custom-cursor.click .cursor-inner {
    filter: drop-shadow(0 0 8px rgba(75, 163, 255, 0.8));
}