/* ============================================
   PARTICLES CSS - Animations de particules
   ============================================ */

/* Container particules */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-particles);
}

/* Particules flottantes (pour accueil et blog) */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    --parallax-y: 0px; /* Variable CSS pour le parallax */
    animation: float 18s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { 
        transform: translate(0, 0) translateY(var(--parallax-y)); 
        opacity: 0.3; 
    }
    25% { 
        transform: translate(40px, -80px) translateY(var(--parallax-y)); 
        opacity: 0.6; 
    }
    50% { 
        transform: translate(-40px, -140px) translateY(var(--parallax-y)); 
        opacity: 0.4; 
    }
    75% { 
        transform: translate(80px, -100px) translateY(var(--parallax-y)); 
        opacity: 0.7; 
    }
}

/* Étoiles (pour projets espace) */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-particles);
}

/* Étoiles de particules uniquement (pas les étoiles de rating) */
.stars .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.3; 
    }
    50% { 
        opacity: 1; 
    }
}