body {
  background-color: #02060d;
  background-image:
    linear-gradient(90deg, rgba(2, 6, 13, 0.92) 0%, rgba(2, 6, 13, 0.78) 36%, rgba(2, 6, 13, 0.34) 70%, rgba(2, 6, 13, 0.08) 100%),
    linear-gradient(180deg, rgba(2, 6, 13, 0.04) 0%, rgba(2, 6, 13, 0.1) 54%, rgba(2, 6, 13, 0.7) 100%),
    url("../brand/sysdiag-background-style.png");
  background-position: center, center, top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover, cover, max(100vw, 1438px) auto;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  contain: strict;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.ambient::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 17%, rgba(219, 250, 255, 0.9) 0 1px, rgba(57, 216, 255, 0.24) 1.4px, transparent 2.7px),
    radial-gradient(circle at 18% 72%, rgba(127, 160, 255, 0.72) 0 1px, transparent 2.4px),
    radial-gradient(circle at 29% 31%, rgba(200, 246, 255, 0.72) 0 1px, transparent 2.3px),
    radial-gradient(circle at 42% 83%, rgba(57, 216, 255, 0.62) 0 1px, transparent 2.5px),
    radial-gradient(circle at 56% 14%, rgba(151, 177, 255, 0.68) 0 1px, transparent 2.4px),
    radial-gradient(circle at 67% 66%, rgba(211, 249, 255, 0.82) 0 1px, rgba(57, 216, 255, 0.18) 1.5px, transparent 3px),
    radial-gradient(circle at 78% 27%, rgba(57, 216, 255, 0.68) 0 1px, transparent 2.5px),
    radial-gradient(circle at 88% 76%, rgba(148, 174, 255, 0.68) 0 1px, transparent 2.4px),
    radial-gradient(circle at 95% 44%, rgba(218, 250, 255, 0.72) 0 1px, transparent 2.6px),
    radial-gradient(circle at 72% 8%, rgba(57, 216, 255, 0.46) 0 1px, transparent 2.2px),
    radial-gradient(circle at 35% 55%, rgba(116, 153, 255, 0.5) 0 1px, transparent 2.2px),
    radial-gradient(circle at 12% 43%, rgba(57, 216, 255, 0.5) 0 1px, transparent 2.3px);
  content: "";
  opacity: 0.5;
  filter: drop-shadow(0 0 5px rgba(57, 216, 255, 0.34));
  animation: ambient-stars-breathe 11s ease-in-out infinite alternate;
}

.ambient::after {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 52vw;
  width: clamp(230px, 18vw, 370px);
  background: linear-gradient(90deg, transparent 0 42%, rgba(57, 216, 255, 0.04) 46%, rgba(57, 216, 255, 0.18) 49%, rgba(210, 250, 255, 0.46) 50%, rgba(113, 148, 255, 0.17) 51%, rgba(57, 216, 255, 0.045) 55%, transparent 60%);
  content: "";
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(-4vw, 0, 0) skewX(-13deg);
  animation: ambient-scan-pass 18s ease-in-out infinite;
}

.ambient-grid {
  position: absolute;
  inset: -68px;
  background-image:
    radial-gradient(circle at 73% 18%, rgba(57, 216, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 42%, rgba(113, 148, 255, 0.46) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 63%, rgba(57, 216, 255, 0.38) 0 1px, transparent 2px),
    linear-gradient(rgba(133, 172, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133, 172, 255, 0.055) 1px, transparent 1px),
    linear-gradient(116deg, transparent 0 43%, rgba(57, 216, 255, 0.05) 43.1%, transparent 43.25% 100%),
    linear-gradient(64deg, transparent 0 61%, rgba(113, 148, 255, 0.045) 61.1%, transparent 61.25% 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 68px 68px, 68px 68px, 1320px 820px, 1040px 680px;
  opacity: 0.76;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.82) 62%, transparent 96%);
  transform: translate3d(-68px, -68px, 0);
  animation: ambient-grid-drift 30s linear infinite alternate;
}

.ambient-grid::before {
  position: absolute;
  top: 31%;
  right: 4%;
  width: clamp(260px, 34vw, 620px);
  height: 154px;
  background:
    linear-gradient(90deg, transparent, rgba(57, 216, 255, 0.62) 14%, rgba(57, 216, 255, 0.16) 68%, transparent) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(113, 148, 255, 0.48) 24%, rgba(113, 148, 255, 0.12) 78%, transparent) 0 76px / 84% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(57, 216, 255, 0.48) 8%, rgba(57, 216, 255, 0.1) 62%, transparent) 100% 152px / 72% 1px no-repeat;
  content: "";
  opacity: 0.42;
  transform: scaleX(0.28);
  transform-origin: right center;
  animation: ambient-telemetry 8s ease-in-out infinite;
}

.ambient-grid::after {
  display: none;
}

@keyframes ambient-stars-breathe {
  from {
    opacity: 0.34;
    transform: translate3d(0, 2px, 0);
  }

  to {
    opacity: 0.58;
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes ambient-scan-pass {
  0%,
  18% {
    opacity: 0;
    transform: translate3d(-4vw, 0, 0) skewX(-13deg);
  }

  28%,
  54% {
    opacity: 0.52;
  }

  68%,
  100% {
    opacity: 0;
    transform: translate3d(42vw, 0, 0) skewX(-13deg);
  }
}

@keyframes ambient-grid-drift {
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ambient-telemetry {
  0%,
  100% {
    opacity: 0.24;
    transform: scaleX(0.24);
  }

  42%,
  68% {
    opacity: 0.58;
    transform: scaleX(1);
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  body {
    background-image:
      linear-gradient(90deg, rgba(2, 6, 13, 0.94) 0%, rgba(2, 6, 13, 0.78) 40%, rgba(2, 6, 13, 0.26) 100%),
      linear-gradient(180deg, rgba(2, 6, 13, 0.04) 0%, rgba(2, 6, 13, 0.16) 55%, rgba(2, 6, 13, 0.76) 100%),
      url("../brand/sysdiag-background-style.png");
    background-position: center, center, top right -80px;
    background-size: cover, cover, auto 820px;
  }

}

@media (max-width: 760px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(2, 6, 13, 0.48) 0%, rgba(2, 6, 13, 0.78) 48%, rgba(2, 6, 13, 0.97) 100%),
      linear-gradient(90deg, rgba(2, 6, 13, 0.7) 0%, rgba(2, 6, 13, 0.12) 100%),
      url("../brand/sysdiag-background-style.png");
    background-position: center, center, top right 32%;
    background-attachment: scroll;
    background-size: cover, cover, auto 720px;
  }

  .ambient::before {
    opacity: 0.42;
  }

  .ambient::after,
  .ambient-grid::after {
    display: none;
  }

  .ambient-grid {
    opacity: 0.5;
    animation: none;
    transform: none;
  }

  .ambient-grid::before {
    top: 35%;
    right: -18%;
    opacity: 0.28;
    animation: none;
    transform: scaleX(0.7);
  }
}

@media (max-width: 520px) {
  .ambient::before {
    opacity: 0.36;
  }
}

@media (prefers-contrast: more) {
  body {
    background-image:
      linear-gradient(90deg, rgba(2, 6, 13, 0.98) 0%, rgba(2, 6, 13, 0.91) 52%, rgba(2, 6, 13, 0.5) 100%),
      linear-gradient(180deg, rgba(2, 6, 13, 0.14) 0%, rgba(2, 6, 13, 0.3) 58%, rgba(2, 6, 13, 0.92) 100%),
      url("../brand/sysdiag-background-style.png");
  }
}

@media (prefers-contrast: more) and (min-width: 761px) and (max-width: 1120px) {
  body {
    background-position: center, center, top right -80px;
    background-size: cover, cover, auto 820px;
  }
}

@media (prefers-contrast: more) and (max-width: 760px) {
  body {
    background-image:
      linear-gradient(180deg, rgba(2, 6, 13, 0.82) 0%, rgba(2, 6, 13, 0.92) 48%, rgba(2, 6, 13, 0.99) 100%),
      linear-gradient(90deg, rgba(2, 6, 13, 0.9) 0%, rgba(2, 6, 13, 0.56) 100%),
      url("../brand/sysdiag-background-style.png");
    background-position: center, center, top right 32%;
    background-size: cover, cover, auto 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll;
  }

  .ambient::before,
  .ambient-grid,
  .ambient-grid::before,
  .ambient-grid::after {
    animation: none !important;
    transform: none;
  }

  .ambient::after,
  .ambient-grid::after {
    display: none;
  }
}

@media (forced-colors: active) {
  body {
    background: Canvas;
  }

  .ambient {
    display: none;
  }
}