/* Both layers belong to the blue hero, not a fixed overlay across the page. */
.hero-fish .hero { isolation: isolate; }
.hero-art.hero-art-fish {
  position: relative;
  min-height: 650px;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue);
  touch-action: pan-y;
}

.hero-art.hero-art-fish::before,
.hero-art.hero-art-fish::after { content: none; }

.hero-fish-field__canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Navigation remains visually clear while its expanded panel is open. */
body.menu-open .hero-fish-field__canvas { visibility: hidden; }

.hero-fish-field__status {
  margin: 0;
  padding: 24px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.hero-art-fish.is-ready .hero-fish-field__status { display: none; }

@media (min-width: 1051px) {
  .page-home .hero-art.hero-art-fish { margin-top: var(--site-header-height); }
}

@media (max-width: 720px) {
  .hero-art.hero-art-fish { min-height: 520px; }
}