/* Curseur personnalisé avec effet étincelles */
* {
    cursor: url('/assets/images/cursor.png'), auto;
}

a, button, .btn, .clickable {
    cursor: url('/assets/images/cursor-pointer.png'), pointer;
}

/* Conteneur pour les étincelles */
.sparkle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: 999999;
    overflow: hidden;
    /* Fix pour mobile - s'assurer que rien ne bloque */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Désactiver complètement sur mobile si nécessaire */
@media (max-width: 768px) and (pointer: coarse) {
    .sparkle-container {
        display: none !important;
    }
}

/* Étincelle individuelle - optimisé pour la performance */
.sparkle {
    position: absolute;
    pointer-events: none;
    animation: sparkle-fade 1.2s ease-out forwards;
    font-size: 16px;
    /* Suppression des effets coûteux */
    /* text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; */
    /* filter: drop-shadow(0 0 8px currentColor); */
    opacity: 0.9;
}

@keyframes sparkle-fade {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Couleurs d'étincelles améliorées avec plus de contraste */
.sparkle-1 { color: #D4AF37; } /* Or principal */
.sparkle-2 { color: #FFD700; } /* Or brillant */
.sparkle-3 { color: #FFA500; } /* Orange doré */
.sparkle-4 { color: #FF69B4; } /* Rose vif */
.sparkle-5 { color: #00FFFF; } /* Cyan */
.sparkle-6 { color: #FF00FF; } /* Magenta */
.sparkle-7 { color: #00FF00; } /* Vert néon */
.sparkle-8 { color: #FF1493; } /* Rose profond */

/* Traînée d'étincelles - optimisé pour la performance */
.trail-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    animation: trail-fade 0.6s ease-out forwards;
    /* Suppression du box-shadow coûteux */
    /* box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; */
    opacity: 0.8;
}

@keyframes trail-fade {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) translate(var(--trail-x), var(--trail-y));
        opacity: 0;
    }
}

/* Couleurs de traînée aléatoires */
.trail-1 { background: linear-gradient(45deg, #ff6b6b, #ff8b94); }
.trail-2 { background: linear-gradient(45deg, #4ecdc4, #8fcaca); }
.trail-3 { background: linear-gradient(45deg, #ffe66d, #ffd3b6); }
.trail-4 { background: linear-gradient(45deg, #a8e6cf, #b4a7d6); }
.trail-5 { background: linear-gradient(45deg, #667eea, #764ba2); }
.trail-6 { background: linear-gradient(45deg, #f093fb, #f5576c); }
.trail-7 { background: linear-gradient(45deg, #fa709a, #fee140); }
.trail-8 { background: linear-gradient(45deg, #30cfd0, #330867); }

/* Optimisé pour mobile - Effet actif mais léger */
@media (max-width: 768px) {
    .sparkle {
        font-size: 18px !important; /* Taille visible mais optimisée */
        animation-duration: 1s !important; /* Animation plus rapide */
    }
    
    .trail-particle {
        width: 3px !important;
        height: 3px !important;
        animation-duration: 0.5s !important; /* Traînée très rapide */
    }
    
    /* Curseur par défaut sur mobile (pas de custom cursor) */
    * {
        cursor: auto !important;
    }
    
    a, button, .btn, .clickable {
        cursor: pointer !important;
    }
}

/* Amélioration pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sparkle {
        font-size: 22px;
    }
    
    .trail-particle {
        width: 7px;
        height: 7px;
    }
}

/* Optimisé sur appareils tactiles - Effet actif */
@media (hover: none) and (pointer: coarse) {
    .sparkle {
        font-size: 20px !important; /* Bien visible au toucher */
    }
    
    .trail-particle {
        width: 4px !important;
        height: 4px !important;
    }
    
    * {
        cursor: auto !important;
    }
    
    /* Animation spéciale pour le toucher */
    @keyframes touch-sparkle {
        0% {
            transform: scale(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: scale(1.5) rotate(180deg);
            opacity: 0;
        }
    }
    
    .sparkle {
        animation: touch-sparkle 1s ease-out forwards !important;
    }
}

/* Support du mode sombre */
@media (prefers-color-scheme: dark) {
    .sparkle {
        filter: brightness(1.3) drop-shadow(0 0 10px currentColor);
    }
    
    .trail-particle {
        filter: brightness(1.2);
    }
}

/* Optimisation des performances */
.sparkle-container > * {
    /* will-change désactivé car peut causer plus de problèmes que de bénéfices */
    /* will-change: transform, opacity; */
    backface-visibility: hidden;
    /* perspective: 1000px; */
    transform: translateZ(0); /* Force l'accélération matérielle */
}

/* Fix pour iOS Safari */
@supports (-webkit-touch-callout: none) {
    .sparkle {
        -webkit-transform: translateZ(0);
    }
    
    .trail-particle {
        -webkit-transform: translateZ(0);
    }
}