/* Mars at dusk. Grade the landscape plates together so their edges stay invisible.
   Keep text and collision responses outside the landscape filter. */
:root {
  background: #100b09;
  color: #fff4e9;
  --mars-rock-grade: sepia(1) saturate(2.25) hue-rotate(334deg) brightness(1.48) contrast(.96);
}

body { background: #100b09; }

.mars-atmosphere { background: #100b09; }
.mars-atmosphere video,
.mars-atmosphere .perimeter-ridge { filter: var(--mars-rock-grade); }

.mars-atmosphere .sky { background: #291712; }
.mars-atmosphere .sky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 177.778svh, 1102.223px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 36% 24% at 78% 39%, #d18a594a, transparent 80%),
    radial-gradient(ellipse 64% 20% at 45% 54%, #d094695c, transparent 80%),
    linear-gradient(180deg, #160f10 0%, #271718 19%, #482720 36%, #79513b 51%, #b58159 64%, #b58159 100%);
}
.mars-atmosphere .sky-detail { opacity: .28; filter: sepia(.65); }

/* The existing drifting atmosphere becomes fine copper dust. */
.mars-atmosphere .atmosphere-sheet {
  filter: sepia(1) saturate(2.5) hue-rotate(337deg) brightness(1.38);
}
.mars-atmosphere .boundary-storm {
  filter: sepia(.6) saturate(1.35) hue-rotate(342deg);
}

/* A warm horizon veil ties the separate sky and filmed terrain together. */
.mars-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 18% at 52% 61%, #dc88551c, transparent 75%),
    linear-gradient(180deg, transparent 35%, #c4743710 62%, transparent 85%);
}
.mars-atmosphere::after {
  background: linear-gradient(180deg, #100b092e, transparent 22%, transparent 65%, #100b092e 77%, #100b09b8 92%, #100b09 100%);
}

.mars-atmosphere nav a { color: #e2c5b2; }
.mars-atmosphere nav a:hover { color: #fff4e9; }
a:focus-visible { outline-color: #f0b488; }
.mars-atmosphere .hero-copy {
  text-shadow: 0 2px 30px #160b08b3;
}
.mars-atmosphere .hero-lead { color: #e6c8b5; }
.mars-atmosphere .hero-copy h1 { color: #fff4e9; }
.mars-atmosphere .hero-copy h1 span { color: #ffdcc2; }
.continuation h2 { color: #c9a28a; }

@media (max-width: 700px) {
  .mars-atmosphere .sky::before { width: max(100%, 177.778svh, 1031.112px); }
}