/* ==========================================
   PARTICLES
========================================== */

.hero-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,106,0,.7);
    box-shadow:0 0 16px rgba(255,106,0,.7);
    animation:particleFloat linear infinite;
}

@keyframes particleFloat{
    from{
        transform:translateY(110vh);
        opacity:0;
    }

    15%{
        opacity:1;
    }

    85%{
        opacity:1;
    }

    to{
        transform:translateY(-20vh);
        opacity:0;
    }
}