/* ===== ESTILOS PARA EL EFECTO ESTELA DEL MOUSE ===== */

/* Personalización del canvas de la estela */
#mouse-trail-canvas {
    /* Asegurar que el canvas esté por encima de todo */
    z-index: 9999 !important;
    
    /* Efecto de mezcla para mejor integración visual */
    mix-blend-mode: screen;
    
    /* Transiciones suaves */
    transition: opacity 0.3s ease;
}

/* Efectos adicionales para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    #mouse-trail-canvas {
        /* Desactivar en dispositivos táctiles para mejor rendimiento */
        display: none !important;
    }
}

/* Personalización para modo oscuro */
[data-theme="dark"] #mouse-trail-canvas {
    /* Ajustar el blend mode para modo oscuro */
    mix-blend-mode: lighten;
}

/* Personalización para modo claro */
[data-theme="light"] #mouse-trail-canvas {
    /* Ajustar el blend mode para modo claro */
    mix-blend-mode: multiply;
}

/* Efectos de hover para elementos interactivos */
.nav-link:hover ~ #mouse-trail-canvas,
.btn:hover ~ #mouse-trail-canvas,
.feature-card:hover ~ #mouse-trail-canvas {
    /* Aumentar la intensidad de la estela cerca de elementos interactivos */
    filter: brightness(1.2);
}

/* Animaciones suaves para la estela */
@keyframes trailFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes trailFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Clases utilitarias para controlar la estela */
.mouse-trail-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

.mouse-trail-intense {
    filter: brightness(1.5) contrast(1.2) !important;
}

.mouse-trail-subtle {
    filter: brightness(0.8) contrast(0.9) !important;
}

/* Responsive design para la estela */
@media (max-width: 768px) {
    #mouse-trail-canvas {
        /* Reducir la intensidad en dispositivos móviles */
        opacity: 0.7;
    }
}

@media (max-width: 480px) {
    #mouse-trail-canvas {
        /* Desactivar en dispositivos muy pequeños para mejor rendimiento */
        display: none !important;
    }
}

/* Efectos especiales para diferentes secciones */
.section.active #mouse-trail-canvas {
    /* Aumentar intensidad en secciones activas */
    filter: brightness(1.1);
}

.hero:hover #mouse-trail-canvas {
    /* Efecto especial en el hero */
    filter: hue-rotate(30deg) brightness(1.2);
}

/* Integración con el tema automático */
.theme-toggle:hover #mouse-trail-canvas {
    /* Efecto especial en el botón de tema */
    filter: hue-rotate(180deg) brightness(1.3);
}

/* Efectos para elementos de navegación */
.nav-menu .nav-link:hover ~ #mouse-trail-canvas {
    /* Colores especiales para navegación */
    filter: hue-rotate(45deg) brightness(1.1);
}

/* Efectos para tarjetas de características */
.feature-card:hover ~ #mouse-trail-canvas {
    /* Efectos especiales para tarjetas */
    filter: hue-rotate(90deg) brightness(1.15);
}

/* Efectos para botones */
.btn:hover ~ #mouse-trail-canvas {
    /* Efectos especiales para botones */
    filter: hue-rotate(120deg) brightness(1.2);
}

/* Efectos para el footer */
.footer:hover ~ #mouse-trail-canvas {
    /* Efectos sutiles para el footer */
    filter: brightness(0.9) contrast(1.1);
}