/* ── OVERWORLD BACKDROP ─────────────────────────────────────────────────────
   The night sky from the credits page, shared so every page sits on it.
   Layers are fixed and sit behind everything; --sd is the scroll depth (0 at
   the top of the page, 1 at the bottom) and sky.js keeps it updated. The
   deeper you go the darker it gets, and the clouds fade out as you drop below
   them. Nothing here positions page content, so it is safe to drop onto any
   page that already has its own layout. */

.sky-bg, .sky-clouds, .sky-dim, .sky-vig {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.sky-bg {
  background:
    radial-gradient(52% 34% at 76% 4%, rgba(178,204,255,.13) 0%, transparent 62%),
    linear-gradient(#20386b 0%, #1a2e5a 26%, #132244 54%, #0c1730 78%, #070d1c 100%);
}

.sky-clouds {
  inset: -12%;
  background-image: url('mc-clouds.png');
  background-repeat: repeat;
  background-size: 2600px 2600px;
  image-rendering: pixelated;
  opacity: calc(.105 * (1 - var(--sd, 0)));
  animation: sky-drift 240s linear infinite;
}
.sky-clouds.far {
  background-size: 1400px 1400px;
  opacity: calc(.055 * (1 - var(--sd, 0)));
  animation-duration: 380s;
}
@keyframes sky-drift {
  from { background-position: 0 0; }
  to   { background-position: 2600px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-clouds { animation: none; }
}

.sky-dim { background: #02040a; opacity: calc(var(--sd, 0) * .82); }

.sky-vig {
  background: radial-gradient(135% 95% at 50% 4%,
    transparent 42%, rgba(5,8,18,.42) 80%, rgba(3,5,12,.72) 100%);
}

/* The backdrop sits behind everything at z-index -1, between the page
   background and the content. Forcing position/z-index onto body children
   instead would override the nav's position:fixed and break it on every page,
   so nothing here touches content at all. */
html { background: #070d1c; }
body {
  /* Gradients are background-IMAGES, so clearing only the colour left the old
     page gradient sitting on top of the sky. Both have to go for the sky to
     actually replace the old background. */
  background-color: transparent !important;
  background-image: none !important;
}

/* Nothing on a phone should ever scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* index.html paints its own full-viewport backdrop (an aurora wash and a dot
   grid) from the old design. The sky replaces that, so they come off on any
   page the sky is loaded on. They do not exist anywhere else. */
.hp-aurora, .hp-grid { display: none !important; }