/* The site's background field: a faint blue grid that fades out, and two soft blue
   glows drifting slowly behind it. Markup: <div class="blue-field" aria-hidden="true"><i></i><i></i></div>
   inside a positioned section. --low anchors it to the bottom instead of the top. */
.blue-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #fff; }
.blue-field::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(49, 161, 247, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(49, 161, 247, 0.13) 1px, transparent 1px);
  background-size: 116px 30px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000, transparent);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000, transparent);
}
.blue-field i {
  position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(49, 161, 247, 0.16), rgba(49, 161, 247, 0.05) 55%, transparent);
}
.blue-field i:nth-child(1) { top: -22rem; left: 50%; width: 52rem; height: 44rem; margin-left: -26rem; animation: field-drift-a 26s ease-in-out infinite alternate; }
.blue-field i:nth-child(2) { top: 6rem; left: 62%; width: 34rem; height: 30rem; background: radial-gradient(closest-side, rgba(49, 161, 247, 0.11), transparent); animation: field-drift-b 34s ease-in-out infinite alternate; }

.blue-field--low::before {
  background-position: center bottom;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 100%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 100%, #000 10%, transparent 70%);
}
.blue-field--low i:nth-child(1) { top: auto; bottom: -24rem; left: 46%; }
.blue-field--low i:nth-child(2) { top: auto; bottom: 4rem; left: 8%; }

@keyframes field-drift-a {
  0% { transform: translate3d(-14vw, 0, 0) scale(1); }
  50% { transform: translate3d(4vw, 5vh, 0) scale(1.08); }
  100% { transform: translate3d(14vw, -2vh, 0) scale(0.96); }
}
@keyframes field-drift-b {
  0% { transform: translate3d(8vw, -4vh, 0); }
  50% { transform: translate3d(-18vw, 6vh, 0); }
  100% { transform: translate3d(-30vw, -2vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .blue-field i { animation: none; }
}