/* mood_entry.css - the ONE shared cinematic mood layer for the entry cluster
   (index/homepage, /landing, /go, /login). Kong CD84 single-source: one film stock
   across all four so a single tweak lands everywhere [[cd-design-language-single-source]].
   plate + scrim + element grade + film grain. DARK ONLY (brand law: entry surfaces are
   dark; only the post-login surfaces offer light/dark) [[entry-surfaces-dark-only]].

   SCOPE: this file is PURELY the cinematic recipe + the one grain texture. The element
   token VALUES (--el / --el-soft / --el-glow / --void) live per page already - wall.css
   for /go + /login, inline for /landing + the homepage - so this partial never fights an
   existing palette. The three FORM surfaces (go/landing/login) drop the .mood-bg/.mood-scrim
   /.mood-grade/.mood-grain stack behind their card; the homepage shares the SAME --film-grain
   via its per-page .page::after (one film stock) and grades per page on its own.

   Loaded as a plain root stylesheet (served static like wall.css; never under the
   middleware-blocked /lib server paths). L17: ASCII hyphens only. */

:root{
  /* THE film grain - the single fractal-noise stock shared by every entry surface. The homepage
     references it from .page::after; the form surfaces from .mood-grain. One tweak here = all four. */
  --film-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ZJ-403 N9: a default plate so a form surface is NEVER blank on first paint (or if seedMood's JS does not
     run). seedMood overrides --plate with the real per-element pick on JS-ready; this is the floor. */
  --plate:url('/images/mood/calfem/port_1.webp');
}

/* the mood plate - full-bleed cover behind the form. --plate is set per page (region-seeded
   element pool), pointing at a web-weight WebP in /images/mood/ (Kong: WebP only, never the PNG
   master; same naming + size recipe as the existing /images/home/ WebP). */
.mood-bg{position:fixed;inset:0;z-index:0;background-image:var(--plate);background-size:cover;
  background-position:center 34%;transition:background-image .6s ease;}

/* the scrim - a top vignette + a strong bottom-up void pool that SEATS the form so it stays
   legible on ANY plate (the legibility contract), plus a soft centre breath. */
/* ZJ-403 F-F: the upper band is STRENGTHENED (was void 72% -> transparent by 26%, so the headline/subcopy that
   sit in the 0-38% zone washed on bright plates). Now void 84% -> 46% -> transparent only by 38%, before the
   mid-frame breath + the bottom form-seating pool (unchanged). /login gets its own scrim shape (F-F.1, page-local). */
.mood-scrim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--void) 84%, transparent) 0%, color-mix(in srgb,var(--void) 46%, transparent) 18%, transparent 38%, transparent 46%, color-mix(in srgb,var(--void) 80%, transparent) 84%, var(--void) 100%),
    radial-gradient(120% 80% at 50% 30%, transparent 40%, color-mix(in srgb,var(--void) 46%, transparent) 100%);}

/* the element grade - the --el-soft radial vignette that ties the plate to the user's element. */
.mood-grade{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(80% 60% at 50% 88%, color-mix(in srgb,var(--el) 16%, transparent), transparent 70%);}

/* the cinematic over-image layer - the SAME filmic recipe as the homepage .page::after (Kong 20 Jun: ONE
   consistent cinematic feel across home / go / login / landing): film grain at opacity .5 + the inset-void
   vignette, STATIC (the 1.4s shimmer stays removed per N10 motion law). Sits above the plate/scrim/grade,
   below the form card. (Was .07 soft-light = too subtle vs the home page.) */
.mood-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  box-shadow:inset 0 0 200px 40px var(--void);
  background-image:var(--film-grain);}