/* A night sky dissolving into the original bone composition. */
.daylight {
  background: linear-gradient(178deg,
    #394552 0%,
    #515e6b 10%,
    #8a969c 22%,
    #bfc5c3 32%,
    #dedfd6 43%,
    #eeece3 55%,
    #f2f0e9 72%);
}
.light-plane { display: none; }
.masthead { color: #f2f0e9; }
.airglow {
  position: absolute;
  inset: -21% -30% 63% -20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    transparent 44%,
    rgb(212 227 222 / .11) 55%,
    rgb(201 219 218 / .13) 58%,
    transparent 72%);
  filter: blur(22px);
  transform: rotate(-11deg);
  animation: atmospheric-drift 38s ease-in-out infinite alternate;
}
.stars { position: absolute; inset: 0; }
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #f6f6ed;
  box-shadow: 0 0 3px 1px rgb(233 242 239 / .12);
  opacity: var(--opacity);
  animation: star-luminance var(--duration) ease-in-out var(--phase) infinite;
}
.meteor { position: absolute; inset: 0; width: 100%; height: 35%; }
@keyframes atmospheric-drift {
  from { transform: translate3d(-1%, -1%, 0) rotate(-11deg); opacity: .7; }
  to { transform: translate3d(2%, 3%, 0) rotate(-9deg); opacity: 1; }
}
@keyframes star-luminance {
  0%, 100% { opacity: calc(var(--opacity) * .4); }
  48% { opacity: var(--opacity); }
  75% { opacity: calc(var(--opacity) * .64); }
}
html[data-atmosphere-paused] .airglow,
html[data-atmosphere-paused] .star { animation-play-state: paused; }
@media (max-width: 600px) {
  .daylight {
    background: linear-gradient(176deg,
      #394552 0%, #566370 11%, #96a0a3 23%,
      #c9cdc6 33%, #e5e4da 44%, #f2f0e9 64%);
  }
  .star:nth-child(n+10) { display: none; }
  .airglow { inset: -10% -80% 69% -70%; filter: blur(16px); }
}
@media (max-height: 599px) {
  /* Keep the compressed landscape layout legible. */
  .daylight { background: linear-gradient(178deg, #394552, #bfc5c3 20%, #f2f0e9 42%); }
  .star { top: calc(var(--y) * .5); }
}
@media (prefers-reduced-motion: reduce) {
  .airglow, .star { animation: none; }
  .meteor { display: none; }
}