.bolt {
  transform: scale(0.5);
  --bolt: var(--ifm-color-warning-light);
  width: 126px;
  height: 186px;
  position: relative;
  margin: 0 auto;
  svg {
    position: absolute;
    display: block;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke: var(--bolt);
    &.circle {
      left: 7px;
      top: 100%;
      width: 112px;
      height: 44px;
      stroke-dashoffset: 179px;
      stroke-dasharray: 0px 178px;
    }
    &.line {
      --r: 0deg;
      top: 95%;
      width: 70px;
      height: 3px;
      stroke-dashoffset: 71px;
      stroke-dasharray: 0px 70px;
      transform: rotate(var(--r));
      &.left {
        --r: 130deg;
        left: -24px;
      }
      &.right {
        --r: 40deg;
        right: -24px;
      }
    }
    &.white {
      --r: 0deg;
      --s: 1;
      top: 30%;
      z-index: 1;
      stroke: var(--ifm-font-color-base);
      stroke-dashoffset: 241px;
      stroke-dasharray: 0px 240px;
      transform: rotate(var(--r)) scaleX(var(--s));
      &.left {
        --r: -20deg;
        left: 0;
      }
      &.right {
        --r: 20deg;
        --s: -1;
        right: 0;
      }
    }
  }
  div {
    display: block;
    position: relative;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 44%;
    }
    // &:before {
    //   width: 112px;
    //   height: 112px;
    //   margin: -56px 0 0 -56px;
    //   background: #cdd9ed;
    //   filter: blur(124px);
    // }
    // &:after {
    //   width: 64px;
    //   height: 64px;
    //   margin: -32px 0 0 -32px;
    //   background: #fff9bc;
    //   z-index: 1;
    //   filter: blur(60px);
    // }
    span {
      display: block;
      width: 126px;
      height: 186px;
      background: var(--bolt);
      clip-path: polygon(40% 0%, 100% 0, 65% 40%, 88% 40%, 8% 100%, 36% 50%, 0 50%);
    }
  }
  &.animate {
    div {
      &:before,
      &:after {
        animation: shine 2s ease;
      }
      span {
        animation: morph 2s ease;
      }
    }
    svg.circle {
      animation: circle 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
    }
    svg.line {
      animation: line 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.3s;
    }
    svg {
      animation: light 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
    }
    svg.white.left {
      animation: light 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
    }
    svg.white.right {
      animation: light 0.45s cubic-bezier(0.77, 0, 0.175, 1) forwards 1.45s;
      animation-delay: 1.6s;
    }
  }
}

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

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

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

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

@keyframes morph {
  12% {
    clip-path: polygon(40% 5%, 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(40% 5%, 100% 0, 65% 40%, 65% 40%, 8% 100%, 24% 50%, 24% 50%);
  }
}

// // Center & dribbble
// .container small {
//   position: absolute;
//   bottom: 32px;
//   font-size: 14px;
//   font-family: Arial;
//   text-align: center;
//   line-height: 19px;
//   color: #6c7486;
//   left: 50%;
//   transform: translateX(-50%);
// }

// .container .dribbble {
//   position: fixed;
//   display: block;
//   right: 24px;
//   bottom: 24px;
//   img {
//     display: block;
//     width: 76px;
//   }
// }
