/*
 * Home hero only: clip the WebGL layer so translate/transform cannot expand
 * the document scroll box (fixes awkward extra scroll / rubber-band on load).
 */
.hero.hero--aurora {
  overflow: hidden;
}

/* WebGL aurora layer — behind .mgtMountains (z-index 2). Full hero; no CSS crop. */
.hero .hero-aurora-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

/* Aurora hidden in light mode until shader/colors are tuned for pale backgrounds */
body:not(.dark-mode) .hero .hero-aurora-wrap {
  display: none;
}

body.dark-mode .hero .hero-aurora-wrap {
  opacity: 0.4;
}

.hero .hero-aurora-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/*
 * Legacy side auroras (WebP): light mode only — uses fade/pulse animations in mgt-styles.css.
 * Dark mode uses the WebGL layer instead.
 */
body.dark-mode .hero.hero--aurora .auroraLeft,
body.dark-mode .hero.hero--aurora .auroraRight {
  display: none !important;
}