/* ============================================================================
   BG TECH — 10 more tech-abstract backgrounds, drawn as pure CSS.

   Why generated rather than 10 more .jpg files: the existing set is 37 bitmap files and the
   panel already takes a moment to thumbnail them all. These are gradients only - no request,
   no bytes on disk, and they scale to any viewport without resampling. They sit in their own
   "tech" group next to the abstract/featured/datacenter bitmaps.

   Each class paints `--ops-bg-tech`, which the BG picker feeds into the same body layer the
   images use, so selection, opacity and persistence all work identically.
   ============================================================================ */

/* 1. Circuit traces — fine grid with two brighter "bus" lines */
.bgt-circuit {
  --ops-bg-tech:
    linear-gradient(90deg, rgba(56,189,248,.14) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(0deg,  rgba(56,189,248,.14) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(90deg, rgba(56,189,248,.07) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(0deg,  rgba(56,189,248,.07) 1px, transparent 1px) 0 0 / 26px 26px,
    #05080f;
}

/* 2. Hex mesh — parametric hexagon lattice via conic gradients */
.bgt-hex {
  --ops-bg-tech:
    radial-gradient(circle at 50% 50%, rgba(45,212,191,.10) 0 8%, transparent 9%) 0 0 / 46px 80px,
    radial-gradient(circle at 50% 50%, rgba(45,212,191,.07) 0 8%, transparent 9%) 23px 40px / 46px 80px,
    #04090c;
}

/* 3. Node graph — scattered dots of varying weight */
.bgt-nodes {
  --ops-bg-tech:
    radial-gradient(circle at 12% 22%, rgba(167,139,250,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 14%, rgba(167,139,250,.35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 71%, rgba(167,139,250,.45) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 63%, rgba(167,139,250,.30) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 51% 44%, rgba(167,139,250,.50) 0 2px, transparent 3px),
    #07060f;
}

/* 4. Slate grid — the sober one: fine rule grid on near-black, no colour cast */
.bgt-slate {
  --ops-bg-tech:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg,  rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 44px 44px,
    #0a0a0c;
}

/* 5. Metal plate — brushed horizontal grain */
.bgt-brushed {
  --ops-bg-tech:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #14161a, #0b0c0f);
}

/* 6. Aurora — soft diagonal colour bands */
.bgt-aurora {
  --ops-bg-tech:
    linear-gradient(115deg, transparent 34%, rgba(34,211,238,.18) 47%, transparent 60%),
    linear-gradient(115deg, transparent 12%, rgba(129,140,248,.16) 27%, transparent 42%),
    linear-gradient(295deg, transparent 55%, rgba(236,72,153,.12) 72%, transparent 88%),
    #06080e;
}

/* 7. Scanlines — CRT sweep with a soft vignette */
.bgt-scan {
  --ops-bg-tech:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 0%, rgba(94,234,212,.10), transparent 70%),
    #03060a;
}

/* 8. Blueprint — cyanprint rules, heavier every 5th line */
.bgt-blueprint {
  --ops-bg-tech:
    linear-gradient(90deg, rgba(125,211,252,.22) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(0deg,  rgba(125,211,252,.22) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(125,211,252,.09) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg,  rgba(125,211,252,.09) 1px, transparent 1px) 0 0 / 24px 24px,
    #04101c;
}

/* 9. Nebula — offset colour clouds, the busiest of the ten */
.bgt-nebula {
  --ops-bg-tech:
    radial-gradient(ellipse 55% 40% at 22% 28%, rgba(147,51,234,.30), transparent 70%),
    radial-gradient(ellipse 45% 35% at 78% 62%, rgba(14,165,233,.28), transparent 70%),
    radial-gradient(ellipse 40% 30% at 55% 88%, rgba(244,63,94,.18), transparent 70%),
    #05040c;
}

/* 10. Matrix rain — vertical streaks, densest at the top */
.bgt-matrix {
  --ops-bg-tech:
    repeating-linear-gradient(90deg, rgba(34,197,94,.16) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(34,197,94,.10) 0 8px, transparent 8px 34px),
    linear-gradient(180deg, rgba(34,197,94,.10), transparent 55%),
    #020604;
}

/* The tech set paints into the same fixed body layer the bitmaps use, so opacity and the
   background-transparency control apply to it unchanged. Declared on the colour layer so a
   theme's own body background still shows through underneath at partial opacity. */
html[data-bg-tech] body::before {
  background-image: var(--ops-bg-tech, none);
  background-size: auto, auto, auto, auto, auto;
}