/* Conteneur des particules */
.particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Petites particules verticales */
.particles span {
    position: absolute;
    bottom: -100px;
    border-radius: 50%;
    background: #ffffff;
    filter: blur(2px);
    animation: rise linear infinite;
    animation-fill-mode: both;
}

/* Animation verticale */
@keyframes rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-120vh);
        opacity: 0;
    }
}

/* Variations des 10 particules */
.particles span:nth-child(1) {
    left: 10%;
    width: 8px;
    height: 8px;
    animation-duration: 36s;
}

.particles span:nth-child(2) {
    left: 50%;
    width: 10px;
    height: 10px;
    animation-duration: 44s;
    animation-delay: 1s;
}

.particles span:nth-child(3) {
    left: 30%;
    width: 10px;
    height: 10px;
    animation-duration: 50s;
    animation-delay: 3s;
}

.particles span:nth-child(4) {
    left: 70%;
    width: 8px;
    height: 8px;
    animation-duration: 56s;
    animation-delay: 5s;
}

.particles span:nth-child(5) {
    left: 85%;
    width: 6px;
    height: 6px;
    animation-duration: 40s;
}

.particles span:nth-child(6) {
    left: 5%;
    width: 7px;
    height: 7px;
    animation-duration: 48s;
    animation-delay: 2s;
}

.particles span:nth-child(7) {
    left: 18%;
    width: 8px;
    height: 8px;
    animation-duration: 60s;
    animation-delay: 6s;
}

.particles span:nth-child(8) {
    left: 42%;
    width: 9px;
    height: 9px;
    animation-duration: 42s;
}

.particles span:nth-child(9) {
    left: 63%;
    width: 4px;
    height: 4px;
    animation-duration: 52s;
    animation-delay: 4s;
}

.particles span:nth-child(10) {
    left: 92%;
    width: 6px;
    height: 6px;
    animation-duration: 38s;
}