/* AIEP Lattice — stylesheet companion.
   Drop into /static/css/aiep-lattice.css and link on auth / portal / lock / reset pages.
   All rules scoped to .aiep-lattice-host (or the <canvas id="aiep-lattice">) to avoid bleed.

   Pairs with aiep-lattice.js. Keep CSS here; keep WebGL shader in JS.
*/

/* ── Theme tokens. Dark is default; light kicks in via html[data-theme="light"]. ──
   Surfaces that need panels (login brand, MFA card, reset card) read these tokens
   so swapping the root theme flips everything at once.
*/
:root{
  --aiep-bg:            #080808;
  --aiep-surface:       rgba(15,15,15,0.72);
  --aiep-surface-strong:rgba(15,15,15,0.88);
  --aiep-border:        rgba(255,255,255,0.10);
  --aiep-border-strong: rgba(255,255,255,0.18);
  --aiep-text:          #ffffff;
  --aiep-text-secondary:rgba(255,255,255,0.55);
  --aiep-text-muted:    rgba(255,255,255,0.28);
  --aiep-accent:        #ffffff;
  --aiep-on-accent:     #080808;
  --aiep-success:       #10b981;
  --aiep-error:         #ef4444;
  --aiep-blur:          blur(28px) saturate(160%);
  --aiep-radius:        12px;
}
html[data-theme="light"]{
  --aiep-bg:            #f6f7f9;
  --aiep-surface:       rgba(255,255,255,0.78);
  --aiep-surface-strong:rgba(255,255,255,0.92);
  --aiep-border:        rgba(10,14,22,0.10);
  --aiep-border-strong: rgba(10,14,22,0.20);
  --aiep-text:          #0a0e16;
  --aiep-text-secondary:rgba(10,14,22,0.60);
  --aiep-text-muted:    rgba(10,14,22,0.32);
  --aiep-accent:        #0a0e16;
  --aiep-on-accent:     #ffffff;
  --aiep-success:       #059669;
  --aiep-error:         #dc2626;
  --aiep-blur:          blur(22px) saturate(140%);
}

/* ── The canvas itself — always full-bleed behind the page. ──
   Never sits above content. Scroll-friendly on long pages (no fixed-inset).
*/
.aiep-lattice-host{
  position: relative;
  isolation: isolate;        /* contain blend modes from child overlays */
  background: var(--aiep-bg);
}
.aiep-lattice-host > .aiep-lattice{
  position: absolute;        /* keyed to .aiep-lattice-host, which sets z-context */
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;      /* clicks pass through to .aiep-lattice-content */
}
/* For full-viewport pages (login, lock, reset) use position:fixed to stay behind scroll */
.aiep-lattice-host.fixed > .aiep-lattice{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* Everything the user actually sees goes in this wrapper so it sits above the canvas. */
.aiep-lattice-content{ position: relative; z-index: 1; }

/* Optional subtle DOM grid overlay (matches the existing login.html grid).
   Use .aiep-grid-overlay on an ::after-ish element inside the host. */
.aiep-lattice-host::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--aiep-grid-line, rgba(255,255,255,0.022)) 1px, transparent 1px),
    linear-gradient(90deg, var(--aiep-grid-line, rgba(255,255,255,0.022)) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.5;
}
html[data-theme="light"]{ --aiep-grid-line: rgba(10,14,22,0.035); }
html[data-theme="light"] .aiep-lattice-host::before{ mix-blend-mode: multiply; }

/* ── Panel/card helpers that look right over the lattice in both themes ── */
.aiep-panel{
  background: var(--aiep-surface);
  border: 1px solid var(--aiep-border);
  backdrop-filter: var(--aiep-blur);
  -webkit-backdrop-filter: var(--aiep-blur);
}
.aiep-card{
  background: var(--aiep-surface-strong);
  border: 1px solid var(--aiep-border);
  border-radius: 22px;
  backdrop-filter: var(--aiep-blur);
  -webkit-backdrop-filter: var(--aiep-blur);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 24px 80px rgba(0,0,0,0.45);
}
html[data-theme="light"] .aiep-card{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 24px 60px rgba(10,14,22,0.10);
}

/* Reduced motion — shader already self-limits, but dim any decorative pulses */
@media (prefers-reduced-motion: reduce){
  .aiep-lattice-host [class*="-pulse"],
  .aiep-lattice-host [class*="-ring"]{
    animation: none !important;
  }
}