/* Hero background: deep blue field, hexagon lattice with glowing nodes, flowing wave lines, particles.js dots */
.omt-scroll-story__stage {
  background:
    radial-gradient(ellipse 60% 75% at 50% 65%, rgba(20, 100, 200, .5), transparent 70%),
    linear-gradient(180deg, #021840 0%, #03296a 50%, #04398a 100%);
}
.omt-scroll-story__background {
  background: none;
  overflow: hidden;
}
.omt-scroll-story__grid { display: none; }

.omt-hero-bg__lattice,
.omt-hero-bg__glow,
.omt-hero-bg__wave,
.omt-hero-bg__particles,
.omt-hero-bg__vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* lattice and waves fade out toward BOTH the left and right edges */
.omt-hero-bg__lattice,
.omt-hero-bg__wave {
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 24%, #000 46%, #000 54%, rgba(0,0,0,.45) 76%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 24%, #000 46%, #000 54%, rgba(0,0,0,.45) 76%, transparent 96%);
}
.omt-hero-bg__glow, .omt-hero-bg__lattice, .omt-hero-bg__wave { will-change: transform; transform: translateZ(0); }
.omt-hero-bg__particles canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.omt-hero-bg__vignette {
  background:
    linear-gradient(90deg, rgba(1, 10, 35, .55) 0%, transparent 28%, transparent 72%, rgba(1, 10, 35, .55) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(1, 10, 35, .4) 100%);
}

/* Tablet / mobile: keep more of the lattice visible on narrow screens */
@media (max-width: 1024px) {
  .omt-hero-bg__lattice,
  .omt-hero-bg__wave {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 22%, #000 42%, #000 58%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 22%, #000 42%, #000 58%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 100%);
  }
}
@media (max-width: 767px) {
  .omt-hero-bg__vignette { background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(1, 10, 35, .4) 100%); }
}

/* hexagon layers disappear when the board starts to open (value set by omt-scroll-story.js) */
.omt-hero-bg__lattice,
.omt-hero-bg__glow,
.omt-hero-bg__wave { opacity: var(--omt-hex-o, 1); }

/* background dots (particles.js) disappear together with the hexagons when the board opens */
.omt-hero-bg__particles { opacity: var(--omt-hex-o, 1); }