@property --progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.creation-feed-grid .magic-generation {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(145deg, #100827 0%, #24114d 48%, #071e3e 100%);
  box-shadow: 0 22px 50px -24px rgba(39, 14, 91, 0.72);
}

.magic-generation::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: inherit;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 34%, transparent 66%, rgba(125, 211, 252, 0.1));
  content: "";
  pointer-events: none;
}

.magic-generation__aurora,
.magic-generation__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.magic-generation__aurora {
  filter: blur(26px) saturate(135%);
  transform: scale(1.18);
}

.magic-generation__aurora span {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 45% 55% 62% 38%;
  opacity: 0.72;
  mix-blend-mode: screen;
  animation: magic-aurora 9s ease-in-out infinite alternate;
}

.magic-generation__aurora span:nth-child(1) { top: -24%; left: -18%; background: #7457ff; }
.magic-generation__aurora span:nth-child(2) { top: 7%; right: -26%; background: #00c8ff; animation-delay: -3s; animation-duration: 11s; }
.magic-generation__aurora span:nth-child(3) { right: 8%; bottom: -31%; background: #ff3ec9; animation-delay: -6s; animation-duration: 13s; }
.magic-generation__aurora span:nth-child(4) { bottom: -23%; left: -22%; background: #30e4a5; animation-delay: -8s; animation-duration: 12s; }

.magic-generation__particles i {
  --size: 3px;
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(204, 232, 255, 0.8);
  opacity: 0;
  animation: magic-particle 4.8s ease-in infinite;
}

.magic-generation__particles i:nth-child(1)  { --size: 2px; left: 13%; animation-delay: -0.4s; animation-duration: 5.2s; }
.magic-generation__particles i:nth-child(2)  { --size: 5px; left: 22%; animation-delay: -3.6s; }
.magic-generation__particles i:nth-child(3)  { left: 31%; animation-delay: -1.7s; animation-duration: 6.1s; }
.magic-generation__particles i:nth-child(4)  { --size: 2px; left: 40%; animation-delay: -4.3s; }
.magic-generation__particles i:nth-child(5)  { --size: 4px; left: 48%; animation-delay: -2.1s; animation-duration: 5.7s; }
.magic-generation__particles i:nth-child(6)  { left: 57%; animation-delay: -0.8s; }
.magic-generation__particles i:nth-child(7)  { --size: 5px; left: 66%; animation-delay: -2.8s; animation-duration: 6.3s; }
.magic-generation__particles i:nth-child(8)  { --size: 2px; left: 77%; animation-delay: -1.3s; }
.magic-generation__particles i:nth-child(9)  { --size: 4px; left: 86%; animation-delay: -4.1s; animation-duration: 5.4s; }
.magic-generation__particles i:nth-child(10) { left: 18%; animation-delay: -2.5s; animation-duration: 7s; }
.magic-generation__particles i:nth-child(11) { --size: 2px; left: 72%; animation-delay: -5.2s; animation-duration: 7.2s; }
.magic-generation__particles i:nth-child(12) { --size: 4px; left: 91%; animation-delay: -3.1s; animation-duration: 6.6s; }

.magic-generation__progress {
  --progress: 0deg;
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(6.5rem, 42%, 10rem);
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  place-items: center;
  background: conic-gradient(from -90deg, #fff 0deg, #70e5ff 2deg, #a78bfa var(--progress), rgba(255, 255, 255, 0.15) var(--progress) 360deg);
  box-shadow: 0 0 36px rgba(116, 215, 255, 0.38), inset 0 0 12px rgba(255, 255, 255, 0.25);
  transition: --progress 500ms ease;
}

.magic-generation__progress::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(12, 7, 32, 0.72);
  box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.3);
  content: "";
  backdrop-filter: blur(12px);
}

.magic-generation__core {
  position: absolute;
  top: 13%;
  right: 12%;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 68%);
  animation: magic-core 2.8s ease-in-out infinite;
}

.magic-generation__core svg {
  width: 1.35rem;
  fill: currentColor;
  filter: drop-shadow(0 0 7px rgba(159, 220, 255, 0.9));
}

.magic-generation__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(80%, 15rem);
  color: rgba(255,255,255,.8);
  text-align: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 12px rgba(7, 4, 20, 0.75);
}

.magic-generation__status {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.magic-generation__value {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.magic-generation__runby {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  opacity: 0.72;
}

@keyframes magic-aurora {
  0% { transform: translate3d(-7%, -4%, 0) rotate(0deg) scale(0.94); }
  50% { transform: translate3d(16%, 9%, 0) rotate(80deg) scale(1.12); }
  100% { transform: translate3d(-1%, 18%, 0) rotate(165deg) scale(0.98); }
}

@keyframes magic-particle {
  0% { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.4); }
  18% { opacity: 0.85; }
  75% { opacity: 0.45; }
  100% { opacity: 0; transform: translate3d(1.5rem, -16rem, 0) scale(1.35); }
}

@keyframes magic-core {
  0%, 100% { opacity: 0.75; transform: scale(0.92) rotate(-5deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .magic-generation__aurora span,
  .magic-generation__particles i,
  .magic-generation__core { animation: none; }

  .magic-generation__particles i { opacity: 0.55; }
  .magic-generation__progress { transition: none; }
}