/*
 * ==========================================================
 * SPARKLE - Effets pailletés, glows et brillance
 * ==========================================================
 */

/* Shimmer doré sur les titres principaux */
.shimmer {
    background: linear-gradient(
        110deg,
        #fff 20%,
        var(--color-sparkle) 40%,
        #fff 45%,
        var(--color-sparkle) 50%,
        #fff 55%,
        var(--color-primary-light) 70%,
        #fff 80%
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Shimmer doré pour texte sur fond clair */
.shimmer-gold {
    background: linear-gradient(
        110deg,
        var(--color-secondary) 20%,
        var(--color-primary-light) 38%,
        var(--color-sparkle) 42%,
        #fff 44%,
        var(--color-sparkle) 46%,
        var(--color-primary-light) 50%,
        var(--color-secondary) 80%
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s ease-in-out infinite;
}

/* Bordure pailletée animée */
.sparkle-border {
    position: relative;
}

.sparkle-border::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-sparkle),
        #fff,
        var(--color-sparkle),
        transparent
    );
    background-size: 200% 100%;
    animation: sparkle-slide 2s linear infinite;
}

@keyframes sparkle-slide {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

/* Glow doré pulsant */
.glow {
    animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(var(--color-sparkle-rgb), 0.15),
                    0 0 30px rgba(var(--color-sparkle-rgb), 0.05);
    }
    50% {
        box-shadow: 0 0 25px rgba(var(--color-sparkle-rgb), 0.3),
                    0 0 50px rgba(var(--color-sparkle-rgb), 0.1),
                    0 0 80px rgba(var(--color-sparkle-rgb), 0.05);
    }
}

/* Glow doré pour texte */
.text-glow {
    text-shadow: 0 0 10px rgba(var(--color-sparkle-rgb), 0.3),
                 0 0 20px rgba(var(--color-sparkle-rgb), 0.15),
                 0 0 40px rgba(var(--color-sparkle-rgb), 0.05);
}

/* Ligne de séparation sparkle animée */
.sparkle-line {
    width: 120px;
    height: 2px;
    margin: var(--space-lg) auto;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--color-sparkle-rgb), 0.3),
        var(--color-sparkle),
        #fff,
        var(--color-sparkle),
        rgba(var(--color-sparkle-rgb), 0.3),
        transparent
    );
    background-size: 200% 100%;
    animation: sparkle-slide 2.5s linear infinite;
    border-radius: 2px;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 253, 247, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(var(--color-sparkle-rgb), 0.15);
}

.glass-dark {
    background: rgba(44, 24, 16, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(var(--color-sparkle-rgb), 0.1);
}

/* Canvas pour les particules (géré par sparkle.js) */
#sparkle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.8;
}

/* Désactiver les animations si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
    .shimmer, .shimmer-gold {
        animation: none;
        background: var(--color-secondary);
        -webkit-text-fill-color: initial;
    }
    .sparkle-border::after, .sparkle-line {
        animation: none;
    }
    .glow { animation: none; }
    #sparkle-canvas { display: none; }
}