ul.fireflies {
    list-style: none;
    margin: 0;
    padding: 0;
    animation: reveal 40s forwards;
}

.fireflies-li {
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(white 5%, white 25%, white 60%);
    box-shadow: 0 0 1px 1px white,
                0 0 4px 2px white,
                0 0 8px 4px white;
    position: absolute;
    height: 1px;
    width: 1px;
    top: -10px;

    opacity: var(--show, 0);
    transition: opacity 2s ease;
    animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1),updown  8s  infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1);
}

li:nth-of-type(1) {
    animation-delay: 1s;
    animation-duration: 65s, 81s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(2) {
    animation-delay: 0.5s;
    animation-duration: 80s, 75s, 0.01s;
}

li:nth-of-type(3) {
    animation-delay: 1.5s;
    animation-duration: 70s, 60s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(4) {
    animation-delay: 2.5s;
    animation-duration: 90s, 80s, 0.01s;
}

li:nth-of-type(5) {
    animation-delay: 0.3s;
    animation-duration: 55s, 75s, 0.01s;
}

li:nth-of-type(6) {
    animation-delay: 2.2s;
    animation-duration: 79s, 63s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(7) {
    animation-delay: 0.9s;
    animation-duration: 70s, 80s, 0.01s;
}

li:nth-of-type(8) {
    animation-delay: 1.6s;
    animation-duration: 50s, 40s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(9) {
    animation-delay: 1.8s;
    animation-duration: 77s, 88s, 0.01s;
}

li:nth-of-type(10) {
    animation-delay: 3s;
    animation-duration: 87s, 73s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(11) {
    animation-delay: 1s;
    animation-duration: 60s, 78s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(12) {
    animation-delay: 0.5s;
    animation-duration: 85s, 80s, 0.01s;
}

li:nth-of-type(13) {
    animation-delay: 1.5s;
    animation-duration: 75s, 66s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(14) {
    animation-delay: 2.5s;
    animation-duration: 87s, 75s, 0.01s;
}

li:nth-of-type(15) {
    animation-delay: 0.3s;
    animation-duration: 69s, 85s, 0.01s;
}

li:nth-of-type(16) {
    animation-delay: 2.2s;
    animation-duration: 80s, 77s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(17) {
    animation-delay: 0.9s;
    animation-duration: 65s, 88s, 0.01s;
}

li:nth-of-type(18) {
    animation-delay: 1.6s;
    animation-duration: 59s, 63s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

li:nth-of-type(19) {
    animation-delay: 1.8s;
    animation-duration: 88s, 79s, 0.01s;
}

li:nth-of-type(20) {
    animation-delay: 3s;
    animation-duration: 59s, 75s, 0.01s;
    animation-fill-mode: backwards, backwards;
}

/* animations */
@keyframes leftright {

    0%,
    100% {
        left: 80%;
    }

    16.666% {
        left: 95%;
    }

    33.333% {
        left: 10%;
    }

    50% {
        left: 60%;
    }

    66.666% {
        left: 70%;
    }

    83.333% {
        left: 5%;
    }
}

@keyframes updown {

    0%,
    100% {
        top: 10px;
    }

    25% {
        top: 90%;
    }

    50% {
        top: 50%;
    }

    75% {
        top: 95%;
    }
}

@keyframes reveal {
    0% { --show: 0; }
    80% { --show: 0; }
    81%   { --show: 0.01; }
    82%   { --show: 0.02; }
    84%   { --show: 0.05; }
    86%   { --show: 0.08; }
    88%   { --show: 0.1; }
    90%   { --show: 0.15; }
    92%   { --show: 0.20; }
    94%   { --show: 0.30; }
    96%   { --show: 0.40; }
    98%   { --show: 0.50; }
    100%   { --show: 1; }
}