/* Guardian Lynx — visual FX layer.
   1) Photo pipeline: any <figure class="themed"> auto-conforms to the theme.
   2) Signal-motif / HUD styles.
   Pairs with the inline <svg class="gl-defs"> filter defs in the page. */

/* hidden SVG filter defs container */
.gl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- photo pipeline ----------
   Usage:
     <figure class="themed themed--duo">
       <img src="assets/photos/whatever.jpg" alt="">
     </figure>
   Modifiers: --duo (teal duotone) · --soft (gentler) · --flush (no edge fade) */
.themed {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #0a0b0d;
  isolation: isolate;            /* keep blend modes local */
}
.themed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* light grade: just enough to feel cohesive with the dark page —
     colors (Ferrari red, umbrella red, suit blue) stay readable */
  filter: grayscale(0.12) contrast(1.05) brightness(0.92) saturate(1.05);
  /* fade the busy edges of any photo into the black canvas */
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 46%, #000 46%, transparent 88%);
          mask-image: radial-gradient(ellipse 78% 86% at 50% 46%, #000 46%, transparent 88%);
}
.themed--duo img  { filter: url(#gl-duotone) contrast(1.05) brightness(0.92); }
.themed--soft img { filter: grayscale(0.08) contrast(1.02) brightness(0.95) saturate(1.1); }
.themed--flush img { -webkit-mask-image: none; mask-image: none; }

/* teal wash to unify color temperature across mixed sources — kept
   deliberately light: multiply blend crushes saturated color fast
   (it was the main reason reds/blues were reading as muddy) */
.themed::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, rgba(58,125,131,0.04), rgba(8,9,10,0.14));
  mix-blend-mode: multiply;
}
/* film grain — self-contained SVG turbulence, no asset file */
.themed::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

/* ---------- signal field (Layer 1) ---------- */
.hero-field {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0.55; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 85%);
}
.s--hero .wrap, .s--hero .scrollcue { position: relative; z-index: 1; }

.coords {
  position: absolute; left: var(--pad); bottom: clamp(1.4rem, 4vh, 2.6rem); z-index: 1;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
  color: var(--ink-faint); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* standalone motif tiles (lab) */
.motif { position: relative; aspect-ratio: 16/10; background: #0a0b0d; border: 1px solid var(--line); overflow: hidden; }
.motif canvas { position: absolute; inset: 0; width: 100%; height: 100%; }