/* ─────────────────────────────────────────────────────────────────────────────
   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.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Global viewport lock — NO horizontal scroll on any surface ──────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, canvas, iframe, svg {
  max-width: 100%;
}
/* Tab strips / filter rows: scroll WITHIN the strip, never the page */
.tab-strip,
.filter-row,
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
/* ─────────────────────────────────────────────────────────────────────── */

#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; }
}

/* ── Desktop app-frame — centered column on branded backdrop ──────
   On large screens, all Ligo surfaces render as a centered app
   container (~720px) with the dark ambient background filling the
   gutters on either side (code rain, aurora, and dot-grid are all
   position:fixed so they span the full viewport regardless).
   Mobile (≤768px): body fills the screen as normal — no change.     */
@media (min-width: 769px) {
  html {
    background: var(--bg, #0a0e1a); /* gutters: branded dark */
  }
  body {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}
