.animation {
    position: absolute;
    overflow: hidden;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 60vh;
    background: linear-gradient(to bottom, #000000 0%, #3a3a3a 50%, #000000 100%);
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #000000, #ffffff, #000000) 1;
}
.particle {
    position: absolute;
    border-radius: 50%;
    background: #ffffffcc;
    box-shadow: 0 0 10px #ffffff99;
    opacity: 0;
    animation: blink 2s ease-out forwards;
}
@keyframes blink {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}

@media (max-width: 800px) {
    .componente span {
        animation: correr 20s linear infinite;
    }
}

@keyframes correr {
    from { left: 100%; }
    to   { left: -100%; }
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}