/* 03-background.css — Animated grid + aurora blur background.
   Theme-aware via --grid-line / --aurora-* vars (per-scheme overrides here).
   Driven by public_html/js/background-animator.js which mutates --grid-x/y
   and --aurora-x1/y1/x2/y2/rot on body via rAF.
   Edit here when tweaking the background effect or adding a scheme tint.
   Was: app.css lines 972–1108. */

/* =========================================================================
   Animated grid background (sitewide). Theme-aware via --grid-line which
   each scheme overrides per its accent hue. JS in public/js/background-
   animator.js drifts the whole layer at 2–6 px/sec via --grid-x / --grid-y
   (set on body). Alphas tuned so the slow drift is *visible* at a glance
   without overpowering content sitting on top — minor lines stay subtle,
   major (every 240px) carry the motion cue.
   ========================================================================= */
:root{          --grid-line: rgba(255,255,255,.35); --grid-line-strong: rgba(255,255,255,.70); }
[data-scheme="1"]{  --grid-line: rgba(255,100,0,.55);   --grid-line-strong: rgba(255,100,0,.95);  }
[data-scheme="3"]{  --grid-line: rgba(0,255,156,.50);   --grid-line-strong: rgba(0,255,156,.90);  }
[data-scheme="5"]{  --grid-line: rgba(139,92,246,.55);  --grid-line-strong: rgba(139,92,246,.92); }
[data-scheme="17"]{ --grid-line: rgba(88,166,255,.50);  --grid-line-strong: rgba(88,166,255,.90); }
[data-scheme="7"]{  --grid-line: rgba(255,185,0,.28);   --grid-line-strong: rgba(255,185,0,.55);  }

body{ position: relative; isolation: isolate; }

/* Grid offset vars driven by background-animator.js. Defaults are 0 so the
   first paint before JS runs looks identical to a static grid. */
body{ --grid-x: 0px; --grid-y: 0px; }

body::before{
  content: "";
  position: fixed;
  top: -50%; left: -50%;
  width: 200vw; height: 200vh;
  background-image:
    /* Major grid lines (every 240px) */
    linear-gradient(to right,  var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px),
    /* Minor grid lines (every 60px) */
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 60px 60px, 60px 60px;
  /* All four layers drift together — JS sets one offset, all four shift in
     unison so the major + minor grid stays aligned. */
  background-position:
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y);
  transform: rotate(-8deg) skewY(-2deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: -1;
  will-change: background-position;
}

/* ADDED 2026-04-30: full-viewport overlay that sits ABOVE the rotated orange
   grid (body::before, z-index:-1) but BELOW all UI panels. Driven by the real
   <div id="bg-overlay"> in layouts/app.blade.php — pseudo-element approach
   was unreliable with backdrop-filter, so we use a real DOM node. Tweak the
   two CSS vars below to dial the look. */
:root{
  --bg-overlay-tint: rgba(0, 0, 0, 0.727); /* color + opacity of the wash */
  --bg-overlay-blur: 0px;                 /* set >0 to blur the grid behind */
}
#bg-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--bg-overlay-tint);
  backdrop-filter: blur(var(--bg-overlay-blur));
  -webkit-backdrop-filter: blur(var(--bg-overlay-blur));
  z-index: -1; /* same level as grid; paints on top because it's later in DOM */
}

/* DISABLED 2026-04-30: this top-layer overlay was rendering as white straight
   horizontal/vertical lines over the rotated orange grid. Commented (not
   deleted) so we can restore it quickly if removal turns out to be wrong. */
/*
html::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-strong) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px;
  background-position:
    var(--grid-x) var(--grid-y),
    var(--grid-x) var(--grid-y);
  opacity: .35;
  mix-blend-mode: screen;
  z-index: 9999;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce){
  html::after{ display: none; }
}
*/

/* Aurora blur layer — two large theme-tinted blobs drifting slowly above the
   grid but behind content. mix-blend-mode lets them tint the grid below
   instead of just sitting on top, so the whole backdrop breathes a bit. */
:root{
  --aurora-1: rgba(255,255,255,.14);
  --aurora-2: rgba(255,255,255,.10);
}
[data-scheme="1"]{  --aurora-1: rgba(255,140,90,.55);  --aurora-2: rgba(180,80,180,.40); }
[data-scheme="3"]{  --aurora-1: rgba(0,255,156,.40);   --aurora-2: rgba(0,180,255,.32); }
[data-scheme="5"]{  --aurora-1: rgba(139,92,246,.55);  --aurora-2: rgba(255,80,200,.40); }
[data-scheme="17"]{ --aurora-1: rgba(88,166,255,.50);  --aurora-2: rgba(63,185,80,.38); }
[data-scheme="7"]{  --aurora-1: rgba(255,185,0,.20);   --aurora-2: rgba(79,179,255,.18); }

/* Position vars driven by background-animator.js via rAF; the defaults here
   are what shows if the JS hasn't run yet (no flash-of-unstyled). */
body{
  --aurora-x1: 28%;
  --aurora-y1: 38%;
  --aurora-x2: 72%;
  --aurora-y2: 62%;
  --aurora-rot: 0deg;
}
body::after{
  content: "";
  position: fixed;
  inset: 0;                          /* exactly the viewport */
  background:
    /* Fixed-radius circles so size stays consistent as the centers move */
    radial-gradient(circle 48vmax at var(--aurora-x1) var(--aurora-y1), var(--aurora-1) 0%, transparent 65%),
    radial-gradient(circle 52vmax at var(--aurora-x2) var(--aurora-y2), var(--aurora-2) 0%, transparent 65%);
  background-repeat: no-repeat;
  filter: blur(70px) saturate(1.25);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  transform: rotate(var(--aurora-rot));
  transform-origin: center center;
  /* No CSS animation — JS rAF mutates the vars and the browser interpolates
     the radial-gradient positions on every paint. */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}