/* The user's silent video sits behind the text and traveling V. */
#principal { position: relative; isolation: isolate; }
#principal > .hero-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 720px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #080a10 url('assets/hero-horizon-poster.webp') center 60% / cover no-repeat;
  contain: paint;
}
.hero-background-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero-atmosphere[data-video-error="true"] .hero-background-video { visibility: hidden; }
.hero-atmosphere::before,
.hero-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-atmosphere::before {
  background: linear-gradient(90deg, #080a1066 0%, #080a1026 42%, transparent 76%),
    linear-gradient(180deg, #080a1070 0%, transparent 18%);
}
.hero-atmosphere::after {
  background: linear-gradient(180deg, transparent 85%, #080a1059 95%, #080a10 100%);
}
@media (max-width: 850px) {
  #principal > .hero-atmosphere { height: 1100px; }
  .hero-atmosphere::before {
    background: linear-gradient(180deg, #080a1080 0%, #080a1033 45%, transparent 72%);
  }
}