/* ============================================
   EFFETS VISUELS - CleanAuto Pro
   Ces effets sont activés/désactivés via l'admin
   ============================================ */

/* 🎨 Effet Néon sur les textes */
.effect-neon .hero h1,
.effect-neon h1 span,
.effect-neon .section-header h2 span {
    text-shadow: 
        0 0 5px rgba(168, 85, 247, 0.8),
        0 0 10px rgba(168, 85, 247, 0.6),
        0 0 20px rgba(168, 85, 247, 0.4),
        0 0 40px rgba(249, 115, 22, 0.3);
    animation: neonPulse 2s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from {
        text-shadow: 
            0 0 5px rgba(168, 85, 247, 0.8),
            0 0 10px rgba(168, 85, 247, 0.6),
            0 0 20px rgba(168, 85, 247, 0.4);
    }
    to {
        text-shadow: 
            0 0 10px rgba(168, 85, 247, 1),
            0 0 20px rgba(168, 85, 247, 0.8),
            0 0 40px rgba(168, 85, 247, 0.6),
            0 0 60px rgba(249, 115, 22, 0.4);
    }
}

/* 🌈 Textes Dégradés */
.effect-gradient .hero h1,
.effect-gradient h1 span,
.effect-gradient .section-header h2 span {
    background: linear-gradient(90deg, #A855F7, #F97316, #A855F7);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
    to { background-position: 200% center; }
}

/* 🔮 Orbes Animées (Hero) */
.effect-orbs .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.2) 0%, transparent 60%);
    animation: orbsFloat 15s ease-in-out infinite;
}

.effect-orbs .hero::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: 
        radial-gradient(circle at 30% 70%, rgba(249, 115, 22, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.2) 0%, transparent 30%);
    animation: orbsFloat 20s ease-in-out infinite reverse;
}

@keyframes orbsFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(2%, -2%) scale(1.05);
    }
    50% {
        transform: translate(-1%, 3%) scale(0.95);
    }
    75% {
        transform: translate(-2%, -1%) scale(1.02);
    }
}

/* 🪟 Effets Glassmorphism */
.effect-glass .navbar {
    background: rgba(18, 18, 26, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.effect-glass .feature-card,
.effect-glass .service-card,
.effect-glass .testimonial-card,
.effect-glass .form-container,
.effect-glass .contact-info {
    background: rgba(26, 26, 46, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.effect-glass .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
}

/* 📷 Ambiance Sépia (Rétro) */
.effect-sepia {
    filter: sepia(0.6) contrast(1.1) brightness(0.95);
}

.effect-sepia .hero,
.effect-sepia .navbar,
.effect-sepia .footer {
    filter: sepia(0.4);
}

/* ⚫⚪ Noir & Blanc */
.effect-bw {
    filter: grayscale(100%);
}

.effect-bw .accent-orange,
.effect-bw .service-price,
.effect-bw .btn-primary {
    filter: grayscale(0%);
}

/* 📺 Scanlines (Effet CRT) */
.effect-scanlines::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

.effect-scanlines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 9998;
    animation: flicker 0.15s infinite;
}

@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

/* ✨ Particules Flottantes */
.effect-particles {
    position: relative;
}

.effect-particles::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, rgba(168, 85, 247, 0.3) 1px, transparent 1px),
        radial-gradient(circle, rgba(249, 115, 22, 0.2) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    background-position: 0 0, 25px 25px;
    animation: particlesFloat 30s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes particlesFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
    }
}

/* ==================================================
   COMBINAISONS D'EFFETS
   ================================================== */

/* Glassmorphism + Orbes */
.effect-glass.effect-orbs .hero::before,
.effect-glass.effect-orbs .hero::after {
    backdrop-filter: blur(5px);
}

/* Néon + Scanlines */
.effect-neon.effect-scanlines h1 {
    text-shadow: 
        0 0 5px rgba(168, 85, 247, 0.8),
        0 0 10px rgba(168, 85, 247, 0.6),
        0 0 20px rgba(168, 85, 247, 0.4),
        0 0 40px rgba(249, 115, 22, 0.3),
        2px 2px 2px rgba(0, 0, 0, 0.5);
}

/* Gradient + Particules */
.effect-gradient.effect-particles::before {
    opacity: 0.5;
}

/* Responsive - Désactiver certains effets sur mobile */
@media (max-width: 768px) {
    .effect-orbs .hero::before,
    .effect-orbs .hero::after,
    .effect-particles::before {
        animation: none;
    }
    
    .effect-neon .hero h1,
    .effect-neon h1 span {
        animation: none;
    }
}

/* ==================================================
   DÉSACTIVER EFFETS QUAND VIDÉO ACTIVE
   ================================================== */

/* Désactiver les orbes et effets colorés sur hero-video */
.effect-orbs .hero-video::before,
.effect-orbs .hero-video::after,
.effect-glass .hero-video::before,
.effect-glass .hero-video::after,
.effect-gradient .hero-video::before,
.effect-particles .hero-video::before {
    display: none !important;
    content: none !important;
    background: none !important;
}