/* nexusbiz.tech — the page background: Background Boxes.
 *
 * Background Boxes from 21st.dev (Aceternity UI, background-boxes.tsx, the
 * variant with the colours written out), ported from React and framer-motion.
 * A grid of 64 x 32 cells, skewed into a slanted plane behind the whole page,
 * on the component's slate; the cell under the pointer lights up in one of
 * nine pastels and fades back out when the pointer moves on. It replaces the
 * Ultra Glow kit's aurora, which is switched off here.
 *
 *   - Markup: BOXES_LAYER in scripts/build.mjs writes the layer as the
 *     first thing in <body>, outside the <x-dc> template, so the design
 *     runtime never renders or re-renders it.
 *   - Styles: this file, linked after overrides.css. The component's Tailwind
 *     classes as .bgb-* rules, each under the classes it replaces.
 *   - Behaviour: site/site.js lights the cells (the component's whileHover).
 *
 * The component draws every cell as its own element: 15,000 cells and 3,750
 * plus signs. Here the lines and the plus signs are two tiled backgrounds
 * drawn to the component's exact geometry, and a cell becomes an element only
 * while it is lit. Fixed behind the page, the grid stays put as the page
 * scrolls over it.
 */

/* bg-slate-900. The page colour is the kit's --ug-page, which also paints
   <html> (what shows past the ends of the page) and is PAGE_COLOUR in build.mjs
   (the browser's theme-color and the manifest). The lines and plus signs are
   border-slate-700 and text-slate-700, #334155, written into their svg below. */
:root {
  --ug-page: #0f172a;
}

/* The kit's aurora (its fixed body::before), switched off. */
html > body::before { content: none; }

/* The demo's container (h-96 relative w-full overflow-hidden bg-slate-900),
   as large as the window, behind everything (z-index -1, as the aurora was)
   and fixed. Its height is the large viewport's, so a phone's toolbar sliding
   away does not resize it: the grid is laid out in percentages of this box,
   and a resize moves every line. Decoration only: aria-hidden in the markup,
   and no pointer events (site.js works out the cell from the pointer). */
.bgb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  contain: strict;
  background-color: var(--ug-page);
  pointer-events: none;
}

/* The grid: absolute left-1/4 -top-1/4 w-full h-full z-0, and the component's
   inline transform, verbatim. Its -translate-x-1/2 -translate-y-1/2 did
   nothing: the demo is compiled with Tailwind 3.4, where they set `transform`,
   which the inline style overrides. Its flex and p-4 only placed the cells,
   which are placed below instead. */
.bgb-grid {
  position: absolute;
  top: -25%;
  left: 25%;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: translate(-40%, -60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0);
}

/* The lines. Each cell is w-16 h-8 (64 x 32) with border-t and border-r, in a
   column with border-l, inside the grid's p-4: the first cell's box starts at
   (17, 16), every row has a line along its top and every column one down its
   right-hand edge. The component's 150 x 100 cells cover its own box; behind
   a whole window they ran out before the corners of a 2560 x 1600 one, so the
   grid runs on in every direction, keeping its phase: this covers any window
   up to 7680 x 4320. A tiled background is rasterised only where it is seen.
   The tile is an svg of two 1px rects, not two linear-gradients: the grid is
   rasterised at about 1.009x (the transform's largest scale), where a
   gradient's hard stop lands whole on one pixel and a rect is antialiased as
   the component's borders are. Measured against the component in Chrome, the
   gradient lines came out 40% brighter; the svg's are within 2%. */
.bgb-lines {
  position: absolute;
  top: -1904px; /* 16 - 32 x 60 */
  left: -239px; /* 17 - 64 x 4 */
  width: 21120px; /* 64 x 330 */
  height: 11328px; /* 32 x 354 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Crect width='64' height='1' fill='%23334155'/%3E%3Crect x='63' width='1' height='32' fill='%23334155'/%3E%3C/svg%3E");
  background-size: 64px 32px;
}

/* The plus signs: on every other cell of every other column, an svg (h-6 w-10,
   -top-[14px] -left-[22px], stroke-[1px]) drawing "M12 6v12m6-6H6" in a
   24 x 24 viewBox, centred in its 40 x 24 box. One per 128 x 64 tile, the
   first box at (-5, 3); the path is shifted 8px right for the centring. */
.bgb-plus {
  position: absolute;
  top: -1917px; /* 3 - 64 x 30 */
  left: -261px; /* -5 - 128 x 2 */
  width: 21120px; /* 128 x 165 */
  height: 11328px; /* 64 x 177 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Cpath d='M20 6v12m6-6H14' fill='none' stroke='%23334155' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 128px 64px;
}

/* The lit cells, which site.js adds and removes. Under the lines and the plus
   signs, as a cell's own background is under its borders and its neighbours'
   plus signs. */
.bgb-lit {
  position: absolute;
  top: 0;
  left: 0;
}
.bgb-lit > span {
  position: absolute;
  width: 64px;
  height: 32px;
}

/* The demo's vignette: bg-slate-900 over the grid with
   [mask-image:radial-gradient(transparent,white)], so the grid is clear in the
   middle of the window and fades out towards its corners, lit cells too. */
.bgb-mask {
  position: absolute;
  inset: 0;
  background-color: var(--ug-page);
  -webkit-mask-image: radial-gradient(transparent, #fff);
  mask-image: radial-gradient(transparent, #fff);
}

/* Paper is white, and forced colours repaint every surface: the grid is
   decoration in both. */
@media print {
  .bgb { display: none; }
}
@media (forced-colors: active) {
  .bgb { display: none; }
}