/* ═══════════════════════════════════════════════════════════════════════════════════════
 * kyc-synapse.css — the parts of the reference's visual language that the KYC surfaces were
 * still missing, shared by /kyc and /verify.
 *
 * Both pages already carried the two biggest pieces before this file existed: the full-bleed
 * background film (ours, rendered from world.json) with its entrance zoom, and the liquid-glass
 * plates with the mask-composite hairline. Measured in the browser rather than assumed, three
 * things were absent from BOTH pages and one from /verify alone:
 *
 *   #bottom-blur   the progressive blur bar that fades the film into the page bottom
 *   .dot-grid      the faint dotted plane the reference lays over the whole stage
 *   mono labels    the reference sets its technical captions in a monospace face
 *   scramble       /verify resolved its heading with no reveal at all (kyc.php had one)
 *
 * ⛔ NOTHING HERE MAY TOUCH THE CAMERA. The capture elements — .cam, .camwrap, .doccam, #vid,
 * #cam, #doccamVid — carry a fixed aspect ratio, object-fit:cover and, on the selfie, a
 * deliberate scaleX(-1) mirror. A blur, a scale or a perspective applied over them would change
 * what the frame analyser measures and what the person sees of their own face while being asked
 * to hold still. Every selector below is scoped away from them, and the two guards at the end
 * make that structural rather than a promise.
 *
 * ⛔ AND NO FONT IS FETCHED. The reference names Space Mono from a font CDN. Nothing on these
 * pages may load from a third party, so the monospace is the platform stack — which every target
 * device already has, and which costs no request at all.
 * ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── the progressive bottom blur ──────────────────────────────────────────────────────────
   The gradient darkens toward the bottom while the backdrop-filter blurs what is behind it, and
   the mask makes that blur ramp in rather than starting at a hard line. */
#bottom-blur{
  position:fixed;bottom:0;left:0;right:0;height:150px;z-index:8;
  pointer-events:none;user-select:none;
  background:linear-gradient(to bottom,transparent,var(--bg,#04060c));
  -webkit-mask-image:linear-gradient(to top,#000 50%,transparent);
          mask-image:linear-gradient(to top,#000 50%,transparent);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}

/* ── the dotted plane ─────────────────────────────────────────────────────────────────────
   z-index sits above the film and below every control, so it reads as a plane in the scene
   rather than a texture painted on the card. */
.dot-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.85) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.05;
}

/* ── the reference's monospace captions ───────────────────────────────────────────────────
   Only the technical furniture: step counters, the brand's sub-line, reference codes and status
   captions. Body copy and anything a person has to read at length stays in Vazirmatn, which
   carries Persian and Arabic properly — a monospace stack does not. */
.mono,
.brand i,
.step-of,
.reftag{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.06em;
}

/* ── the scramble reveal ──────────────────────────────────────────────────────────────────
   The element is sized and readable before the script touches it; the script only swaps glyphs.
   If it never runs, the heading is simply there. */
[data-scramble-in]{ display:inline-block; }
[data-scramble-in].scrambling{ color:var(--ink,#f3f6fa); }

/* ── ⛔ THE CAMERA GUARDS ──────────────────────────────────────────────────────────────────
   Structural, not a comment. If any future rule in any stylesheet on these pages puts a filter
   or an extra transform on a capture surface, these put it back: the selfie keeps its mirror,
   the document camera keeps none, and neither is ever blurred. */
.cam video, .camwrap video, #vid, #cam{ filter:none !important; }
.doccam video, .doccam-wrap video, #doccamVid, .cw video{ filter:none !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  #bottom-blur{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}