/* Matrix background and layering */

/* Theme variables
   --matrix-lead: space-separated RGB for the leading character color (e.g., "40 255 180")
   --matrix-trail-alpha: alpha for the trail fade (0..1)
   --matrix-vg: space-separated RGB used for vignette glows behind the canvas
*/
:root {
  --matrix-lead: 40 255 180;     /* default green-teal */
  --matrix-trail-alpha: 0.07;    /* subtle trail */
  --matrix-vg: 0 60 40;          /* vignette RGB for green theme */
}

/* Optional blue theme. Apply either body.matrix-blue or body[data-matrix-theme="blue"] */
body.matrix-blue,
body[data-matrix-theme="blue"] {
  --matrix-lead: 90 170 255;     /* blue lead color */
  --matrix-trail-alpha: 0.06;    /* slightly lighter trail for blue */
  --matrix-vg: 0 40 80;          /* vignette RGB for blue */
}

/* Full-screen canvas background for Matrix effect */
.matrix-bg {
  background: #0b0f10;
}

#matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;

  /* Ensure the canvas never intercepts scroll/touch/pointer events */
  pointer-events: none;
  touch-action: none;

  /* Subtle vignette-style glow anchors (theme-aware) */
  background:
    radial-gradient(1200px 800px at 10% 10%, rgb(var(--matrix-vg) / 0.12), rgba(0, 0, 0, 0)) fixed,
    radial-gradient(1200px 800px at 90% 90%, rgb(var(--matrix-vg) / 0.12), rgba(0, 0, 0, 0)) fixed;
}

/* Ensure content sits above the canvas */
.page-container {
  position: relative;
  z-index: 2;
}