.soft-aurora-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.soft-aurora-container {
  width: 100%;
  height: 100%;
}

.soft-aurora-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-soft-aurora {
  position: relative;
  overflow: hidden;
  background-color: #000000;
  isolation: isolate;
}

.hero-soft-aurora__content {
  position: relative;
  z-index: 1;
}

.hero-isometric .soft-aurora-wrapper {
  z-index: 0;
}

.hero-isometric .hero-foreground {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .soft-aurora-container {
    display: none;
  }

  .hero-soft-aurora,
  .hero-isometric {
    background-color: #0a0a0a;
  }
}