body {
    background-color: #101010;
    color: #d0d0d0;
    font-family: "Inter", sans-serif;
    text-rendering: optimizeLegibility;
    margin: 0;
    overflow-x: hidden;
    position: relative;
}

#branding {
    line-height: 1.05rem;
}

#ambient-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
}

.terminal-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.95)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><text x="10" y="50" font-family="monospace" font-size="12" fill="%23003300">010101</text><text x="40" y="70" font-size="10" fill="%23003300">101010</text></svg>') repeat;
}

.terminal-bg,
section {
    background: transparent;
    position: relative;
    z-index: 0;
}

.ascii-border {
    border: 1px solid #003300;
    /* background: rgba(0, 20, 0, 0.15); */
    background: repeating-linear-gradient(45deg, #001100, #001100 2px, transparent 2px, transparent 4px);
    backdrop-filter: blur(2px);
    position: relative;
    z-index: 1;
}

/* CRT scanlines + subtle phosphor glow */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 20;
  background: 
    repeating-linear-gradient(
      to bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.18) 50%,
      rgba(0, 0, 0, 0.18) 52%
    ),
    /* very subtle overall phosphor tint */
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 170, 0, 0.04) 0%,
      transparent 70%
    );
  background-size: 100% 4px, 100% 100%; /* adjust 4px for thicker/thinner lines */
  mix-blend-mode: multiply; /* darkens slightly + blends nicely */
  opacity: 0.75;
  animation: fadeIn 1.5s ease-out forwards;
}


/* Optional: very light CRT curvature (subtle edge vignette) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 
    inset 0 0 80px rgba(0,0,0,0.6),
    inset 0 0 160px rgba(0,0,0,0.4);
  border-radius: 0; /* flat screen feel */
}

/* Enhance bright elements with phosphor-like glow */
.text-terminal-green,
.text-terminal-cyan,
.ascii-border,
canvas {
  filter: drop-shadow(0 0 4px rgba(0, 90, 0, 0.5))
          brightness(1.05);
}