.magic-circle {
  box-shadow: inset 0px 0px 17px 0px rgba(70,158,235,1);
  overflow: hidden;
  z-index: 10;
}

.magic-circle .circle-1 {
  background: linear-gradient(235deg, #1e3df8, #22d2ffc7);
  left: 15%;
  top: 8%;
  z-index: 5;
}

.purple .magic-circle .circle-1 {
  background: linear-gradient(235deg, #2563eb, #2256ffc7);
}

.magic-circle .circle-2 {
  background: linear-gradient(208deg, #f977f7cf, #690588d9);
  left: 36%;
  top: 33%;
}

.magic-circle .circle-3 {
  background: linear-gradient(224deg, #0cc000, #2dc8a17a);
  left: -3%;
  top: -10%;
}

.magic-circle .circle-4 {
  background: radial-gradient(circle, rgb(255 255 255 / 28%) 0%, rgba(255, 255, 255, 1) 90%);
}

.magic-circle .circle-5 {
  background: radial-gradient(circle, rgb(164 126 244 / 95%) 0%, rgb(229 63 255 / 77%) 90%);
}

.magic-circle .circle-6 {
  background: radial-gradient(circle, #389ef0 0%, rgb(72 228 252) 90%);
  top: -10%;
  right: -10%;
}
.purple .magic-circle .circle-6 {
  background: radial-gradient(circle, #1512c1 0%, rgb(26, 136, 179) 90%);
}

.magic-circle .circle-7 {
  background: radial-gradient(circle, #ffffffde 0%, rgb(255 255 255 / 18%) 90%);
  top: 24%;
  right: 10%;
  z-index: 10;
  width: 37%;
  height: 20%;
  transform: rotate(49deg);
}

.magic-circle .circle-8 {
  z-index: 10;
  background: radial-gradient(circle, #ffffffa6 0%, rgb(255 255 255 / 0%) 90%);
  top: 18%;
  right: 48%;
  width: 47%;
  height: 47%;
}

.magic-circle .circle-9 {
  z-index: 10;
  background: radial-gradient(circle, #ffffffa6 0%, rgb(255 255 255 / 0%) 90%);
  top: 34%;
  right: 29%;
  width: 35%;
  height: 75%;
  transform: rotate(15deg);
}

html[data-theme="dark"] .magic-circle-wrapper .circle-highlight-1 {
  background: radial-gradient(circle, #d26eff 0%, #d26eff4f 90%);
  top: -15%;
  left: -38%;
  width: 110%;
  height: 100%;
  transform: rotate(45deg);
}

html[data-theme="dark"] .magic-circle-wrapper .circle-highlight-2 {
  background: radial-gradient(circle, #9073fe 0%, #9073fe63 90%);
  top: 50%;
  right: -20%;
  width: 90%;
  height: 80%;
  transform: rotate(45deg);
}

html[data-theme="dark"] .blue .magic-circle-wrapper .circle-highlight-1 {
  background: radial-gradient(circle, #6ec7ff 0%, #9ce5fa4f 90%);
}

html[data-theme="dark"] .blue .magic-circle-wrapper .circle-highlight-2 {
  background: radial-gradient(circle, #73f3fe 0%, #73e5fe63 90%);
}

html[data-theme="dark"] .magic-circle {
  box-shadow: inset 0px 0px 17px 6px rgb(255 255 255);
}

html[data-theme="dark"] .magic-circle .circle-1 {
  background: linear-gradient(235deg, #1e3df8, #22d2ffc7);
  left: 30%;
  top: 26%;
  z-index: 5;
}

html[data-theme="dark"] .magic-circle .circle-3 {
  z-index: 5;
  background: linear-gradient(224deg, #d287a8, #a6789f);
  left: -15%;
  top: -15%;
  width: 100%;
  height: 100%;
}

html[data-theme="dark"] .magic-circle .circle-7 {
  background: radial-gradient(circle, #ffffffde 0%, rgb(255 255 255 / 18%) 90%);
  top: 60%;
  right: -20%;
  z-index: 10;
  width: 60%;
  height: 60%;
  transform: rotate(320deg);
}

html[data-theme="dark"] .magic-circle .circle-8 {
  z-index: 10;
  background: radial-gradient(circle, #ffffffa6 0%, rgb(255 255 255 / 0%) 90%);
  top: -22%;
  right: 32%;
  width: 87%;
  height: 97%;
}
html[data-theme="dark"] .magic-circle .circle-9 {
  display: none;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate .magic-circle .circle-1 {
  animation: float 3s ease-in-out infinite, pulse 6s ease-in-out infinite;
}

.animate .magic-circle .circle-2 {
  animation: float 4s ease-in-out infinite, pulse 8s ease-in-out infinite;
}

.animate .magic-circle .circle-3 {
  animation: float 5s ease-in-out infinite, pulse 7s ease-in-out infinite;
}

.animate .magic-circle .circle-4 {
  animation: rotate 10s linear infinite;
}

.animate .magic-circle .circle-5 {
  animation: pulse 4s ease-in-out infinite, flicker 3s linear infinite;
}

.animate .magic-circle .circle-6 {
  animation: rotate 15s linear infinite;
}

.animate .magic-circle .circle-7 {
  animation: float 6s ease-in-out infinite, flicker 5s linear infinite;
}

.animate .magic-circle .circle-8 {
  animation: pulse 5s ease-in-out infinite, flicker 4s linear infinite;
}

.animate .magic-circle .circle-9 {
  animation: float 7s ease-in-out infinite, rotate 20s linear infinite;
}

.animate .circle-highlight-1 {
  animation: pulse 6s ease-in-out infinite;
}

.animate .circle-highlight-2 {
  animation: flicker 5s linear infinite;
}