/* Background for the home page: the generative PCB drawn by pcb-board.js. Sits behind all content;
   the page's own faint grid pattern is switched off so it doesn't fight the traces. */
:root {
  /* black-and-white scheme for this page: dark grey ground, neutral greys for text (overrides style.css) */
  --bg: #161616;
  --bg-alt: #202020;
  --text: #b8b8b8;
  --text-muted: #8c8c8c;
  --text-bright: #f4f4f4;
  --text-h2: #e2e2e2;

  --bg-pattern: none;
  --bg-pattern-size: auto;
  --bg-pattern-glow: none;
}

#pcb-board {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
  overflow: visible;
  opacity: 0;      /* the board is invisible until the light effects find it (set to 0 to go back to that) */
}

/* The lit copy (only built when some element is set to give off light): the same board, brighter, revealed
   inside a soft halo around each lit element by a mask inside the SVG. */
#pcb-board-glow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  mix-blend-mode: screen;
}

/* Text blocks and project cards are drawn as chips on the board (pcb-board.js), so the page's own opaque
   panels behind them -- which would hide the board -- are switched off on this page. */
.about-text p::before,
.text-panel::before,
.project-card::before {
  display: none;
}

/* The String Art video has the old navy page colour baked into the file. Greyscale turns that navy into about
   #171717 -- almost exactly this page's dark grey -- and the artwork itself is already grey and white. */
.project-card-video--stringart {
  filter: grayscale(1);
}

/* Pulses (PCBBoard.pulse): light travelling along the traces, drawn on a canvas covering the visible part of the
   page (plus a margin) that only animates while a pulse is running. */
#pcb-pulse {
  position: absolute;   /* in the page, so it scrolls with the text; pcb-board.js sizes it and moves it to
                           cover what is in view (top/width/height are set there) */
  top: 0;
  left: 0;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.45;          /* set once by pcb-board.js (PULSE.layerOpacity); it never changes, so nothing on the layer jumps when a pulse starts or ends */
}

/* An element that was held invisible until the light reached it (PCB_SECTIONS in the page) fades in. */
.pcb-fade-in {
  animation: pcb-fade-in 1s ease-out;
}
@keyframes pcb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}