/**
 * Efectos del Cursor Personalizado
 * Variavista Business Theme
 * 
 * Efectos visuales específicos que usan colores dinámicos del Customizer
 * Los colores se inyectan vía CSS variables en enqueue-cursor-system.php
 * 
 * @package Variavista
 * @version 2.7.2
 */

/* ========================================
   FIX: Asegurar que ningún efecto de cursor añada margin-top al body
   ======================================== */
body[class*="cursor-effect-"] {
    margin-top: 0 !important;
}

/* ========================================
   EFECTO: ELECTRIC (Eléctrico)
   ======================================== */

.cursor-effect-electric #custom-cursor {
    background: radial-gradient(circle, 
        var(--cursor-secondary-color, #FF6347) 0%, 
        var(--cursor-primary-color, #C8102E) 70%, 
        transparent 100%);
    border: 3px solid var(--cursor-secondary-color, #FF6347);
    box-shadow: 
        0 0 30px var(--cursor-secondary-color, #FF6347),
        0 0 60px var(--cursor-secondary-color, #FF6347),
        inset 0 0 15px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-electric #custom-cursor-dot {
    background: radial-gradient(circle, 
        var(--cursor-secondary-color, #FF6347) 0%, 
        var(--cursor-primary-color, #C8102E) 100%);
    box-shadow: 
        0 0 15px var(--cursor-secondary-color, #FF6347),
        0 0 30px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-electric.cursor-hover #custom-cursor {
    animation: electric-pulse 0.3s ease-in-out infinite alternate;
    box-shadow: 
        0 0 40px var(--cursor-secondary-color, #FF6347),
        0 0 80px var(--cursor-secondary-color, #FF6347),
        inset 0 0 30px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-electric.cursor-hover #custom-cursor-dot {
    animation: electric-spark 0.2s linear infinite;
}

@keyframes electric-pulse {
    0% { 
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(1);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.5);
        filter: brightness(1.3);
    }
}

@keyframes electric-spark {
    0%, 100% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    50% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.8);
    }
}

/* ========================================
   EFECTO: FIRE (Fuego)
   ======================================== */

.cursor-effect-fire #custom-cursor {
    background: radial-gradient(circle, 
        #ff4500 0%, 
        #ff8c00 50%, 
        transparent 100%);
    box-shadow: 
        0 0 30px #ff4500,
        0 0 60px #ff8c00;
}

.cursor-effect-fire #custom-cursor-dot {
    background: #ff4500;
    box-shadow: 0 0 20px #ff4500;
}

.cursor-effect-fire.cursor-hover #custom-cursor {
    animation: fire-flicker 0.15s ease-in-out infinite;
}

@keyframes fire-flicker {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(1);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.4) translateY(-2px);
        filter: brightness(1.2);
    }
}

/* ========================================
   EFECTO: MAGMA (Lava)
   ======================================== */

.cursor-effect-magma #custom-cursor {
    background: radial-gradient(circle, 
        var(--cursor-primary-color, #C8102E) 0%, 
        #8B0000 60%, 
        transparent 100%);
    border: 2px solid var(--cursor-primary-color, #C8102E);
    box-shadow: 
        0 0 40px var(--cursor-primary-color, #C8102E),
        inset 0 0 20px var(--cursor-primary-color, #C8102E);
}

.cursor-effect-magma #custom-cursor-dot {
    background: radial-gradient(circle, #FFD700, var(--cursor-primary-color, #C8102E));
    box-shadow: 0 0 25px #FFD700;
}

.cursor-effect-magma.cursor-hover #custom-cursor {
    animation: magma-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes magma-pulse {
    0% { 
        box-shadow: 0 0 40px var(--cursor-primary-color, #C8102E);
    }
    100% { 
        box-shadow: 0 0 60px var(--cursor-primary-color, #C8102E),
                    0 0 80px #FFD700;
    }
}

/* ========================================
   EFECTO: OCEAN (Océano)
   ======================================== */

.cursor-effect-ocean #custom-cursor {
    background: radial-gradient(circle, 
        #00CED1 0%, 
        #4682B4 60%, 
        transparent 100%);
    border: 2px solid #00CED1;
    box-shadow: 
        0 0 30px #00CED1,
        0 0 60px #4682B4;
}

.cursor-effect-ocean #custom-cursor-dot {
    background: #00CED1;
    box-shadow: 0 0 20px #00CED1;
}

.cursor-effect-ocean.cursor-hover #custom-cursor {
    animation: ocean-wave 0.6s ease-in-out infinite;
}

@keyframes ocean-wave {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1.3);
        border-radius: 50%;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.5);
        border-radius: 45%;
    }
}

/* ========================================
   EFECTO: SKY (Cielo)
   ======================================== */

.cursor-effect-sky #custom-cursor {
    background: radial-gradient(circle, 
        #87CEEB 0%, 
        #4169E1 60%, 
        transparent 100%);
    border: 2px solid #87CEEB;
    box-shadow: 
        0 0 40px #87CEEB,
        0 0 80px #4169E1;
}

.cursor-effect-sky #custom-cursor-dot {
    background: #FFD700;
    box-shadow: 0 0 30px #FFD700;
}

.cursor-effect-sky.cursor-hover #custom-cursor {
    animation: sky-shimmer 1s ease-in-out infinite;
}

@keyframes sky-shimmer {
    0%, 100% { 
        filter: brightness(1);
    }
    50% { 
        filter: brightness(1.3);
    }
}

/* ========================================
   EFECTO: EARTH (Tierra)
   ======================================== */

.cursor-effect-earth #custom-cursor {
    background: radial-gradient(circle, 
        #8B4513 0%, 
        #654321 60%, 
        transparent 100%);
    border: 3px solid #D2691E;
    box-shadow: 
        0 0 30px #8B4513,
        0 0 60px #654321;
}

.cursor-effect-earth #custom-cursor-dot {
    background: #228B22;
    box-shadow: 0 0 15px #228B22;
}

.cursor-effect-earth.cursor-hover #custom-cursor {
    animation: earth-rotate 2s linear infinite;
}

@keyframes earth-rotate {
    0% { 
        transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.3) rotate(360deg);
    }
}

/* ========================================
   EFECTO: GRADIENT (Gradiente)
   ======================================== */

.cursor-effect-gradient #custom-cursor {
    background: conic-gradient(
        from 0deg,
        var(--cursor-primary-color, #C8102E) 0deg,
        var(--cursor-secondary-color, #FF6347) 90deg,
        var(--cursor-primary-color, #C8102E) 180deg,
        var(--cursor-secondary-color, #FF6347) 270deg,
        var(--cursor-primary-color, #C8102E) 360deg
    );
    border: 2px solid white;
    box-shadow: 
        0 0 40px var(--cursor-primary-color, #C8102E),
        0 0 80px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-gradient #custom-cursor-dot {
    background: white;
    box-shadow: 0 0 20px white;
}

.cursor-effect-gradient.cursor-hover #custom-cursor {
    animation: gradient-spin 1s linear infinite;
}

@keyframes gradient-spin {
    0% { 
        transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.3) rotate(360deg);
    }
}

/* ========================================
   EFECTO: PARTICLES (Partículas)
   ======================================== */

.cursor-effect-particles #custom-cursor {
    background: radial-gradient(circle, 
        var(--cursor-secondary-color, #FF6347) 0%, 
        var(--cursor-primary-color, #C8102E) 50%, 
        transparent 100%);
    border: 2px dashed var(--cursor-secondary-color, #FF6347);
    box-shadow: 0 0 30px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-particles #custom-cursor-dot {
    background: var(--cursor-secondary-color, #FF6347);
    box-shadow: 0 0 15px var(--cursor-secondary-color, #FF6347);
}

.cursor-effect-particles.cursor-hover #custom-cursor {
    animation: particles-expand 0.5s ease-in-out infinite alternate;
}

@keyframes particles-expand {
    0% { 
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0.7;
    }
}