/* Keep the original still; remove its diffuse haze only at display time. */
.constellation-filters { position: absolute; width: 0; height: 0; pointer-events: none; }
.hero-stars {
  position: absolute; top: 0; left: 0; width: 100%;
  height: var(--starfield-height, 60%); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
}
.hero-constellation {
  position: absolute; top: 36px; right: 0; width: 100%;
  aspect-ratio: 3840 / 1166; z-index: -1; overflow: hidden;
  pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 78%, transparent);
}
.hero-constellation img {
  position: absolute; top: 0; left: 0; display: block;
  width: 100%; height: auto; max-width: none;
  filter: url(#constellation-clear-sky);
}
@media (max-width: 1100px) {
  .hero-constellation {
    top: 84px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 25%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent 10%, #000 25%, #000 78%, transparent);
  }
}
@media (max-width: 760px) {
  .hero-constellation { width: min(140vw, 720px); top: 96px; }
  .hero-copy { padding-top: var(--sky-copy-top, 278px); }
}
@media (max-width: 380px) {
  .hero-copy { padding-top: var(--sky-copy-top, 270px); }
}