.corner-circle-pulse {
  width: 1rem;
  aspect-ratio: 1;
  z-index: 16;
  background-size: 400% 400%;
  position: absolute;
  animation: testRipple 4s ease infinite;
  border: 3px solid rgb(5, 214, 186);
}
.left-top {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 0%;
  left: 0;
  top: 8px;
  border-top: 0px;
  border-left: 0px;
}
.first-left-top {
}
.second-left-top {
  opacity: 0;
  animation-delay: 1s;
}
.right-top {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 100%;
  right: 0;
  top: 8px;
  border-top: 0px;
  border-right: 0px;
}
.first-right-top {
  opacity: 0;
  animation-delay: 2s;
}
.second-right-top {
  opacity: 0;
  animation-delay: 3s;
}
.right-bottom {
  border-top-right-radius: 0;
  border-top-left-radius: 100%;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0;
  right: 0;
  bottom: 0;
  border-bottom: 0px;
  border-right: 0px;
}
.first-right-bottom {
  opacity: 0;
  animation-delay: 4s;
}
.second-right-bottom {
  opacity: 0;
  animation-delay: 5s;
}

.left-bottom {
  border-top-right-radius: 100%;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0%;
  border-bottom-left-radius: 0;
  left: 0;
  bottom: 0;
  border-bottom: 0px;
  border-left: 0px;
}
.first-left-bottom {
  opacity: 0;
  animation-delay: 6s;
}
.second-left-bottom {
  opacity: 0;
  animation-delay: 7s;
}

@keyframes testRipple {
  0% {
    width: 0;
    opacity: 1;
  }

  100% {
    opacity: 0;
    width: 6rem;
  }
}
.quarter-circle-static-left-top {
  width: 100px;
  height: 100px;
  border-radius: 0 0 100% 0;
  top: 0;
  left: 0;
  z-index: 20;
  position: absolute;
  overflow: hidden;
}
.quarter-circle-pulse-left-top {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at top left,
    rgba(226, 26, 176, 0.6),
    rgba(226, 26, 176, 0.5),
    rgba(226, 26, 176, 0.4),
    rgba(226, 26, 176, 0.3),
    rgba(226, 26, 176, 0.2),
    rgba(226, 26, 176, 0.1),
    rgba(226, 26, 176, 0.05),
    rgba(226, 26, 176, 0.03),
    rgba(226, 26, 176, 0.02),
    rgba(226, 26, 176, 0.01),
    rgba(226, 26, 176, 0.001),
    rgba(226, 26, 176, 0),
    transparent
  );
  border-radius: 0 0 100% 0;
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
  animation: pulse 3s ease infinite;
}
.quarter-circle-static-right-top {
  width: 100px;
  height: 100px;
  border-radius: 0 0 0 100%;
  top: 0;
  right: 0;
  z-index: 20;
  position: absolute;
  overflow: hidden;
}
.quarter-circle-pulse-right-top {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at top right,
    rgba(226, 26, 176, 0.6),
    rgba(226, 26, 176, 0.5),
    rgba(226, 26, 176, 0.4),
    rgba(226, 26, 176, 0.3),
    rgba(226, 26, 176, 0.2),
    rgba(226, 26, 176, 0.1),
    rgba(226, 26, 176, 0.05),
    rgba(226, 26, 176, 0.03),
    rgba(226, 26, 176, 0.02),
    rgba(226, 26, 176, 0.01),
    rgba(226, 26, 176, 0.001),
    rgba(226, 26, 176, 0),
    transparent
  );
  position: absolute;
  top: -10px;
  right: -10px;
  overflow: hidden;
  animation: pulse 3s ease infinite;
}
.quarter-circle-static-left-bottom {
  width: 100px;
  height: 100px;
  border-radius: 0 100% 0 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  position: absolute;
  overflow: hidden;
}
.quarter-circle-pulse-left-bottom {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at bottom left,
    rgba(226, 26, 176, 0.6),
    rgba(226, 26, 176, 0.5),
    rgba(226, 26, 176, 0.4),
    rgba(226, 26, 176, 0.3),
    rgba(226, 26, 176, 0.2),
    rgba(226, 26, 176, 0.1),
    rgba(226, 26, 176, 0.05),
    rgba(226, 26, 176, 0.03),
    rgba(226, 26, 176, 0.02),
    rgba(226, 26, 176, 0.01),
    rgba(226, 26, 176, 0.001),
    rgba(226, 26, 176, 0),
    transparent
  );
  position: absolute;
  bottom: -10px;
  left: -10px;
  overflow: hidden;
  animation: pulse 3s ease infinite;
}
.quarter-circle-static-right-bottom {
  width: 100px;
  height: 100px;
  border-radius: 100% 0 0 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  position: absolute;
  overflow: hidden;
}
.quarter-circle-pulse-right-bottom {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at bottom right,
    rgba(226, 26, 176, 0.6),
    rgba(226, 26, 176, 0.5),
    rgba(226, 26, 176, 0.4),
    rgba(226, 26, 176, 0.3),
    rgba(226, 26, 176, 0.2),
    rgba(226, 26, 176, 0.1),
    rgba(226, 26, 176, 0.05),
    rgba(226, 26, 176, 0.03),
    rgba(226, 26, 176, 0.02),
    rgba(226, 26, 176, 0.01),
    rgba(226, 26, 176, 0.001),
    rgba(226, 26, 176, 0),
    transparent
  );
  position: absolute;
  bottom: -10px;
  right: -10px;
  overflow: hidden;
  animation: pulse 3s ease infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}