/* ------------------------------------------------------------------------
 * ccx-bgmolten.css
 *
 * Where the liquid metal sheet of assets/ccx-bgmolten.js sits, how far it
 * reaches down the page, and what stands there instead when the shader
 * cannot run.
 *
 * Everything the sheet looks like is drawn in the shader. What is decided
 * here is geometry, and geometry belongs in a stylesheet: a block that grows
 * a line taller, or a window of another size, is then a number in a rule
 * rather than a rebuild of the canvas.
 * --------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * THE LAYER
 *
 * The layer is the first child of the opening block and has to end up
 * behind everything that block holds, without any element inside it
 * knowing about it. A negative z-index does that: it is painted after the
 * background of the block 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
 * ends up 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 itself is painted nor its
 * layout. It was checked first that no element inside these two blocks
 * uses a blend mode, because a blend mode is the only thing a new stacking
 * context would change.
 *
 * The canvas is wrapped in a plain div rather than being positioned
 * directly, for two reasons. The still fallback needs something to paint
 * on that is not the canvas, and a pseudo element would have been the
 * obvious alternative: Elementor sets left, width, height and border on
 * .e-con::before, so a pseudo element here would have had to undo four
 * properties before it could be used, and that trap has already cost this
 * site two rounds. A div owes nothing to anybody.
 * -------------------------------------------------------------------- */
.ccbm-host {
  position: relative;
  isolation: isolate;
}

.ccbm-host > .ccbm-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  /* Both blocks start ten pixels above the top of the page content, so the
   * default reach is measured from there. The two mounting places restate
   * it below; this value is what a third one would start from. */
  height: 900px;
  /* Where the sheet is allowed to be seen.
   *
   * The first hundred pixels are held clear because the navigation stands
   * there. The header is a shared template that this round does not touch,
   * its background is transparent, and a moving texture behind eight
   * sixteen pixel links is the one place where a background of this kind
   * would really cost something. So the sheet begins below it.
   *
   * The lower end fades out rather than stopping, because the block
   * continues past the opening and a straight edge across the page would
   * read as a seam. */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 100px,
    rgba(0,0,0,1) 200px,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 100px,
    rgba(0,0,0,1) 200px,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0) 100%);
}

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

/* --------------------------------------------------------------------
 * THE TWO MOUNTING PLACES
 *
 * Both openings begin at the same height, because both pages are built on
 * the same header and the same first heading offset: the headline starts
 * 220 pixels down. They end at different heights, because one headline
 * runs to three lines and the other to two.
 *
 * Services: headline 240 to 475 in the coordinates of the layer, standfirst
 * to 590, button to 655, and the next section announces itself with a pill
 * at 834. Full strength therefore to 540 and gone before the pill.
 *
 * Expertise: headline 230 to 394, standfirst to 482, button to 546, and the
 * second heading of the page follows at 696. A hundred pixels less of
 * everything, so a hundred pixels less of sheet.
 * -------------------------------------------------------------------- */
.ccbm-host.ccbm-services > .ccbm-layer { height: 900px; }

.ccbm-host.ccbm-expertise > .ccbm-layer { height: 800px; }

/* --------------------------------------------------------------------
 * WHEN THE SHADER CANNOT RUN
 *
 * No WebGL 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 is left is a still version of the same material in the same three
 * colours. It is not the same picture and does not pretend to be, but it
 * is a warm sheen over the navy rather than a hole where a background was.
 *
 * The strongest stop is the silver at a tenth, which is half of what the
 * shader is allowed to reach, so this can never be the louder of the two.
 * -------------------------------------------------------------------- */
.ccbm-host > .ccbm-layer.ccbm-flat {
  background-image:
    radial-gradient(58% 44% at 26% 34%, rgba(215,220,232,.10) 0%, rgba(215,220,232,0) 64%),
    radial-gradient(46% 38% at 73% 56%, rgba(255,142,43,.075) 0%, rgba(255,142,43,0) 68%),
    radial-gradient(86% 66% at 50% 16%, rgba(31,42,74,.50) 0%, rgba(31,42,74,0) 72%);
}

/* --------------------------------------------------------------------
 * NARROW WINDOWS
 *
 * Under 1025 pixels the script does not build a sheet 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 sheet 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) {
  .ccbm-host > .ccbm-layer { display: none; }
}

/* On paper the sheet is a grey haze that says nothing and costs ink. */
@media print {
  .ccbm-host > .ccbm-layer { display: none; }
}