/* ------------------------------------------------------------------------
 * ccx-bgblinds.css
 *
 * Where the slat field of assets/ccx-bgblinds.js sits and how far it reaches.
 * Everything it looks like is in the shader; what is decided here is geometry
 * and where the field is allowed to be seen.
 *
 * The layer is the first child of its block and is painted behind everything
 * that block holds. A negative z-index does that, and for it to stay inside
 * the block rather than climbing out to the root, the block is made a
 * stacking context with isolation - the quietest way to say so, because
 * unlike a z-index of its own it changes neither paint order nor layout.
 *
 * A plain div rather than a pseudo element, because Elementor sets left,
 * width, height and border on .e-con::before and a decoration there would
 * have to undo four properties first. That trap has cost this site two
 * rounds already.
 * --------------------------------------------------------------------- */

.ccbl-host {
  position: relative;
  isolation: isolate;
}

.ccbl-host > .ccbl-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

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

/* --------------------------------------------------------------------
 * THE THREE PLACES ON /about/
 *
 * The reaches below are the ones measured for the field this replaces, and
 * they are kept because they were measured against the page and not against
 * the effect: they say where a moving ground may be seen on this page, which
 * has not changed just because the ground is now made of slats.
 *
 * OPENING. The block runs 1704 pixels and the headline stands in the top
 * 700 of it. The field is held out of that band twice over: the navigation
 * sits across the first hundred pixels, and the opening line carries a word
 * left as an outline whose filling is an opaque navy - a moving picture
 * behind that word would show as a still block inside the letters.
 *
 * TEAM AND CLOSING. Both carry a glass plate, and glass is only worth its
 * machinery over something that moves: the plate bends what is behind it
 * along its rim, and a plate over flat navy bends nothing.
 * -------------------------------------------------------------------- */
.ccbl-host.ccbl-hero > .ccbl-layer {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 830px,
    rgba(0,0,0,1) 1020px,
    rgba(0,0,0,1) 84%,
    rgba(0,0,0,0) 96%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 830px,
    rgba(0,0,0,1) 1020px,
    rgba(0,0,0,1) 84%,
    rgba(0,0,0,0) 96%);
}

/* Both of the others fade in and out at both ends, so no field ever finishes
 * on a straight line across the page. */
.ccbl-host.ccbl-team > .ccbl-layer,
.ccbl-host.ccbl-cta > .ccbl-layer {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%);
}

/* The closing block is short and the plate on its outlined button sits in
 * the middle of it, so the field reaches past the block on both sides rather
 * than fading almost as soon as it has begun. */
.ccbl-host.ccbl-cta > .ccbl-layer {
  top: -120px;
  height: calc(100% + 200px);
}

/* --------------------------------------------------------------------
 * WHEN THE SHADER CANNOT RUN
 *
 * No context, a program that will not link, or a context lost to a sleeping
 * laptop: the script drops the canvas and marks the layer, and what stands
 * there is a still version of the same idea - upright bands in the same two
 * colours over the page navy. It is not the same picture and does not
 * pretend to be, but the rule of this site is that there is always a ground,
 * and a still ground keeps that rule where a hole would break it.
 *
 * The strongest stop is the silver at eight hundredths, below what the
 * shader is allowed to reach, so this can never be the louder of the two.
 * -------------------------------------------------------------------- */
.ccbl-host > .ccbl-layer.ccbl-flat {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(215,220,232,.08) 0 1px,
      rgba(215,220,232,0) 1px 78px),
    radial-gradient(56% 44% at 28% 34%, rgba(255,142,43,.07) 0%, rgba(255,142,43,0) 68%),
    radial-gradient(86% 66% at 62% 24%, rgba(31,42,74,.40) 0%, rgba(31,42,74,0) 74%);
}

/* Under 1025 the field does not mount at all (the script returns before it
 * builds), so there is nothing to hide here. This rule only covers a window
 * dragged narrow while the page stands. */
@media (max-width: 1024px) {
  .ccbl-host > .ccbl-layer { display: none; }
}