/* ============================================================
   Infinite worlds — the site's background (bg/infinite-worlds.js).

   One fixed layer behind every page, the size of the window: the pages scroll
   over it. Until the script has drawn a frame it shows a picture: arriving from
   another page, the picture of where the flight was (the script sets it at
   once); otherwise, on a wide screen, infinite-worlds.png, a still rendered by
   the script itself. The live canvas fades in over it.

   Nothing here darkens the scene. The only darkening is drawn by the script
   itself: behind each line of text, just enough for it to read.
   ============================================================ */

/* Fixed, full-window, behind everything on the page. Its width is the whole window
   (100vw, under the scrollbar too), so a page with a scrollbar and a page without
   one frame the planet in the same place; its height is the large viewport (100lvh),
   so a phone's address bar showing and hiding doesn't resize it. */
.site-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #0A0A0C;
}

/* The picture under the canvas: the carried-over frame (--iw-snap, set by the
   script) or the still. The still is rendered small (about 380px wide) and fills
   the window, so it can never be the page's largest paint; wide screens only,
   because on a phone fetching it would push back the page's own first paint. */
.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--iw-snap, var(--iw-still, none)) center / cover no-repeat;
}
@media (min-width: 960px) {
  .site-bg { --iw-still: url("/bg/infinite-worlds.png"); }
}

.site-bg canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.site-bg.is-live canvas { opacity: 1; }
/* Arriving from another page the picture underneath is the same frame, so the
   scene comes in quickly. */
.site-bg.is-resumed canvas { transition-duration: 0.45s; }
/* A screen that could not keep up keeps one still frame (is-still); nothing to change here. */