/* Shared site atmosphere: one continuous, lightweight background behind all pages. */
body {
  isolation: isolate;
  background-color: #080d1c;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(45, 100, 190, 0.12), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(110, 70, 190, 0.10), transparent 50%),
    radial-gradient(circle at 15% 50%, rgba(30, 70, 150, 0.06), transparent 45%),
    linear-gradient(135deg, #080d1c 0%, #0d1226 40%, #15152d 70%, #1b1731 100%);
  background-attachment: fixed;
}

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

/* Fine grid, circuit traces, faint cloud and server-rack line art, and vignette. */
body::before {
  opacity: 0.62;
  background-image:
    radial-gradient(ellipse at center, transparent 48%, rgba(2, 5, 16, 0.48) 100%),
    linear-gradient(rgba(125, 207, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 207, 255, 0.06) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1040' height='720' viewBox='0 0 520 360' fill='none' stroke='%237dcfff' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M18 82h76v24h48m260 182h-62v-30h-44M340 28v38h38v27h54M22 278h42v-34h44'/%3E%3Ccircle cx='142' cy='106' r='2' fill='%237dcfff'/%3E%3Ccircle cx='292' cy='258' r='2' fill='%237dcfff'/%3E%3Ccircle cx='432' cy='93' r='2' fill='%237dcfff'/%3E%3Cpath d='M208 63c-10 0-18 7-18 16 0 2 0 4 1 6-9 1-15 7-15 15 0 8 7 15 16 15h37c11 0 19-7 19-17 0-8-6-15-14-17-2-10-12-18-26-18Z'/%3E%3Crect x='92' y='180' width='38' height='58' rx='3'/%3E%3Cpath d='M98 192h26m-26 13h26m-26 13h26M101 195h3m-3 13h3m-3 13h3'/%3E%3Crect x='394' y='178' width='38' height='58' rx='3'/%3E%3Cpath d='M400 190h26m-26 13h26m-26 13h26M403 193h3m-3 13h3m-3 13h3'/%3E%3C/svg%3E");
  background-size: auto, 52px 52px, 52px 52px, 1040px 720px;
  background-position: center, center, center, 14% 18%;
  background-repeat: no-repeat, repeat, repeat, repeat;
}

/* A restrained set of data points. The layer drifts only a few pixels over time. */
body::after {
  opacity: 0.34;
  background-image:
    radial-gradient(circle at 7% 19%, rgba(75, 170, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 77%, rgba(181, 116, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 12%, rgba(79, 220, 231, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 58%, rgba(75, 170, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 28%, rgba(181, 116, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 83%, rgba(79, 220, 231, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 16%, rgba(75, 170, 255, 0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 54%, rgba(181, 116, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 96% 90%, rgba(79, 220, 231, 0.55) 0 1px, transparent 2px);
  animation: background-data-drift 36s ease-in-out infinite alternate;
}

@keyframes background-data-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -7px, 0); }
}

nav {
  background: rgba(8, 13, 28, 0.70);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@media (max-width: 700px) {
  body { background-attachment: scroll; }
  body::before { opacity: 0.38; }
  body::after { opacity: 0.20; animation: none; }
  nav { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

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