/**
 * ============================================
 * PARTICLES - Effets de particules
 * ============================================
 * Effets de background avec particules flottantes
 * ============================================
 */

/* Container pour particules */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Particules individuelles */
.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Particules violettes */
.particle-purple {
    background: rgba(139, 92, 246, 0.15);
}

.particle-purple-light {
    background: rgba(167, 139, 250, 0.12);
}

/* Différentes tailles */
.particle-sm {
    width: 10px;
    height: 10px;
}

.particle-md {
    width: 20px;
    height: 20px;
}

.particle-lg {
    width: 40px;
    height: 40px;
}

.particle-xl {
    width: 80px;
    height: 80px;
}

/* Animations de flottement */
.particle-float-1 {
    animation: particleFloat1 8s ease-in-out infinite;
}

.particle-float-2 {
    animation: particleFloat2 10s ease-in-out infinite;
}

.particle-float-3 {
    animation: particleFloat3 12s ease-in-out infinite;
}

.particle-float-4 {
    animation: particleFloat4 15s ease-in-out infinite;
}

@keyframes particleFloat1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
        transform: translate(0, -60px) rotate(180deg);
    }
    75% {
        transform: translate(-30px, -30px) rotate(270deg);
    }
}

@keyframes particleFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(-40px, -40px) scale(1.2);
    }
    66% {
        transform: translate(40px, -80px) scale(0.8);
    }
}

@keyframes particleFloat3 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.1;
    }
    50% {
        transform: translateY(-100px) rotate(180deg);
        opacity: 0.3;
    }
}

@keyframes particleFloat4 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.15;
    }
    25% {
        transform: translate(50px, -50px);
        opacity: 0.25;
    }
    50% {
        transform: translate(100px, -100px);
        opacity: 0.35;
    }
    75% {
        transform: translate(50px, -150px);
        opacity: 0.25;
    }
}

/* Effet de pulse sur les particules */
.particle-pulse {
    animation: particlePulse 3s ease-in-out infinite;
}

@keyframes particlePulse {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }
}

/* Background avec effet de mesh gradient */
.mesh-gradient-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(167, 139, 250, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(196, 181, 253, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: meshMove 20s ease infinite;
}

@keyframes meshMove {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-20px, -20px);
    }
    50% {
        transform: translate(20px, 20px);
    }
    75% {
        transform: translate(-20px, 20px);
    }
}

/* Effet de blur sur certaines particules */
.particle-blur {
    filter: blur(20px);
}

/* Orbes lumineux */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    pointer-events: none;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%);
    top: -150px;
    right: -150px;
    animation: orbFloat1 15s ease-in-out infinite;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.4) 0%, transparent 70%);
    bottom: -200px;
    left: -200px;
    animation: orbFloat2 20s ease-in-out infinite;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.3) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    animation: orbFloat3 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(50px, -50px) scale(1.2);
    }
}

@keyframes orbFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-50px, 50px) scale(1.1);
    }
}

@keyframes orbFloat3 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    33% {
        transform: translate(-40%, -60%) scale(1.3);
    }
    66% {
        transform: translate(-60%, -40%) scale(0.9);
    }
}