/* kyc-analysis.css — the live check, drawn in the visual language of the owner's own film.
 *
 * THE OWNER, 2026-08-31: «دقیقا انمیشنرا مثل همین ویدیو introduce servco_1.mp4 سلفی را بگیرد»
 *
 * ⛔ READ OFF THE FILM, NOT INVENTED. I extracted frames rather than guessing. At 9 seconds the
 * reference shows a face inside a dark panel with:
 *     four corner brackets, drawn as short right angles rather than a full rectangle
 *     a single bright green horizontal line sweeping down the face
 *     small tracking points on the features
 *     labelled callouts at the corners on leader lines, in small upper-case letters:
 *         RGB / LIGHT CONSISTENCY - VALID        UV / UV RESPONSE - AUTHENTIC
 *         DEPTH / LIGHT CONSISTENCY - VALID      UV / UV RESPONSE - AUTHENTIC
 * That is the language this file reproduces.
 *
 * ⛔ AND EVERY CALLOUT CARRIES A REAL MEASUREMENT. The film's labels are a designer's mock-up; ours
 * are fed from the same server probe that decides the verdict - sharpness, face fraction, framing,
 * and the liveness verdict itself. A panel that showed convincing labels with invented values would
 * be a lie told beautifully, and would teach an applicant to trust a number that means nothing.
 * When a value has not been measured yet the callout says so and stays grey.
 */

/* ── the frame ───────────────────────────────────────────────────────────────────────────────── */
#camwrap{ position:relative; }

.an-brackets{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.an-brackets i{
  position:absolute; width:34px; height:34px;
  border:2px solid rgba(94,224,138,.85);
  /* ⛔ CORNERS, NOT A BOX. The film draws four right angles; a full rectangle reads as a border and
     loses the instrument feel entirely. */
  border-radius:2px;
}
.an-brackets i:nth-child(1){ inset-block-start:9%; inset-inline-start:9%; border-inline-end:0; border-block-end:0; }
.an-brackets i:nth-child(2){ inset-block-start:9%; inset-inline-end:9%;  border-inline-start:0; border-block-end:0; }
.an-brackets i:nth-child(3){ inset-block-end:9%;  inset-inline-start:9%; border-inline-end:0; border-block-start:0; }
.an-brackets i:nth-child(4){ inset-block-end:9%;  inset-inline-end:9%;  border-inline-start:0; border-block-start:0; }

/* ── the sweep ───────────────────────────────────────────────────────────────────────────────── */
.an-scan{
  position:absolute; inset-inline:12%; height:2px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(94,224,138,.95) 18%,rgba(190,255,220,1) 50%,
             rgba(94,224,138,.95) 82%,transparent);
  box-shadow:0 0 14px 2px rgba(94,224,138,.55);
  animation:anScan 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes anScan{ 0%{ inset-block-start:14%; opacity:0 } 8%{ opacity:1 }
                   92%{ opacity:1 } 100%{ inset-block-start:84%; opacity:0 } }

/* ⛔ THE SWEEP STOPS WHEN THE CHECK IS DECIDED. A scanner still sweeping after a verdict tells the
   person the machine is still thinking, which is the one thing it is not doing. */
#camwrap[data-an-state="done"] .an-scan{ animation:none; opacity:0 }
#camwrap[data-an-state="done"] .an-brackets i{ border-color:rgba(94,224,138,1) }

/* ── the callouts ────────────────────────────────────────────────────────────────────────────── */
.an-reads{ position:absolute; inset:0; pointer-events:none; z-index:5;
           font:600 9.5px/1.35 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; }
.an-reads b{ display:block; color:rgba(190,255,220,.95); font-weight:700; text-transform:uppercase; }
.an-reads span{ display:block; color:rgba(170,200,190,.72); text-transform:uppercase; }
.an-reads .r{ position:absolute; max-width:44%; }
/* the four corners of the film, in logical properties so RTL mirrors them correctly */
.an-reads .r1{ inset-block-start:15%; inset-inline-start:4%;  }
.an-reads .r2{ inset-block-start:15%; inset-inline-end:4%; text-align:end; }
.an-reads .r3{ inset-block-end:16%;   inset-inline-start:4%;  }
.an-reads .r4{ inset-block-end:16%;   inset-inline-end:4%; text-align:end; }

/* ⛔ A VALUE THAT HAS NOT BEEN MEASURED IS GREY AND SAYS SO. The film's labels all read VALID
   because it is a film; ours must never claim a reading it does not have. */
.an-reads .r[data-an-has="0"] b{ color:rgba(160,180,175,.5) }
.an-reads .r[data-an-has="0"] span{ color:rgba(140,160,155,.4) }
.an-reads .r[data-an-bad="1"] b{ color:rgba(255,180,150,.95) }

/* the leader line from each callout towards the face, as the film draws them */
.an-reads .r::after{
  content:''; position:absolute; inset-block-start:50%; width:26px; height:1px;
  background:linear-gradient(90deg,rgba(94,224,138,.55),transparent);
}
.an-reads .r1::after, .an-reads .r3::after{ inset-inline-start:100%; }
.an-reads .r2::after, .an-reads .r4::after{ inset-inline-end:100%;
  background:linear-gradient(270deg,rgba(94,224,138,.55),transparent); }

/* ── narrow screens ──────────────────────────────────────────────────────────────────────────── */
@media (max-width:560px){
  /* ⛔ FOUR CALLOUTS ON A 375px PHONE OVERLAP THE FACE, and the face is the thing being measured.
     Two remain, and they are the two a person can act on. */
  .an-reads{ font-size:8.5px }
  .an-reads .r2, .an-reads .r3{ display:none }
  .an-reads .r{ max-width:52% }
  .an-brackets i{ width:26px; height:26px }
}
@media (prefers-reduced-motion:reduce){
  .an-scan{ animation:none; inset-block-start:49%; opacity:.75 }
}

/* ⛔ MEASURED ON A REAL RENDER AT 280px AND THE LABELS WERE CLIPPED. Four callouts need room the
   frame does not have below about 440px: the text ran under the circle and read as
   وضوح 14 - a truncated number is worse than no number, because a person believes it.
   Below that width the readings move OUT of the frame and sit under it as a single row, where they
   have the full width and nothing overlaps the face being measured. */
@media (max-width:440px){
  #camwrap .an-reads{ position:static; display:flex; flex-wrap:wrap; gap:4px 14px;
                      justify-content:center; margin-top:9px; }
  #camwrap .an-reads .r{ position:static; max-width:none; text-align:center;
                         display:flex; gap:5px; align-items:baseline; }
  #camwrap .an-reads .r2, #camwrap .an-reads .r3{ display:flex }
  #camwrap .an-reads .r::after{ display:none }
  #camwrap .an-reads b, #camwrap .an-reads span{ display:inline }
}