/* ════════════════════════════════════════════════════════════════════════════
   bg-atmosphere.css — the background layer's colours and layers (v4.177).

   The surface itself (an irregular gold geometric network whose segments glow
   on and off) is drawn by bg-glow.js into two canvases inside `.bgfx`, the one
   shared layer both pages already had. This file:
     · sets the base: near-black warm brown in the dark theme (about #100D0A,
       with two warm corner glows), warm ivory in the light theme;
     · retires the earlier regular square grids (.bgfx__grid): the new surface
       replaces them in both themes;
     · keeps a broad, slow, soft light field behind the surface (.bgfx__aurora);
     · sizes the canvases and keeps them out of the way.
   The layer is fixed behind the app (z-index 0; .app / .dash are 1), never takes
   a tap, is aria-hidden and is not printed.
   ════════════════════════════════════════════════════════════════════════════ */

/* the old regular grids: gone, in both themes */
.bgfx__grid, .bgfx__grid--far { display: none !important; }

.bgfx__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* dark: near-black, warm undertone, two warm corners (never flat, never brown overall) */
:root:not([data-scheme="light"]) .bgfx {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(120, 66, 22, .22) 0%, transparent 58%),
    radial-gradient(105% 85% at 0% 100%, rgba(84, 46, 15, .18) 0%, transparent 62%),
    rgba(16, 13, 10, .78);
}
:root:not([data-scheme="light"]) .bgfx__aurora {
  background:
    radial-gradient(44% 44% at 16% 20%, rgba(200, 116, 38, .30) 0%, transparent 72%),
    radial-gradient(40% 40% at 86% 74%, rgba(126, 62, 20, .28) 0%, transparent 74%);
  animation: bgxLight 48s ease-in-out infinite alternate;
}

/* light: warm ivory, softer amber light */
:root[data-scheme="light"] .bgfx {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(214, 160, 90, .16) 0%, transparent 58%),
    radial-gradient(105% 85% at 0% 100%, rgba(200, 150, 90, .12) 0%, transparent 62%),
    rgba(252, 246, 234, .88);
}
:root[data-scheme="light"] .bgfx__aurora {
  background:
    radial-gradient(44% 44% at 18% 22%, rgba(245, 170, 60, .20) 0%, transparent 72%),
    radial-gradient(40% 40% at 84% 74%, rgba(214, 140, 60, .16) 0%, transparent 74%);
  animation: bgxLight 56s ease-in-out infinite alternate;
}

@keyframes bgxLight {
  0%   { transform: translate3d(-5%, -3%, 0) scale(1.00); }
  50%  { transform: translate3d( 5%,  4%, 0) scale(1.10); }
  100% { transform: translate3d( 2%, -4%, 0) scale(1.04); }
}

@media (max-width: 640px) {
  .bgfx__aurora { animation-duration: 64s !important; }
}
/* reduced motion: the light field stops too (bg-glow.js holds a few segments softly lit) */
@media (prefers-reduced-motion: reduce) {
  .bgfx__aurora { animation: none !important; }
}
@media print { .bgfx { display: none; } }