/* ------------------------------------------------------------------------
 * ccx-bghyper.css
 *
 * Where the field of light trails from assets/ccx-bghyper.js sits inside the
 * opening block of /process-tools/, and which parts of that block it is
 * allowed to be seen in.
 *
 * Everything the trails look like is drawn in the script. What is decided
 * here is the box and the two edges that have to stay clear.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * THE LAYER
 *
 * The layer is the first child of the opening block and fills it. It has to
 * end up behind everything the block holds, which a negative z-index does:
 * it is painted after the background of the block, which here is the still
 * artwork Background-2-min.png, and before its content.
 *
 * For that to stay inside the block, the block has to be a stacking context
 * of its own, otherwise a layer at -1 climbs out to the root and lands
 * behind the page background where nobody would ever see it. isolation is
 * the quietest way to say so: unlike a z-index of its own it changes neither
 * the order in which the block is painted nor its layout. It was checked
 * first that nothing inside this block uses a blend mode, because a blend
 * mode is the only thing a new stacking context would change. The three
 * elements inside that do isolate already, the eyebrow pill and the two
 * buttons, isolate themselves and are unaffected.
 *
 * The block already carries position: relative and overflow: hidden, so a
 * trail that runs past the opening is cut at its edge. Both are written out
 * anyway, because this rule has to hold for whatever block the module is
 * pointed at next.
 * -------------------------------------------------------------------- */
.ccbh-host {
  position: relative;
  isolation: isolate;
}

.ccbh-host > .ccbh-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Where the trails are allowed to be seen.
   *
   * The top strip is held clear because the navigation stands there. The
   * opening block begins ten pixels above the top of the page content and
   * the header sits from fourteen to eighty-five, so in the coordinates of
   * this layer the links occupy 24 to 95. Nothing is drawn before 60, and
   * full strength is only reached at 150, well below them. The header is a
   * shared template this round does not touch and its background is
   * transparent, so this is the one place where the field would have been
   * drawing behind sixteen pixel text.
   *
   * The bottom fades out rather than stopping. The block clips at its lower
   * edge, and a row of trails cut off square across the page would read as a
   * seam between the opening and the section under it. The eyebrow pill, the
   * headline and the buttons all sit between 230 and 635, comfortably inside
   * the full strength band.
   */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 60px,
    rgba(0,0,0,1) 150px,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 60px,
    rgba(0,0,0,1) 150px,
    rgba(0,0,0,1) 78%,
    rgba(0,0,0,0) 100%);
}

.ccbh-host > .ccbh-layer > .ccbh-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------
 * NARROW WINDOWS
 *
 * Under 1025 pixels the script does not build the field at all, so a phone
 * and a tablet keep exactly the opening they have today. This rule stands
 * for the one case the script cannot catch on its own: a wide window that
 * is dragged narrow after the field was built. The grid is given up in
 * measure(), and this takes the picture off the screen in the same breath.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ccbh-host > .ccbh-layer { display: none; }
}

/* On paper a speed line is a grey scratch that says nothing and costs ink. */
@media print {
  .ccbh-host > .ccbh-layer { display: none; }
}