/* ============================================================
   landing-grain.css, OPTION 7: the product's own background treatment.

   NOT A GRAIN EFFECT. The first attempt laid one generic noise layer over
   every band of the page, including the hero, which is not what the product
   does and is not what was asked for (Ameer, 26 Aug: "I do not want one
   generic grainy effect applied to the entire page... use the same subtle
   grain/noise treatment from our existing product backgrounds").

   WHAT THE PRODUCT ACTUALLY DOES. Each capability has its own BACKGROUND, and
   the grain is part of it, not a layer on top of the page:

     bg-trace.css   sets --bgfall and --bg per module: a fall colour and a
                    stack of radial gradients, one set for Investigation, one
                    for Data Intelligence, one for Dashboard
     .screen        paints them: background-color:var(--bgfall);
                    background-image:var(--bg); cover; center
     .screen::before  lays --grain over that, 330px, overlay, at an amount
                    tuned per module: .23 investigation, .24 chat, .22 dashboard

   So a chapter here does the same three things, in the same order, with the
   same values. The chapters are now listed in bg-trace.css beside .lp-mod,
   which was already there for exactly this reason, so --bgfall and --bg
   resolve to the real product values and NOTHING is copied into this file.

   ONLY THE THREE CHAPTERS. The bands between them, the hero, the separators
   and the footer are not product surfaces and take no treatment at all.

   THE EDGES ARE FEATHERED, which is the one thing the app does not need to do.
   In the app a module background fills a fixed 100dvh screen with nothing
   above or below it. Here each chapter has a neighbour, so the product surface
   is masked to nothing at its top and bottom and the page's own #141519 shows
   through at the joins. The treatment is the product's; only its edges know
   they are on a page.
   ============================================================ */

/* the page ground shows at the joins, and the product surface sits on it */
html[data-lp-family="7"] .l7-chapter{position:relative;background:#141519}

/* THE FEATHER IS EASED, NOT LINEAR, and this is the whole of why the joins
   were visible (Ameer, 26 Aug: "it should not have any sharp edges... people
   should not see that").

   A two stop ramp is straight, so where it meets the flat middle its SLOPE
   changes in one step. The eye cannot see a step in brightness that small, but
   it is extremely good at seeing a step in the RATE of change: the crease that
   showed roughly a fifth of the way down each chapter was a Mach band at the
   end of the ramp, not a colour difference.

   So the ramp is a smoothstep, written as the stops of 3t^2-2t^3, which leaves
   and arrives at zero slope. There is nothing for the eye to catch at either
   end of it. It is also longer, 18% rather than 11%, because a longer ramp
   spreads what is left of the transition below the threshold entirely.

   The same feather on the surface and on its grain, so the two arrive and
   leave together and the boundary is never a line. */
html[data-lp-family="7"] .l7-chapter::before,
html[data-lp-family="7"] .l7-chapter::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --l7-feather:linear-gradient(to bottom,
    rgba(0,0,0,0)     0%,
    rgba(0,0,0,.043)  2.25%,
    rgba(0,0,0,.156)  4.5%,
    rgba(0,0,0,.32)   6.75%,
    rgba(0,0,0,.5)    9%,
    rgba(0,0,0,.68)   11.25%,
    rgba(0,0,0,.844)  13.5%,
    rgba(0,0,0,.957)  15.75%,
    rgba(0,0,0,1)     18%,
    rgba(0,0,0,1)     82%,
    rgba(0,0,0,.957)  84.25%,
    rgba(0,0,0,.844)  86.5%,
    rgba(0,0,0,.68)   88.75%,
    rgba(0,0,0,.5)    91%,
    rgba(0,0,0,.32)   93.25%,
    rgba(0,0,0,.156)  95.5%,
    rgba(0,0,0,.043)  97.75%,
    rgba(0,0,0,0)     100%);
  -webkit-mask-image:var(--l7-feather);
  mask-image:var(--l7-feather)}

/* 1. THE MODULE'S OWN BACKGROUND, painted the way .screen paints it */
html[data-lp-family="7"] .l7-chapter::before{
  background-color:var(--bgfall);
  background-image:var(--bg);
  background-size:cover;background-position:center;background-repeat:no-repeat}

/* 2. THE MODULE'S OWN GRAIN OVER IT, at the app's own per-module amount.
      Defaults to the investigation figure; the two others state theirs, which
      is exactly how bg-trace.css states them for .screen::before. */
html[data-lp-family="7"] .l7-chapter::after{
  background:var(--grain) repeat;background-size:330px 330px;
  mix-blend-mode:overlay;opacity:.23}
html[data-lp-family="7"] .l7-chapter[data-module="chat"]::after{opacity:.24}
html[data-lp-family="7"] .l7-chapter[data-module="dashboard"]::after{opacity:.22}

/* the chapter's content sits above its own surface, as the app's UI sits above
   .screen's background and grain */
html[data-lp-family="7"] .l7-chapter > *{position:relative;z-index:1}