/* ============================================================
   Vigil dashboard — 3D / motion enhancement layer
   ADDITIVE & non-destructive: loaded after app.css. Puts an
   animated WebGL backdrop behind the (opaque) shell and adds
   depth to interactive surfaces. Calm Audit stays readable.
   ============================================================ */

/* let the fixed canvas show through the empty areas of the shell */
body { background: transparent; }
html { background: var(--bg); }   /* base colour before/without WebGL */

#vigil-fx {
  position: fixed; inset: 0; z-index: -1;   /* above root bg, below content */
  display: block; pointer-events: none;
}

/* depth on hover-able surfaces (transform set inline by fx.js) */
.fx-tilt {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  transform-style: preserve-3d; will-change: transform;
}
.fx-mag { transition: transform .25s cubic-bezier(.22,1,.36,1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  #vigil-fx { display: none; }
  html, body { background: var(--bg); }
  .fx-tilt, .fx-mag { transition: none; transform: none !important; }
}
@media (pointer: coarse) {
  .fx-tilt, .fx-mag { transform: none !important; }
}