/* ============================================================================
   SWORT technical background system
   ---------------------------------------------------------------------------
   One visual language, a few variants, applied where composition needs depth.
   Not a different random pattern per section.

   Every background here is:
     - pure CSS gradients, so there is no image request and nothing to cache
     - low contrast: the strongest is 5% alpha, the faintest 2.5%
     - decorative, on a ::before that is aria-hidden by virtue of being generated
       content, and pointer-events: none so it can never intercept a click
     - static: no animation at all, so there is nothing to pause off-screen and
       nothing to disable under reduced motion
     - responsive: pattern pitch scales with a token, not fixed pixels

   Text always stays the dominant layer. The patterns sit behind content at
   z-index 0 with content at 1.

   WHY THE GRAY SECTIONS ARE GOING AWAY
   ------------------------------------
   Two sections used a flat mid-graphite fill (.s-charcoal) as their entire
   visual identity: research "Where collaboration makes sense" and the team
   "How the team is assembled". A flat mid-tone between the black and white
   surfaces reads as neither, which is why it looked weak. They now use a black
   surface with a structural pattern, so the page alternates black and white with
   depth carrying the difference instead of a third undifferentiated tone.
   ========================================================================= */

:root {
  --bg-pitch:      clamp(28px, 3.4vw, 46px);
  /* Raised for legibility, measured rather than eyeballed.

     On the #050505 base these previously rendered at rgb(11,11,11) to
     rgb(18,18,18): an sRGB delta of 6 to 13 and a contrast ratio of 1.04:1 to
     1.09:1, which is below the threshold at which most people can see a line at
     all on an ordinary screen. That is why the satellite geometry read as empty
     black.

     The new values render at rgb(16,16,16) to rgb(27,27,27), a delta of 11 to
     22 at 1.07:1 to 1.18:1. Detectable, and still far below the foreground:
     body gray sits at 6.2:1 and white at 20.4:1 against the same base, so the
     background remains 5x to 35x less prominent than the text it sits behind.

     Neutral white only. No hue introduced, so the colour gate is unaffected.
     Geometry, animation, composition and section dimensions are untouched. */
  --bg-line-faint: rgba(255, 255, 255, 0.045);
  --bg-line-soft:  rgba(255, 255, 255, 0.062);
  --bg-line-clear: rgba(255, 255, 255, 0.088);
  --bg-ink-faint:  rgba(3, 3, 3, 0.030);
  --bg-ink-soft:   rgba(3, 3, 3, 0.045);
}

/* Shared plumbing. Any .bg-* variant gets its layer from here. */
[class*="bg-"][class*="grid"], [class*="bg-"][class*="graph"],
[class*="bg-"][class*="trace"], [class*="bg-"][class*="orbital"],
[class*="bg-"][class*="signal"] { position: relative; isolation: isolate; }

[class*="bg-"][class*="grid"] > *, [class*="bg-"][class*="graph"] > *,
[class*="bg-"][class*="trace"] > *, [class*="bg-"][class*="orbital"] > *,
[class*="bg-"][class*="signal"] > * { position: relative; z-index: 1; }

.bg-coordinate-grid::before, .bg-sensor-graph::before,
.bg-avionics-trace::before, .bg-orbital-line::before,
.bg-topographic-signal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Fades out toward the bottom so consecutive patterned sections do not stack
     into a busy field at their shared edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* ── Coordinate grid: engineering measurement field ───────────────────────
   Two pitches, the finer one fainter, so it reads as a scale rather than
   graph paper. */
.bg-coordinate-grid::before {
  background-image:
    linear-gradient(to right, var(--bg-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-line-soft) 1px, transparent 1px),
    linear-gradient(to right, var(--bg-line-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-line-faint) 1px, transparent 1px);
  background-size:
    calc(var(--bg-pitch) * 4) calc(var(--bg-pitch) * 4),
    calc(var(--bg-pitch) * 4) calc(var(--bg-pitch) * 4),
    var(--bg-pitch) var(--bg-pitch),
    var(--bg-pitch) var(--bg-pitch);
}

/* ── Sensor graph: node relationships. Diagonals crossing at shallow angles,
   which reads as a dependency map rather than a lattice. ───────────────── */
.bg-sensor-graph::before {
  background-image:
    repeating-linear-gradient(24deg, transparent 0 calc(var(--bg-pitch) * 2.4),
      var(--bg-line-soft) calc(var(--bg-pitch) * 2.4) calc(var(--bg-pitch) * 2.4 + 1px)),
    repeating-linear-gradient(-24deg, transparent 0 calc(var(--bg-pitch) * 3.1),
      var(--bg-line-faint) calc(var(--bg-pitch) * 3.1) calc(var(--bg-pitch) * 3.1 + 1px)),
    radial-gradient(circle at 22% 30%, var(--bg-line-clear) 0 1.5px, transparent 2px),
    radial-gradient(circle at 68% 62%, var(--bg-line-clear) 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 22%, var(--bg-line-soft) 0 1.5px, transparent 2px);
}

/* ── Avionics trace: PCB routing. Right angles and one 45, like real routing. */
.bg-avionics-trace::before {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--bg-pitch) * 3),
      var(--bg-line-soft) calc(var(--bg-pitch) * 3) calc(var(--bg-pitch) * 3 + 1px)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--bg-pitch) * 5),
      var(--bg-line-faint) calc(var(--bg-pitch) * 5) calc(var(--bg-pitch) * 5 + 1px)),
    repeating-linear-gradient(45deg, transparent 0 calc(var(--bg-pitch) * 6),
      var(--bg-line-faint) calc(var(--bg-pitch) * 6) calc(var(--bg-pitch) * 6 + 1px));
}

/* ── Orbital line: long shallow arcs. For footers and closing sections. ─── */
.bg-orbital-line::before {
  background-image:
    radial-gradient(120% 60% at 50% 120%, transparent 58%, var(--bg-line-soft) 58.4%, transparent 59%),
    radial-gradient(150% 70% at 30% 135%, transparent 62%, var(--bg-line-faint) 62.3%, transparent 63%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
}

/* ── Light-surface variant: same language in ink rather than white. ─────── */
.bg-topographic-signal::before {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--bg-pitch) * 3.5),
      var(--bg-ink-faint) calc(var(--bg-pitch) * 3.5) calc(var(--bg-pitch) * 3.5 + 1px)),
    radial-gradient(circle at 12% 18%, var(--bg-ink-soft) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 74%, var(--bg-ink-soft) 0 1.5px, transparent 2px);
}

/* Below the mobile breakpoint the patterns add noise at the pitch the screen can
   show, so the finest layers are dropped rather than shrunk. */
@media (max-width: 480px) {
  .bg-sensor-graph::before, .bg-avionics-trace::before {
    background-image:
      repeating-linear-gradient(90deg, transparent 0 calc(var(--bg-pitch) * 3),
        var(--bg-line-faint) calc(var(--bg-pitch) * 3) calc(var(--bg-pitch) * 3 + 1px));
  }
}

/* Forced colors: remove decoration entirely so it cannot fight the OS palette. */
@media (forced-colors: active) {
  .bg-coordinate-grid::before, .bg-sensor-graph::before,
  .bg-avionics-trace::before, .bg-orbital-line::before,
  .bg-topographic-signal::before { display: none; }
}