.voice-geometry-canvas {
  position: absolute;
  inset: -1px;
  z-index: 2;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.2;
  filter:
    saturate(calc(1.06 + (var(--voice-energy) * 0.48)))
    brightness(calc(0.9 + (var(--voice-energy) * 0.22)))
    drop-shadow(0 0 24px hsl(var(--voice-hue) 96% 58% / 0.22));
  transform: translateZ(0) scale(calc(1 + (var(--voice-energy) * 0.012)));
  transition: opacity 180ms ease-out, filter 180ms ease-out;
  will-change: opacity, filter, transform;
}

.hologram-stage.has-voice-geometry::before {
  opacity: calc(0.24 + (var(--voice-energy) * 0.18));
}

body.is-voice-reactive .voice-geometry-canvas {
  opacity: calc(0.46 + (var(--voice-energy) * 0.36));
}

body[data-voice-mode="speaking"] .voice-geometry-canvas {
  opacity: calc(0.56 + (var(--voice-energy) * 0.34));
  filter:
    saturate(calc(1.16 + (var(--voice-energy) * 0.58)))
    brightness(calc(0.98 + (var(--voice-energy) * 0.24)))
    drop-shadow(0 0 32px hsl(var(--voice-hue) 96% 62% / 0.36));
}

body[data-voice-mode="analyzing"] .voice-geometry-canvas {
  opacity: calc(0.5 + (var(--voice-energy) * 0.28));
}

@supports not (mix-blend-mode: screen) {
  .voice-geometry-canvas {
    mix-blend-mode: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-geometry-canvas {
    opacity: 0.18;
    transform: none;
    transition-duration: 80ms;
  }

  body.is-voice-reactive .voice-geometry-canvas {
    opacity: 0.34;
  }
}