/**
 * Bolt Loader Spinner - Original from provided files
 * Using class name .bolt-spinner to avoid conflicts
 */

.bolt-spinner {
    --bolt: rgb(242, 222, 16);
    width: 126px;
    height: 186px;
    position: relative;
}

.bolt-spinner svg {
    position: absolute;
    display: block;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke: var(--bolt);
}

.bolt-spinner svg.circle {
    left: 7px;
    top: 100%;
    width: 112px;
    height: 44px;
    stroke-dashoffset: 179px;
    stroke-dasharray: 0px 178px;
}

.bolt-spinner svg.line {
    --r: 0deg;
    top: 95%;
    width: 70px;
    height: 3px;
    stroke-dashoffset: 71px;
    stroke-dasharray: 0px 70px;
    transform: rotate(var(--r));
}

.bolt-spinner svg.line.left {
    --r: 130deg;
    left: -24px;
}

.bolt-spinner svg.line.right {
    --r: 40deg;
    right: -24px;
}

.bolt-spinner svg.white {
    --r: 0deg;
    --s: 1;
    top: 30%;
    z-index: 1;
    stroke: #fff;
    stroke-dashoffset: 241px;
    stroke-dasharray: 0px 240px;
    transform: rotate(var(--r)) scaleX(var(--s));
}

.bolt-spinner svg.white.left {
    --r: -20deg;
    left: 0;
}

.bolt-spinner svg.white.right {
    --r: 20deg;
    --s: -1;
    right: 0;
}

.bolt-spinner div {
    display: block;
    position: relative;
}

.bolt-spinner div:before,
.bolt-spinner div:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 44%;
}

.bolt-spinner div:before {
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    background: #CDD9ED;
    filter: blur(124px);
}

.bolt-spinner div:after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background: #FFF9BC;
    z-index: 1;
    filter: blur(60px);
}

.bolt-spinner div span {
    display: block;
    width: 106px;
    height: 186px;
    background: var(--bolt);
    clip-path: polygon(80% 0%, 80% 0, 60% 45%, 90% 45%, 20% 100%, 40% 57%, 10% 57%);
}

.bolt-spinner.animate div:before,
.bolt-spinner.animate div:after {
    animation: shine 2s ease;
}

.bolt-spinner.animate div span {
    animation: morph 2s ease;
}

.bolt-spinner.animate svg.circle {
    animation: circle .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}

.bolt-spinner.animate svg.line {
    animation: line .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
}

.bolt-spinner.animate svg.white {
    animation: white .45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
}

.bolt-spinner.animate svg.white.right {
    animation-delay: 1.6s;
}

@keyframes circle {
    100% {
        stroke-dasharray: 178px 178px;
    }
}

@keyframes white {
    100% {
        stroke-dasharray: 240px 240px;
    }
}

@keyframes line {
    100% {
        stroke-dasharray: 70px 70px;
    }
}

@keyframes shine {
    30%,
    70% {
        opacity: 0;
    }
}

@keyframes morph {
    12% {
        clip-path: polygon(24% 50%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
    }
    24%,
    72% {
        clip-path: polygon(36% 40%, 82% 40%, 82% 40%, 82% 40%, 36% 71%, 36% 40%, 36% 40%);
    }
    84% {
        clip-path: polygon(24% 50%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
    }
}