@keyframes sphereRotate {
  0% {
    transform: translateX(-100%) scale(0.7);
    opacity: 0.3;
  }

  50% {
    transform: translateX(0%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateX(100%) scale(0.7);
    opacity: 0.3;
  }
}

@keyframes sphereGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3),
      0 0 40px rgba(147, 51, 234, 0.2);
  }

  50% {
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.5),
      0 0 60px rgba(147, 51, 234, 0.4);
  }
}

/* Aurora Animation */
@keyframes aurora {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animate-aurora {
  background: linear-gradient(45deg,
      rgb(225, 29, 72),
      rgb(244, 63, 94),
      rgb(251, 113, 133),
      rgb(244, 63, 94),
      rgb(190, 18, 60));
  background-size: 400% 400%;
  animation: aurora 20s infinite;
  will-change: background-position;
  transform: translateZ(0);
}

.sphere {
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.125rem;
  color: #fff;
  opacity: 0;

  background: radial-gradient(circle at 30% 30%,
      rgba(255, 99, 132, 0.95),
      rgba(255, 159, 164, 0.8),
      rgba(255, 205, 210, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.2);

  animation: sphereRotate 6s linear infinite,
    sphereGlow 3s ease-in-out infinite;
}

.sphere:nth-child(1) {
  animation-delay: 0s, 0s;
}

.sphere:nth-child(2) {
  animation-delay: 2s, 0.6s;
}

.sphere:nth-child(3) {
  animation-delay: 4s, 1.2s;
}