/* ============================================================
   landing-shader.css, the layer the hero's drifting ground is painted on.

   WHERE IT SITS. Directly over .lp-bg and under everything else, at the same
   fixed full-bleed z-index 0 the ambient ground already uses. The three static
   lights stay where they are underneath it: this ADDS movement to the fold the
   page was tuned against rather than replacing it, so the contrast behind the
   headline is still the one that passed.

   IT ADDS LIGHT AND NEVER TAKES ANY. The shader emits the three lights with an
   alpha and nothing else, so an unlit pixel is transparent and the module's
   background image, its ground and the three static lights all show through.
   The first pass painted the ground into the canvas and composited it with
   `soft-light`, which DARKENED the fold: a near-black layer under soft-light
   subtracts, and measured against the page without it the hero came out
   dimmer than before, which is the opposite of adding an animation to it.

   IT IS ONLY ON THE ONE FOLD. Family 7, option 2, the page as it actually
   stands. .lp-bg is position:fixed and keeps painting behind every section
   below the hero, so an unmasked canvas would drift colour under the product
   films too; the mask fades it out by the end of the first viewport.

   TO TAKE IT OUT: delete the three lines in home.html marked HERO SHADER, or
   restore home.html.bak-shader. Nothing else refers to this file.
   ============================================================ */

.lp-shader{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:none;
  pointer-events:none;
  /* THE FOLD ONLY. Solid across the first viewport, gone by the end of it, so
     the sections below keep the flat opaque grounds they were given. */
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 62vh, transparent 100vh);
          mask-image:linear-gradient(180deg, #000 0, #000 62vh, transparent 100vh);
  /* Normal compositing, because the layer already carries its own alpha. No
     blend mode can be right for both themes: `screen` adds nothing to a
     near-white ground and `multiply` blackens a near-black one. Straight alpha
     behaves the same way on both and keeps the colours the tokens' own. */
  opacity:1;
}

/* SHOWN WHENEVER THE ELEMENT IS ON THE PAGE, and the element is only on
   home.html. It used to be gated on `[data-lp-family="7"][data-lp-v="2"]`,
   which was the live fold and looked tidy, and was a trap: any URL carrying
   `?lp=N` or `?v=1` set a different attribute and the layer silently vanished
   with nothing to say why. Ameer could not see it and there was no way to tell
   from the page whether it was off or broken. A gate that can only ever hide
   the thing it guards is not worth the failure mode. */
.lp-shader{ display:block; }

/* LIGHT IS NOT DARK AT THE SAME WEIGHT. The same tint that reads as a lift on
   a near-black ground reads as a stain on a near-white one, so the layer is
   quieter here and the shader's own strength drops too (see `strength` in
   js/landing-shader.js). */
html[data-theme="light"] .lp-shader{ opacity:.7; }

/* REDUCED MOTION IS ABOUT MOVEMENT, NOT ABOUT COLOUR. The layer used to be
   hidden outright here, which threw away the light as well as the motion and
   made "reduce motion is on" indistinguishable from "this is broken".
   js/landing-shader.js paints one frame and stops instead, so the fold keeps
   its drifting ground's colours and simply holds still. Nothing to hide. */