/* Soft neon-blue waves cross diagonally between opposite corners. */
@media screen {
  html { background: #000; }
  body.has-site-atmosphere {
    isolation: isolate;
    min-height: 100vh;
    background: #000;
  }
}

.site-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  background: #000;
}

.site-atmosphere::before,
.site-atmosphere::after {
  content: "";
  position: absolute;
  left: -60vw;
  top: -70vh;
  width: 120vw;
  height: 140vh;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side, #005dff 0%, #005dffb3 30%, #005dff00 100%);
  transform: translate3d(var(--wave-start-x), var(--wave-start-y), 0) scale(.86);
}

/* Quiet corner lighting also works without JavaScript. */
.site-atmosphere::before {
  --wave-start-x: var(--wave-a-start-x, 0vw);
  --wave-start-y: var(--wave-a-start-y, 0vh);
  --wave-end-x: var(--wave-a-end-x, 100vw);
  --wave-end-y: var(--wave-a-end-y, 100vh);
  opacity: .24;
}

.site-atmosphere::after {
  --wave-start-x: var(--wave-b-start-x, 100vw);
  --wave-start-y: var(--wave-b-start-y, 100vh);
  --wave-end-x: var(--wave-b-end-x, 0vw);
  --wave-end-y: var(--wave-b-end-y, 0vh);
  opacity: .2;
}

/* Each corner-to-corner journey takes twelve seconds, staggered by six. */
@media (prefers-reduced-motion: no-preference) {
  .site-atmosphere.is-animated::before,
  .site-atmosphere.is-animated::after {
    opacity: 0;
    animation: atmosphere-wave 12s ease-in-out infinite;
  }
  .site-atmosphere.is-animated::after { animation-delay: 6s; }
  .site-atmosphere.is-paused::before,
  .site-atmosphere.is-paused::after { animation-play-state: paused; }
}

@keyframes atmosphere-wave {
  0% { opacity: 0; transform: translate3d(var(--wave-start-x), var(--wave-start-y), 0) scale(.86); }
  40% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(var(--wave-end-x), var(--wave-end-y), 0) scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .site-atmosphere::before,
  .site-atmosphere::after { animation: none; }
}

@media print {
  .site-atmosphere { display: none; }
}