/* buford.bg WebGL background — site stylesheet.
 *
 * Loads AFTER styles.css and does exactly two jobs: put the canvas behind the
 * page, and put a legibility scrim back under the copy that needs one.
 *
 * Everything is scoped to body.webgl-bg, so a page without that class is
 * completely unaffected — which is also how you turn the whole thing off.
 *
 * Fallback order matters: 100vh before 100svh and long-hand offsets before
 * inset, because a browser that doesn't understand the newer value drops the
 * whole declaration and the layout collapses.
 */

body.webgl-bg {
  /* Stays opaque and dark. Making the body transparent lets the browser's own
     white through, and a half-opacity dark over white is mid-grey — which
     washes an additively-blended scene out to nothing. */
  background-color: var(--ink);
}

/* ---- The WebGL layer -------------------------------------------------- */

body.webgl-bg #lattice {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Ground the page even with no WebGL at all: this gradient is the rung every
   fallback lands on, and it is plain CSS that never depended on the script.
   Same three disposition colours the scene is graded with. */
body.webgl-bg .bg-fallback {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 44% at 20% 14%, rgba(201, 162, 39, 0.10), transparent 70%),
    radial-gradient(52% 48% at 82% 74%, rgba(200, 70, 47, 0.11), transparent 70%),
    var(--ink);
}
body.webgl-bg.webgl-ok .bg-fallback { opacity: 0.4; }

/* Vignette as a fixed DOM layer rather than an EffectComposer pass: visually
   equivalent here, zero draw calls, and no extra files to ship. */
body.webgl-bg .grade {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
body.webgl-bg .grade::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---- Put legibility back ---------------------------------------------- */

/* A column scrim rather than a panel per row. The content sits in a 1080px
   column; on a wide screen that leaves real gutters, and the scene should be
   visible *in* them. So the darkening tracks the column and fades out either
   side, which keeps the field readable around the writing instead of hiding
   behind an opaque card. */
body.webgl-bg main::before,
body.webgl-bg .site-footer::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, calc(var(--shell) + 8rem));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(10, 12, 17, 0.62) 14%,
    rgba(10, 12, 17, 0.62) 86%,
    transparent 100%
  );
}
body.webgl-bg .site-footer::before { content: none; }

body.webgl-bg main { position: relative; z-index: 2; isolation: isolate; }

/* The scrim carries most of the load; the shadow catches the case where a
   bright node drifts directly under a line of type. */
body.webgl-bg .prose p,
body.webgl-bg .prose li,
body.webgl-bg .entry-what,
body.webgl-bg .entry-outcome,
body.webgl-bg .hero-sub {
  text-shadow: 0 1px 10px rgba(10, 12, 17, 0.85);
}

body.webgl-bg h1,
body.webgl-bg h2,
body.webgl-bg .hero-title,
body.webgl-bg .entry-name,
body.webgl-bg .writing-title {
  text-shadow: 0 2px 16px rgba(10, 12, 17, 0.9);
}

/* Forms stay opaque — a half-transparent input is unusable. */
body.webgl-bg input,
body.webgl-bg select,
body.webgl-bg textarea {
  background-color: #11151c;
}

/* The tally is the page's signature and has to sit cleanly on top of the
   scene, so its marks get a hairline separation rather than blending into it. */
body.webgl-bg .tally-mark a {
  box-shadow: 0 0 0 1px rgba(10, 12, 17, 0.55);
}

/* ---- Mobile ----------------------------------------------------------- */

@media (max-width: 767px) {
  /* Less screen, more text per square inch: the scrim goes edge to edge and
     heavier, and the column fade would only make the margins muddy. */
  body.webgl-bg main::before {
    width: 100%;
    background: rgba(10, 12, 17, 0.74);
  }
}