/* PBCTF 5.0 — dithered dusk background (dual-canvas with bloom).
   Companion to pbctf-bg.js. Adapted for the forked theme: the canvas sits at
   z-index:-1 behind a transparent body so the glass cards' backdrop-filter can
   sample the field (a z-index:1 content lift isolates the backdrop and kills
   the frost). */

:root {
  --pb-void: #03040a;   /* base: indigo-black, never pure black */
  --pb-glow: #39ff14;   /* brand phosphor — logo and links only  */
  --pb-cell: 10px;      /* LED pixel size                        */
  --pb-field-opacity: 0.33;   /* overall dusk intensity — lower = subtler */
  --pb-bloom-opacity: 0.21;
}

#pb-bg {
  position: fixed;
  inset: 0;
  z-index: -1;                    /* behind body content; lets glass frost it */
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;             /* keeps the bloom's blend local */
  background: var(--pb-void);
}
#pb-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* sharp layer — dimmed so the dusk reads as a quiet backdrop, not a poster */
#pb-a { image-rendering: pixelated; image-rendering: -moz-crisp-edges; opacity: var(--pb-field-opacity); }

/* bloom: the same frame at cell resolution, smoothly upscaled, blurred, screened
   back on. This is what makes the lit pixels read as *light* instead of squares. */
#pb-b {
  image-rendering: auto;
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: var(--pb-bloom-opacity);
}

/* LED gaps, scanlines, hero scrim, vignette. Layers listed first paint on top.
   Every scrim is tinted --pb-void, not black, so it dims without desaturating. */
#pb-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to right,  var(--pb-void) 0 1px, transparent 1px var(--pb-cell)),
    repeating-linear-gradient(to bottom, var(--pb-void) 0 1px, transparent 1px var(--pb-cell)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(58% 44% at 50% 40%, rgba(3,4,10,.62) 0%, rgba(3,4,10,.30) 58%, transparent 100%),
    radial-gradient(130% 100% at 50% 45%, transparent 42%, rgba(3,4,10,.72) 100%);
}

/* Dark base on the root; body must stay transparent so the z-index:-1 canvas
   shows through it (an opaque body would hide it). */
html { background: var(--pb-void) !important; }
body { background: transparent !important; }

/* Navbar chrome intentionally lives only in pbctf.css (Liquid Glass block).
   Declaring .navbar backgrounds here as well means `.navbar.bg-dark` there
   outranks `.navbar` here and the two silently fight over opacity. */
main, .jumbotron, .container { background: transparent !important; }

/* the meadow is brightest at the very bottom, so the footer gets a plinth
   instead of us dimming the one part of the frame that carries the colour */
footer, .footer {
  background: linear-gradient(to top, rgba(3,4,10,.94), rgba(3,4,10,.55)) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

main h1, main h3, main h4, .jumbotron h1, .jumbotron h3, .jumbotron h4 {
  text-shadow: 0 2px 26px rgba(3,4,10,.9), 0 0 3px rgba(3,4,10,.95);
}

@media (max-width: 768px) {
  :root { --pb-cell: 12px; }
  #pb-b { filter: blur(7px); }
}
@media (prefers-reduced-motion: reduce) { #pb-bg canvas { opacity: calc(var(--pb-field-opacity) * 0.9); } }