.particle-stage {
  --voice-level: 0.52;
  --voice-hue: 204;
  --voice-scale: 1;
  position: relative;
  overflow: hidden;
}

.particle-stage::before,
.particle-stage::after,
.particle-stage-stars,
.particle-sphere-canvas,
.particle-sphere-halo,
.particle-sphere-floor {
  position: absolute;
  pointer-events: none;
}

.particle-stage::before {
  content: "";
  inset: 8px 16px 2px;
  background:
    radial-gradient(circle at 50% 44%, rgba(39, 210, 92, calc(0.04 + var(--voice-level) * 0.06)), transparent 31%),
    radial-gradient(circle at 30% 47%, rgba(0, 86, 255, 0.1), transparent 26%),
    radial-gradient(circle at 70% 48%, rgba(246, 236, 93, 0.08), transparent 25%);
  mix-blend-mode: screen;
}

.particle-stage::after {
  content: "";
  inset: 10px 18px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 74%, rgba(103, 235, 255, calc(0.035 + var(--voice-level) * 0.06)) 0 1px, transparent 1px 12px);
  transform: perspective(360px) rotateX(66deg) scaleX(calc(0.72 + var(--voice-level) * 0.08));
  transform-origin: 50% 78%;
  opacity: 0.48;
  filter: blur(0.2px);
}

.particle-stage-stars {
  inset: 0;
  background:
    radial-gradient(circle at 17% 30%, rgba(103, 235, 255, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 21%, rgba(246, 236, 93, 0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 64%, rgba(103, 235, 255, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 41% 75%, rgba(39, 210, 92, 0.24) 0 1px, transparent 2px);
  opacity: 0.62;
  animation: jining-star-drift 11s linear infinite;
}

.particle-sphere-canvas {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  filter: saturate(1.1) contrast(1.06) drop-shadow(0 0 calc(8px + var(--voice-level) * 10px) rgba(103, 235, 255, 0.22));
}

.particle-sphere-halo {
  z-index: 1;
  left: 50%;
  top: 49%;
  width: calc(230px + var(--voice-level) * 40px);
  height: calc(230px + var(--voice-level) * 40px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(0, 207, 255, 0.08) 18%, rgba(18, 210, 67, 0.055) 43%, transparent 67%);
  transform: translate(-50%, -50%) scale(var(--voice-scale));
  filter: blur(6px);
  opacity: 0.82;
}

.particle-sphere-floor {
  z-index: 1;
  left: 50%;
  bottom: 19px;
  width: calc(150px + var(--voice-level) * 80px);
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(103, 235, 255, 0.28), rgba(31, 219, 78, 0.1) 42%, transparent 72%);
  transform: translateX(-50%);
  filter: blur(8px);
  opacity: 0.62;
}

.particle-stage .voice-spectrum {
  position: absolute;
  left: 50%;
  z-index: 3;
  bottom: 9px;
  width: 170px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: calc(0.24 + var(--voice-level) * 0.22);
  filter: drop-shadow(0 0 10px rgba(103, 235, 255, 0.28));
  transform: translateX(-50%);
}

.particle-stage .voice-spectrum i {
  width: 2px;
  height: calc(var(--h) * 1px);
  min-height: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(246, 236, 93, 0.72), rgba(24, 218, 66, 0.5), rgba(0, 72, 255, 0.34));
  animation: jining-spectrum-breathe 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.035s);
}

@keyframes jining-star-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-18px, 16px, 0);
  }
}

@keyframes jining-spectrum-breathe {
  0%,
  100% {
    transform: scaleY(0.58);
    opacity: 0.46;
  }

  50% {
    transform: scaleY(calc(0.92 + var(--voice-level) * 0.52));
    opacity: 1;
  }
}