/* =====  Dots Bounce ===== */
.dots {
  display: flex;
  gap: 5px;
}

.dots span {
  width: 10px;
  height: 10px;
  background: #7f5cee;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  100% {
    transform: translateY(-14px);
  }
}


/* ===== Spinner Dots ===== */
.spin-dots {
  width: 80px;
  height: 80px;
  position: relative;
  animation: dotsSpin 1s linear infinite;
}

.spin-dots span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: rotate(var(--r)) translateX(30px);
  opacity: var(--o);
}

/* 8 dots around the circle */
.spin-dots span:nth-child(1) {
  --r: 0deg;
  --o: 1;
}
.spin-dots span:nth-child(2) {
  --r: 45deg;
  --o: 0.85;
}
.spin-dots span:nth-child(3) {
  --r: 90deg;
  --o: 0.7;
}
.spin-dots span:nth-child(4) {
  --r: 135deg;
  --o: 0.55;
}
.spin-dots span:nth-child(5) {
  --r: 180deg;
  --o: 0.4;
}
.spin-dots span:nth-child(6) {
  --r: 225deg;
  --o: 0.3;
}
.spin-dots span:nth-child(7) {
  --r: 270deg;
  --o: 0.2;
}
.spin-dots span:nth-child(8) {
  --r: 315deg;
  --o: 0.15;
}

@keyframes dotsSpin {
  100% {
    transform: rotate(360deg);
  }
}