/* Base site styles you can extend later */
:root {
  /* Grid defaults — override per page before including the partial */
  --grid-opacity: .3;
  --grid-line-alpha: .06;       /* grid line contrast */
  --grid-gap: 40px;             /* distance between lines */
  --grid-r1: rgba(26,169,255,.15);
  --grid-r2: rgba(8,111,177,.18);
  --grid-r1-size: 600px 200px;  /* width height */
  --grid-r2-size: 500px 180px;
  --grid-r1-pos: 20% 0%;        /* x y */
  --grid-r2-pos: 80% 0%;

  /* Optional mask (fade top) — set to 'none' to cover full page */
  --grid-mask: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0.2));
}

body {
  background:#0b0f14;
  color:#fff;
  font-family: Inter, system-ui, Arial, sans-serif;
}

/* Global grid layer — fixed so it spans entire scroll length */
.grid-layer {
  position: fixed;    /* fixed ensures it covers the whole page while scrolling */
  inset: -1px;
  z-index: -1;        /* behind everything */
  pointer-events: none;
}

.grid-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grid-opacity);
  background:
    radial-gradient(var(--grid-r1-size) at var(--grid-r1-pos), var(--grid-r1), transparent 60%),
    radial-gradient(var(--grid-r2-size) at var(--grid-r2-pos), var(--grid-r2), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,var(--grid-line-alpha)) 0 2px, transparent 2px var(--grid-gap)),
    repeating-linear-gradient(90deg, rgba(255,255,255,var(--grid-line-alpha)) 0 2px, transparent 2px var(--grid-gap));
  -webkit-mask: var(--grid-mask);
          mask: var(--grid-mask);
}

/* Accessibility: allow disabling busy visuals globally */
@media (prefers-reduced-motion: reduce) {
  .grid-layer::before {
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,var(--grid-line-alpha)) 0 2px, transparent 2px var(--grid-gap)),
      repeating-linear-gradient(90deg, rgba(255,255,255,var(--grid-line-alpha)) 0 2px, transparent 2px var(--grid-gap));
  }
}