body {
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  inset: -16vh -12vw;
  background:
    linear-gradient(118deg, transparent 0 36%, rgba(215, 179, 106, 0.2) 47%, transparent 60%),
    linear-gradient(24deg, transparent 0 38%, rgba(106, 166, 255, 0.14) 50%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(244, 240, 232, 0.06) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(0deg, rgba(244, 240, 232, 0.04) 0 1px, transparent 1px 112px);
  background-position:
    0% 50%,
    100% 50%,
    0 0,
    0 0;
  background-size:
    180% 180%,
    160% 160%,
    112px 112px,
    112px 112px;
  opacity: 0.72;
  transform: translate3d(0, 0, 0);
  animation: explorer-field-drift 16s ease-in-out infinite alternate;
}

body::after {
  background-image: radial-gradient(rgba(244, 240, 232, 0.42) 0 1px, transparent 1.5px);
  background-position: 0 0;
  background-size: 118px 118px;
  mask-image: linear-gradient(180deg, transparent 0, black 14%, black 88%, transparent 100%);
  opacity: 0.28;
  animation: explorer-stellar-drift 26s linear infinite;
}

body > * {
  position: relative;
  z-index: 1;
}

.site-header {
  z-index: 20;
}

@keyframes explorer-field-drift {
  0% {
    background-position:
      0% 48%,
      100% 52%,
      0 0,
      0 0;
    transform: translate3d(-4vw, -2vh, 0) scale(1);
  }

  100% {
    background-position:
      100% 52%,
      0% 48%,
      112px 40px,
      -56px 112px;
    transform: translate3d(4vw, 2vh, 0) scale(1.035);
  }
}

@keyframes explorer-stellar-drift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 236px 354px;
  }
}

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