/* The world is a fixed, non-interactive layer behind the actual page. Without
   WebGL the same element carries a still gradient and a little grain, and the
   page reads exactly the same. Everything about the page itself is in
   styles.css. */

#atmosphere {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 42% at 50% 108%, #3a2130 0%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 8% 55%, #1a2c52 0%, transparent 70%),
    radial-gradient(ellipse 55% 65% at 92% 35%, #35234f 0%, transparent 70%),
    #0d0f1f;
  transition: opacity 1.4s ease;
}
/* The world fades up over the still backdrop once its first frame exists,
   instead of replacing it in one cut. */
#atmosphere canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
#atmosphere:not([data-state=loading]):not([data-state=fallback]) canvas { opacity: 1; }

/* Grain for the still backdrop only; the running world grains its own frames. */
#atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  transition: opacity 1s;
}
#atmosphere[data-state=fallback]::after, #atmosphere[data-state=loading]::after { opacity: .035; }

/* Focus view: the world fades and this sheet of near-black rises behind it. */
.reality-fade {
  position: fixed;
  inset: 0;
  background: #070911;
  opacity: 0;
  z-index: -2;
  pointer-events: none;
  transition: opacity 1.45s ease;
}
body.focus-mode .reality-fade { opacity: 1; }
/* Lights down: while a build plays the sky dims a little, the way a room does
   when the film starts, and comes back up when it stops. */
body.playing .reality-fade { opacity: .5; }
body.playing.focus-mode .reality-fade { opacity: 1; }

/* A crossfade is not motion, so the world's arrival fades up even when motion
   is reduced; only the world itself stands still. */