/* Dot Matrix - Aura (lattice).
   The body is the normal dot layer; its pseudo-elements are the two screen
   layers. A body stacking context keeps both under the existing content,
   without wrapping or repositioning the fixed navigation and controls. */
html { background-color: #100e0b; }

body,
body[data-page] {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #100e0b;
  background-image: radial-gradient(circle, rgba(139, 92, 246, 0.2) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* Viewport-sized light layers avoid blurring an entire long page.
   Static gradients need no permanent will-change allocation or entrance fade. */
body::before,
body::after,
body[data-page]::before,
body[data-page]::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: none;
  mask-image: none;
  transform: translateZ(0);
  animation: none;
  transition: none;
  clip-path: inset(0);
}

body::before,
body[data-page]::before {
  z-index: -2;
  background: radial-gradient(circle at 40% 40%, rgba(124, 58, 237, 0.24) 0%, transparent 50%);
  filter: blur(175px);
}

body::after,
body[data-page]::after {
  z-index: -1;
  background: radial-gradient(circle at 70% 65%, rgba(168, 85, 247, 0.14) 0%, transparent 40%);
  filter: blur(138px);
}

@media (min-width: 1025px) {
  body::before,
  body[data-page]::before { filter: blur(252px); }
  body::after,
  body[data-page]::after { filter: blur(198px); }
}

/* Retain readable system colors when a visitor requests forced colors. */
@media (forced-colors: active) {
  body,
  body[data-page] { background-color: Canvas; background-image: none; }
  body::before,
  body::after,
  body[data-page]::before,
  body[data-page]::after { display: none; }
}