/*==========================
    PREMIUM PARTICLES
==========================*/
.particles span {
    width: 6px;
    height: 6px;
    animation-duration: calc(12s + (var(--i) * 1s));
}

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

    .particles span {
        position: absolute;
        display: block;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(56,189,248,.95) 30%, rgba(14,165,233,.5) 70%, transparent 100%);
        box-shadow: 0 0 10px #38bdf8, 0 0 20px #0ea5e9, 0 0 40px #2563eb;
        animation: particleMove linear infinite;
    }

        .particles span:nth-child(1) {
            width: 12px;
            height: 12px;
            left: 5%;
            animation-duration: 14s;
        }

        .particles span:nth-child(2) {
            width: 18px;
            height: 18px;
            left: 15%;
            animation-duration: 18s;
        }

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

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

        .particles span:nth-child(5) {
            width: 10px;
            height: 10px;
            left: 58%;
            animation-duration: 16s;
        }

        .particles span:nth-child(6) {
            width: 15px;
            height: 15px;
            left: 70%;
            animation-duration: 22s;
        }

        .particles span:nth-child(7) {
            width: 26px;
            height: 26px;
            left: 84%;
            animation-duration: 19s;
        }

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

@keyframes particleMove {

    0% {
        transform: translateY(110vh) translateX(0) scale(.2) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        transform: translateY(70vh) translateX(40px) scale(1);
    }

    60% {
        transform: translateY(35vh) translateX(-35px) scale(1.4);
    }

    100% {
        transform: translateY(-20vh) translateX(60px) scale(.3) rotate(360deg);
        opacity: 0;
    }
}