/* ==========================================================================
   crt.css — the tube, for whichever page is hosting it. See js/crt.js.

   NOTHING HERE NAMES A PAGE. The module puts the classes and the variables on
   whatever element it was told is the room, and the subject selector is the
   one line each page contributes for itself at the bottom — so adding the tube
   to a third page is one selector, not a copy of this file.

   THE LINES ARE A REPEATING GRADIENT rather than an image: it scales with
   whatever it is laid over, costs nothing, and its spacing is a dial instead of
   a baked-in texture.
   ========================================================================== */

.crt{
  position: absolute; inset: 0;
  z-index: 55;
  display: none;
  pointer-events: none;
}
.is-crt-page .crt{ display: block; }

/* The glass itself: lines, then the vignette over them. */
.crt::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,var(--crt-vig, .35)) 100%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,var(--crt-depth, .18)) 0px,
      rgba(0,0,0,var(--crt-depth, .18)) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) var(--crt-scan, 3px));
  /* THE ROLL. Offsetting the whole background rather than animating a
     transform: a transform on a full-screen layer promotes it and repaints it,
     and this is a background-position change on something already composited. */
  background-position: 0 0, 0 var(--crt-roll, 0px);
}

/* ---------------- which element IS a subject -------------------------------
   The module knows this selector for its own purposes; the stylesheet needs it
   too, and naming the host here is cheaper than teaching the module to write a
   class onto thirty elements on every rebuild. Adding the tube to another page
   is one more line in this selector.

   A subject's glass is NOT GENERATED AT ALL outside subject scope — `content`
   is only set inside the rule below — so a page carries nothing while the tube
   is off or covering everything. */
.wgrid.is-crt-subject .wgrid__plate::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,var(--crt-vig, .35)) 100%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,var(--crt-depth, .18)) 0px,
      rgba(0,0,0,var(--crt-depth, .18)) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) var(--crt-scan, 3px));
  background-position: 0 0, 0 var(--crt-roll, 0px);
}