:root { color-scheme: dark; }

* { box-sizing: border-box; }

html,
body,
main,
.field { width: 100%; min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  overflow: hidden;
  background: #05070a url("/assets/background.jpg") center / cover no-repeat fixed;
}

main {
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.field,
.field::before,
.field::after {
  position: absolute;
  inset: -18vmax;
  content: "";
  pointer-events: none;
}

.field {
  background:
    radial-gradient(circle at 17% 23%, rgb(113 225 211 / 34%), transparent 23%),
    radial-gradient(circle at 79% 72%, rgb(247 196 90 / 25%), transparent 27%),
    linear-gradient(124deg, rgb(2 5 10 / 60%), rgb(5 9 14 / 22%) 52%, rgb(1 3 7 / 67%));
  animation: drift 24s ease-in-out infinite alternate;
}

.field::before {
  inset: 0;
  opacity: .45;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 82%) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgb(140 221 210 / 60%) 0 1px, transparent 1.5px);
  background-size: 97px 97px, 151px 151px;
  background-position: 14px 23px, 57px 91px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.field::after {
  inset: 15%;
  border: 1px solid rgb(215 241 239 / 19%);
  border-radius: 50%;
  box-shadow: 0 0 100px rgb(91 210 194 / 13%), inset 0 0 80px rgb(238 195 105 / 8%);
  transform: rotate(-18deg) scale(1.3, .48);
}

@keyframes drift {
  from { transform: scale(1) translate3d(-1%, -1%, 0); }
  to { transform: scale(1.07) translate3d(1%, 1%, 0); }
}

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