/* ─────────────────────────────────────────────────────────────────────────────
   Ligo AI Studio ambient background — the full layered kit.
   Include on EVERY Ligo-branded surface so the brand reads as one app.
   Pairs with assets/js/ligo-ambient.js (the code-rain "waterfall").
   Extracted from ligotrades-mendoza.html, retoned to the app palette (ava-dashboard.html).

   Three fixed layers, all behind page content:
     z-index -3  #codeRain    — the cascading code-rain "waterfall" (canvas + JS)
     z-index -2  body::before — a faint amber dot-grid that slowly breathes
     z-index -1  body::after  — a slow amber/cyan aurora drift

   USAGE on a page:
     1. <link rel="stylesheet" href="/assets/css/ligo-ambient.css">  (AFTER the page's own <style>)
     2. <script defer src="/assets/js/ligo-ambient.js"></script>
     3. <canvas id="codeRain" aria-hidden="true"></canvas>           (first child of <body>)
     4. Page content wrapper should sit in a positive stacking context
        (e.g. position:relative; z-index:1) so it renders above these layers.
     5. Remove any page-specific body::before / body::after ambient so this kit owns them.
   ───────────────────────────────────────────────────────────────────────────── */

#codeRain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: -3;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 193, 7, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  animation: ligoGridBreathe 8s ease-in-out infinite;
}

@keyframes ligoGridBreathe {
  0%, 100% { opacity: 0.4; background-size: 28px 28px; }
  50%      { opacity: 0.7; background-size: 30px 30px; }
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(255, 193, 7, 0.10), transparent 60%),
    radial-gradient(ellipse 35% 25% at 85% 30%, rgba(0, 212, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 30% 25% at 50% 90%, rgba(255, 193, 7, 0.05), transparent 70%);
  animation: ligoAuroraDrift 22s ease-in-out infinite alternate;
}

@keyframes ligoAuroraDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -2%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}
