@keyframes full {
    0% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
    /* 1 */
    3.33% {
        opacity: 0;
        stroke-width: 2;
        stroke-dashoffset: 0;
    }
    /* 2 */
    6.66% {
        opacity: 0;
        stroke-width: 2;
        stroke-dashoffset: 0;
    }
    /* 3 */
    9.99% {
        opacity: 0;
        stroke-width: 2;
        stroke-dashoffset: 0;
    }
    /* 4 */
    13.32% {
        opacity: 1;
        stroke-width: 2;
        stroke-dashoffset: 0;
    }
    /* 5 */
    16.65% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*6*/
    19.98% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*  7*/
    23.31% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*8*/
    26.64% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*9*/
    29.97% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*10*/
    33.33% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*11*/
    36.66% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*12*/
    39.99% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*13*/
    43.32% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /* 14 */
    46.65% {
        opacity: 1;
        stroke-width: 15;
        stroke-dashoffset: 0;
    }
    /*15*/
    49.98% {
        stroke-width: 7;
        stroke-dashoffset: 0;
    }
    /*16*/
    53.31% {
        stroke-width: 6;
        stroke-dashoffset: 0;
    }
    /*17*/
    56.64% {
        stroke-width: 5;
        stroke-dashoffset: 0;
    }
    /*18*/
    59.97% {
        stroke-width: 4;
    }
    /*19*/
    63.33% {
        stroke-width: 3;
    }
    /*20*/
    66.66% {
        stroke-width: 2;
        opacity: .8;
    }
    /*21*/
    69.99% {
        stroke-width: 1;
        opacity: .6;
    }
    /*22*/
    73.32% {
        stroke-width: 1;
        opacity: .4;
    }
    /*23*/
    76.55% {
        stroke-width: 1;
        opacity: .2;
    }
    /*24*/
    79.98% {
        stroke-width: 1;
        opacity: 0;
    }
    /*25*/
    83.31% {
        stroke-width: 1;
        opacity: 0;
    }
    /*26*/
    86.64% {
        stroke-width: 1;
        opacity: 0;
    }
    /*27*/
    89.97% {
        stroke-width: 1;
        opacity: 0;
    }
    /*28*/
    93.33% {
        stroke-width: 1;
        opacity: 0;
    }
    /*29*/
    96.66% {
        stroke-width: 1;
        opacity: 0;
    }
    /*30*/
    100% {
        stroke-width: 1;
        opacity: 0;
        stroke-dashoffset: 102.96427917480469;
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    /* 4 */
    13.32% {
        transform: scale(1);
    }
    /* 5 */
    16.65% {
        transform: scale(1.2);
    }
    /*  7*/
    23.31% {
        transform: scale(1);
    }
    /*8*/
    100% {
        transform: scale(1);
    }
}

.svg-container {
    width: 100%;
    height: 100%;
    bottom: -30%;
    left: 0;
    margin: 0 auto;
    z-index: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
}

.svg-container:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-right: -0.25em;
}

.svg-container .ghosted {
    display: inline-block;
    vertical-align: middle;
}

.lightning-container {
    width: 100px;
    transform-origin: 50% 50%;
    animation: scale 3s ease infinite forwards;
}

.lightning {
    stroke: var(--primary);
    stroke-miterlimit: 10;
    fill: var(--primary);
    stroke-dasharray: 102.96427917480469;
    stroke-dashoffset: 0;
    animation: full 3s ease-out infinite forwards;
}