/* Matrix Grid - sleek metallic grey theme */
:root{
  --mg-bg-1: #0b0c0e; /* deep ink */
  --mg-bg-2: #111216; /* subtle depth */
  --mg-line: rgba(255,255,255,0.04); /* faint grid */
  --mg-accent: rgba(200,210,215,0.06); /* light metallic shimmer */
  --mg-glow: rgba(200,210,215,0.12);
  --mg-sheen: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 15%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0.0) 100%);
}

body.matrix-grid-bg{
  background: radial-gradient(1200px 600px at 10% 10%, var(--mg-bg-2) 0%, var(--mg-bg-1) 40%);
  color: #c9d1d9;
  position:relative;
  overflow-x:hidden;
}

body.matrix-grid-bg::before{
  /* subtle metallic grids */
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(transparent 0, transparent 88%, var(--mg-line) 89%),
    linear-gradient(90deg, transparent 0, transparent 88%, var(--mg-line) 89%);
  background-size: 42px 42px, 42px 42px;
  opacity:0.95;
  mix-blend-mode: overlay;
}

body.matrix-grid-bg::after{
  /* moving metallic sheen */
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: var(--mg-sheen), radial-gradient(circle at 75% 20%, rgba(180,190,200,0.02), transparent 20%), radial-gradient(circle at 25% 80%, rgba(180,190,200,0.02), transparent 20%);
  mix-blend-mode: screen;
  opacity:0.9;
  animation: mg-sheen 9s linear infinite;
}

@keyframes mg-sheen{
  0%{transform:translateY(-8%) translateX(-10%) rotate(0deg);opacity:0.85}
  50%{transform:translateY(6%) translateX(10%) rotate(2deg);opacity:1}
  100%{transform:translateY(-8%) translateX(-10%) rotate(0deg);opacity:0.85}
}

/* faint metallic nodes that light up on hover (optional utility) */
.matrix-node{position:relative;z-index:1}
.matrix-node::before{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.02),transparent);opacity:0.7}

/* canvas fallback area (kept at z-index 0) */
#matrix-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

@media (max-width:800px){
  body.matrix-grid-bg::before{background-size:30px 30px,30px 30px}
  body.matrix-grid-bg::after{animation-duration:12s}
}

/* small helpers to tone down contrast on panels above background */
.panel-ambient{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border:1px solid rgba(255,255,255,0.03)}