.hero {
  isolation: isolate;
  background:
    linear-gradient(rgba(5, 6, 8, .52), rgba(5, 6, 8, .76)),
    url("/media/riprap-captain-context-poster.jpg") center bottom / cover no-repeat;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(5, 6, 8, .25), rgba(5, 6, 8, .64) 63%, rgba(5, 6, 8, .9)),
    linear-gradient(to bottom, rgba(5, 6, 8, .1), rgba(5, 6, 8, .46));
}

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

/* The mark is a readable bone-and-signal silhouette first; the aqua halo only
   resolves when the loop is connected, so it survives a busy moving hero. */
.mark {
  display: block;
  height: auto;
  isolation: isolate;
}

.mark--connected {
  filter: drop-shadow(0 0 8px rgba(0, 245, 207, .18));
}

@media (max-width: 760px) {
  .hero-video {
    object-position: 38% bottom;
    opacity: .72;
  }

  .hero::after {
    background: rgba(5, 6, 8, .62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .skull,
  .mark {
    animation: none;
  }
}