/* ============================================================================
   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);
  --bg-line-faint: rgba(255, 255, 255, 0.025);
  --bg-line-soft:  rgba(255, 255, 255, 0.035);
  --bg-line-clear: rgba(255, 255, 255, 0.05);
  --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; }
}