.cursor--group {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  min-height: 100vh;
  pointer-events: none;
}

.cursor--group .cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
}

.cursor--group .cursor--inner {
  width: 0.6rem;
  height: 0.6rem;
  left: -0.3rem;
  top: -0.3rem;
  z-index: 11000;
}

.cursor--group .cursor--inner > svg {
  width: 100%;
}

.cursor--group .cursor--inner > svg circle {
  stroke: #fff;
  fill: transparent;
  stroke-width: 7;
  stroke-dasharray: 160%;
  stroke-dashoffset: 160%;
  transform: rotate(98deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s;
}

.cursor--group .cursor--inner > svg circle.st0 {
  stroke-width: 7;
}

.cursor--group .cursor--inner > svg circle.st0,
.cursor--group .cursor--inner > svg path.st0 {
  fill-opacity: 0;
  filter: url(#filter-blur);
  animation: hx 1s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
}

.cursor--group .cursor--inner > svg path.st0 {
  stroke-width: 4;
}

.cursor--group .cursor--inner > svg .st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #fff;
}

.cursor--group .cursor--inner.active > svg circle {
  stroke-dashoffset: 48%;
}

.cursor--group .cursor--outer {
  width: 0.6rem;
  height: 0.6rem;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor--group .cursor--outer > svg {
  width: 100%;
}

.cursor--group .cursor--outer > svg .st0 {
  fill-opacity: 0;
  stroke-width: 4;
  filter: url(#filter-blur);
}

.cursor--group .cursor--outer > svg .st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #fff;
}
@keyframes hx {
  0% {
    stroke: rgba(49, 197, 255, 0.9);
  }
  100% {
    stroke: rgba(49, 197, 255, 0.5);
  }
}