/* Three.js background layer: visual-only, isolated from LeoHub UI. */
.three-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .88;
  transition: opacity .25s ease;
}

.three-background canvas {
  display: block;
  width: 100%;
  height: 100%;
}

html[data-theme="light"] .three-background {
  opacity: .52;
}

@media (max-width: 700px) {
  .three-background {
    opacity: .66;
  }

  html[data-theme="light"] .three-background {
    opacity: .38;
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-background {
    opacity: .42;
  }
}