/* ============================================================
   material.css  -  Navi surface material: grain and glow
   LOCKED 2026-07-22 - treatment "Atmosphere only".
   Single source of truth. Link on every real page.
   Governed by docs/grain-system.md. Proof: lab/color/grain-drafts.html (draft 02).

   THE ONE RULE: grain appears only where there is TONE to break
   up - a gradient wash or the night glow. On flat --paper or flat
   --surface it reads as dirt, so those get no grain, ever.
   Grain always sits behind content (z-index 1, content z-index 2);
   nothing lands on text, so every computed contrast stays valid.

     TIER 1  .wash + .grain-atmos   light toned sections (hero etc.)
     TIER 2  .night                 dark chapters (glow + grain)
   ============================================================ */

:root{
  /* one grain character for the whole system: fine, mono, and
     contrast-boosted (feComponentTransfer) so it reads as clean
     speckle rather than grey mush. 220px stitched tile, generated,
     no image request. */
  --grain-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the wash : the soft tonal ground grain needs to ride on ----
   A faint cool lift, not a flat fill. Default is a top-centre bloom
   for hero-type sections. Override --wash for other placements. */
.wash{
  background:var(--wash,
    radial-gradient(130% 105% at 50% -8%, #E9F0FF 0%, var(--paper,#F8F9FB) 60%));
}

/* ---- TIER 1 : atmospheric grain on a LIGHT toned surface --------
   Put .grain-atmos on a section that carries a wash (or a photo /
   gradient). soft-light so it only modulates the existing tone -
   never darkens flat white. Do NOT put this on plain paper. */
.grain-atmos{position:relative}
.grain-atmos > *{position:relative;z-index:2}
.grain-atmos::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain-fine);background-size:220px;
  mix-blend-mode:soft-light;opacity:.6;
}

/* ---- TIER 2 : night tone + grain (dark chapters) ---------------
   Tone and grain ship together - grain is invisible on flat dark,
   the tone gives it something to break up. The tone is a "low
   horizon": a wide, low, DESATURATED brightening rising from below,
   plus a faint full-field lift so grain reads top to bottom. This
   deliberately avoids the corner glow-bloom (the AI/SaaS spotlight
   tell) - all the light is stepped Midnight, not saturated Sky.
   Grain at 0.18 overlay: prominent because the field has tone, not
   because the effect is cranked. */
.night{position:relative;overflow:hidden;background:var(--m-950,#0A1A4E)}
.night > *{position:relative;z-index:2}
.night::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(150% 95% at 50% 122%, rgba(120,142,198,.32) 0%, rgba(120,142,198,0) 60%),
             radial-gradient(125% 120% at 50% 38%, rgba(122,140,194,.12) 0%, rgba(122,140,194,0) 72%);
}
.night::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain-fine);background-size:220px;
  mix-blend-mode:overlay;opacity:.18;
}

/* ---- accessibility --------------------------------------------
   Grain is static (no motion concern). High-contrast / forced-colors
   users get no decorative texture. */
@media (forced-colors: active){
  .grain-atmos::after,.night::before,.night::after{display:none}
}