/* From Uiverse.io by marcelodolza */
.loader {
  --size: 110%;
  --duration: 2.5s;
  --logo-color: grey;
  --background: linear-gradient(0deg, rgb(30 27 109 / 20%) 0%, rgb(137 76 161 / 20%) 100%);
  height: var(--size);
  aspect-ratio: 1;
  position: relative;
  pointer-events: none;
}

.loader .box {
  position: absolute;
  background: var(--background);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px 0, inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  animation: ripple var(--duration) infinite ease-in-out;
  inset: var(--inset);
  animation-delay: calc(var(--i) * 0.15s);
  z-index: calc(var(--i) * -1);
  pointer-events: all;
  transition: all 0.3s ease;
}

.loader .box:last-child {
  filter: blur(30px);
}
.loader .box:not(:last-child):hover {
  filter: brightness(2.5) blur(5px);
}

.loader .logo {
  position: absolute;
  display: flex;
  left: 50%;
  place-items: center;
  top: 50%;
  translate: -50% -50%;
  z-index: 6;
}

.loader .logo span {
  color: var(--logo-color);
  width: 100%;
  font-size: 1rem;
  animation: color-change var(--duration) infinite ease-in-out;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px 0, inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  }
  65% {
    transform: scale(1.4);
    box-shadow: rgba(0, 0, 0, 0) 0px 0 0 0;
  }
  100% {
    transform: scale(1);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px 0, inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  }
}

@keyframes color-change {
  0% {
    fill: var(--logo-color);
  }
  50% {
    fill: white;
  }
  100% {
    fill: var(--logo-color);
  }
}