/* ==========================================================================
   KYC/AML solution page — additions on top of the shared solution template
   (/styles/pages/solution.css). Everything scoped to .p-solution--kyc-aml so
   it never bleeds into sibling solution pages.

   RONDA 3 (2026-08-11, Camila — Figma refresh): the wireframe/diagram era is
   retired. Sections 1-3 of this sheet (km-* wireframe kit, kam-* window kit,
   ka-hero diagram composite + its traveling-phone rest override) are DELETED:
     · The hero now rides the STANDARD solution-template phone stage
       (sol-hero__stage + ghosts + phonecol, all in solution.css) with the
       real eKYC module screens (Ekyc*Screen components, traced from the
       eKYC/eKYB Ready-for-Dev Figma TWgYZVhurQCizfC4tfLEut). No page CSS
       needed — removing the old .is-float rest override restores the
       template's own traveling-phone behavior.
     · G14 screening/monitoring dashboard deck (kya-*) stays — it remains
       grounded in the real SSVNext dashboard surface.
   ========================================================================== */

/* ---- 4 · screening + monitoring (bespoke light section) ---------------- */
.p-solution--kyc-aml .ka-screen {
  background: var(--color-white);
  color: var(--color-foreground);
  border-top: 1px solid var(--color-border-light);
}

/* ---- 5 · hero proof stats: keep all three on one row (G6) -------------- */
.p-solution--kyc-aml .sol-hero__stats {
  gap: 20px 26px;
}
.p-solution--kyc-aml .sol-hero__stat + .sol-hero__stat {
  padding-left: 26px;
}

/* ======================================================================
   6 · SCREENING STEPPER (ka-screen § "Every risk signal, in one auditable
   case"). The rail is the shared sol-how__* rail (base styles in
   solution.css, static/non-float here since ka-screen sits outside
   .sol-flow-wrap). The deck on the right is the LOCKED "Single Session
   dashboard" template (technology/liveness-detection's .lvw-* shell)
   rebuilt page-scoped as kya-*: a light browser window (chrome → grey nav →
   Pass/Session-ID header → persistent face avatar + per-step check rows) so
   this page reads as one system with the keytech pages. Driven by
   section-walk.js (data-at-step / data-at-screen / is-active — unchanged).
   ====================================================================== */

/* jump-free rail: every description opens to the SAME measured height
   (--at-reveal-h, set by agentic-trust-how.js) so the rail's total height
   holds still on step change. Overrides solution.css's 0fr→1fr grid trick. */
.p-solution--kyc-aml .sol-how__reveal {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.p-solution--kyc-aml .sol-how__step.is-active .sol-how__reveal {
  height: var(--at-reveal-h, 78px);
}
.p-solution--kyc-aml .sol-how__line {
  padding-top: 10px;
}

/* scroll-pin walk (wide + motion): the section grows tall and its inner
   content pins for the length of the walk, so scroll SELECTS the step. Pin
   length scales with the step count (72svh of scroll per step + one
   viewport), mirroring the hero how-it-works. Driven by section-walk.js. */
.p-solution--kyc-aml .ka-screen__pin {
  position: relative;
}
.p-solution--kyc-aml .ka-screen.is-walk {
  height: calc(100svh + 72svh * var(--ka-steps, 4));
}
.p-solution--kyc-aml .ka-screen.is-walk .ka-screen__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* active-step underline. Walk mode: the active step's bar tracks the in-band
   scroll fraction (--ka-scrub, set per frame by section-walk.js) so the
   walk answers every pixel; walked-past steps hold a full bar. Static mode:
   a timed fill matching auto-advance (sol-how-fill keyframes live in
   solution.css). */
.p-solution--kyc-aml
  .ka-screen.is-walk
  .sol-how__step.is-active
  .sol-how__fill {
  transform: scaleX(var(--ka-scrub, 0));
  transition: transform 0.18s linear;
}
.p-solution--kyc-aml .ka-screen.is-walk .sol-how__step.is-done .sol-how__fill {
  transform: scaleX(
    0
  ); /* only the active step keeps its bar (Camila 2026-08-10, site-wide) */
  transition: transform 0.4s ease;
}
.p-solution--kyc-aml
  .ka-screen:not(.is-walk)
  .sol-how__step.is-active
  .sol-how__fill {
  animation: sol-how-fill var(--sol-hold, 6s) linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--kyc-aml
    .ka-screen:not(.is-walk)
    .sol-how__step.is-active
    .sol-how__fill {
    animation: none;
  }
}

/* This section gives the How-it-works stage more room so the in-window
   dashboard (nav + face + checks) can breathe. Scoped to .ka-screen only —
   the page's OTHER walk (the hero § How it works, also .sol-how__inner) keeps
   the shared 1.05/0.95 balance from solution.css. */
@media (min-width: 1024px) {
  .p-solution--kyc-aml .ka-screen .sol-how__inner {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    gap: 56px;
  }
}

/* ---- the deck: a light browser window at laptop ratio (locked template) ---- */
.p-solution--kyc-aml .kya-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 640px);
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
/* browser chrome: three grey dots + a lock + a muted url line */
.p-solution--kyc-aml .kya-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-grey-100);
  background: var(--color-grey-50);
  flex-shrink: 0;
}
.p-solution--kyc-aml .kya-chrome__dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.p-solution--kyc-aml .kya-chrome__dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--kyc-aml .kya-chrome__url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  color: var(--color-grey-300);
}
.p-solution--kyc-aml .kya-chrome__lock {
  flex-shrink: 0;
}
.p-solution--kyc-aml .kya-chrome__url-bar {
  height: 6px;
  width: 46%;
  border-radius: 999px;
  background: var(--color-grey-100);
}
/* the dashboard inside the window: de-emphasised nav + main */
.p-solution--kyc-aml .kya-app {
  display: flex;
  align-items: stretch;
  min-height: 300px;
}
.p-solution--kyc-aml .kya-appnav {
  flex-shrink: 0;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px 12px;
  background: var(--color-grey-50);
  border-right: 1px solid var(--color-grey-100);
}
.p-solution--kyc-aml .kya-appnav__line {
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-solution--kyc-aml .kya-appmain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-solution--kyc-aml .kya-apphead {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-grey-100);
  flex-shrink: 0;
}
.p-solution--kyc-aml .kya-apphead__pass {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-green-100);
  color: var(--color-green-600);
  font-size: 12px;
  font-weight: 600;
}
.p-solution--kyc-aml .kya-apphead__sid {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-400);
}
.p-solution--kyc-aml .kya-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
/* ---- face capture (left) — the verified customer's selfie loop, cropped to
   a round avatar; persistent across the four steps ---- */
.p-solution--kyc-aml .kya-face {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 20px;
  border-right: 1px solid var(--color-grey-100);
}
.p-solution--kyc-aml .kya-face__cap {
  position: relative;
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-blue-100);
  border: 1px solid var(--color-grey-100);
}
.p-solution--kyc-aml .kya-face__cam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-solution--kyc-aml .kya-screens {
  position: relative;
  display: grid;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.p-solution--kyc-aml .kya-screen {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 236px;
  padding: 18px 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.p-solution--kyc-aml .kya-screen.is-active {
  opacity: 1;
  transition: opacity 0.35s ease 0.05s;
}
.p-solution--kyc-aml .kya-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-grey-on-white);
}
.p-solution--kyc-aml .kya-head .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--color-grey-400);
}

/* rows — hairline label · (score) · pill, no boxes */
.p-solution--kyc-aml .kya-table {
  display: flex;
  flex-direction: column;
}
.p-solution--kyc-aml .kya-trow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.p-solution--kyc-aml .kya-trow:last-child {
  border-bottom: 0;
}
/* verdict rows (label + pill, no score bar) — same hairline style */
.p-solution--kyc-aml .kya-trow--split {
  grid-template-columns: minmax(0, 1fr) auto;
}
.p-solution--kyc-aml .kya-trow__lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-solution--kyc-aml .kya-score {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-solution--kyc-aml .kya-score__fill {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--color-blue);
  transform-origin: left center;
  transform: scaleX(var(--v, 0));
}

/* tone pills (base is neutral grey; good/bad/warn override) */
.p-solution--kyc-aml .kya-pill {
  white-space: nowrap;
  justify-self: end;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-on-white);
}
.p-solution--kyc-aml .kya-pill--good {
  background: var(--color-green-100);
  color: var(--color-green-600);
}
.p-solution--kyc-aml .kya-pill--bad {
  background: var(--color-red-100);
  color: var(--color-red-600);
}
.p-solution--kyc-aml .kya-pill--warn {
  background: var(--color-amber-100);
  color: var(--color-amber-600);
}

/* footer chips */
.p-solution--kyc-aml .kya-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.p-solution--kyc-aml .kya-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-grey-100);
  color: var(--color-grey-on-white);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.p-solution--kyc-aml .kya-chip--accent {
  background: color-mix(in oklab, var(--color-blue-500) 14%, transparent);
  color: var(--color-blue);
}

/* choreography — bars fill, pills pop on each step activation */
.p-solution--kyc-aml .kya-screen .kya-score__fill {
  transform: scaleX(0);
}
.p-solution--kyc-aml .kya-screen.is-active .kya-score__fill {
  animation: kya-fill 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.p-solution--kyc-aml .kya-screen .kya-pill {
  opacity: 0;
  transform: translateY(3px) scale(0.9);
}
.p-solution--kyc-aml .kya-screen.is-active .kya-pill {
  animation: kya-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes kya-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(var(--v, 0));
  }
}
@keyframes kya-pop {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--kyc-aml .kya-screen,
  .p-solution--kyc-aml .sol-how__reveal {
    transition: none;
  }
  .p-solution--kyc-aml .kya-screen .kya-score__fill,
  .p-solution--kyc-aml .kya-screen .kya-pill {
    animation: none !important;
    opacity: 1;
    transform: scaleX(var(--v, 1));
  }
  .p-solution--kyc-aml .kya-screen .kya-pill {
    transform: none;
  }
}

/* ---- mobile: dashboard paired with each step (built by section-walk.js) ----
   The scroll-walk can't run on narrow screens, so the section reads
   content → dashboard → content → dashboard instead — each step carries its
   own copy of the deck, frozen to that step's screen (.kya-shot). Mirrors the
   how-it-works mobile pass; see solution.css .sol-how__shot. */
@media (max-width: 1023px) {
  /* the shared right-hand stage hides once paired */
  .p-solution--kyc-aml .ka-screen.is-paired .sol-how__stage {
    display: none;
  }
  /* open EVERY step description — no accordion in paired mode
     (overrides the height:0 collapse above) */
  .p-solution--kyc-aml .ka-screen.is-paired .sol-how__reveal {
    height: auto;
  }
  /* the paired dashboard slot under each step: the cloned deck carries
     data-dash-fit, so site.js dashFit renders it at 640px and zooms it to fill
     the column — zoom shrinks the layout box too, so the slot sizes itself with
     no manual height/transform (that older path left the proportion off) */
  .p-solution--kyc-aml .kya-shot {
    padding: 8px 0 28px;
  }
  .p-solution--kyc-aml .kya-shot .kya-deck {
    margin-inline: auto;
  }
}
/* safety: if a narrow-built clone survives a resize to desktop, hide it and
   let the real scroll-walk stage show again */
@media (min-width: 1024px) {
  .p-solution--kyc-aml .kya-shot {
    display: none;
  }
}

/* ======================================================================
   7 · STEP FLOATS + SPINNER (2026-08-11, Camila). Floating containers that
   accompany the last two walk screens: step 3 (EkycProcessing — screening
   runs) gets a watchlist-screening card + a "100+ sanctions lists" chip;
   step 4 (EkycSuccess — decide and record) gets a session-decision card +
   a "Logged · audit trail" chip. They live INSIDE both sol-stage__decks
   with data-sol-screen, so solution-hero.js toggles .is-active with the
   step. Card recipe = the page's kya window language (white, grey-100
   hairline, deep soft drop); pills reuse .kya-pill. The processing
   screen's spinner arc (.ekp-spinner, baked static in the component)
   rotates here — CSS-only, reduced-motion safe.
   ====================================================================== */
.p-solution--kyc-aml .sol-stage__deck {
  position: relative;
}
.p-solution--kyc-aml .ka-float {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.p-solution--kyc-aml .ka-float.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}
.p-solution--kyc-aml .ka-float--card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 172px;
  padding: 12px 14px 13px;
  border-radius: 14px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  box-shadow: none;
}
.p-solution--kyc-aml .ka-float__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--color-foreground);
}
.p-solution--kyc-aml .ka-float__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--color-grey-on-white);
}
.p-solution--kyc-aml .ka-float__val {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-foreground);
}
.p-solution--kyc-aml .ka-float--chip {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  box-shadow: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-foreground);
}
/* placements: cards and chips hang off opposite phone edges, mirrored
   between the two steps so the composition alternates */
.p-solution--kyc-aml .ka-float--l2 {
  left: -108px;
  top: 21%;
}
.p-solution--kyc-aml .ka-float--r2 {
  right: -84px;
  bottom: 27%;
}
.p-solution--kyc-aml .ka-float--r3 {
  right: -108px;
  top: 24%;
}
.p-solution--kyc-aml .ka-float--l3 {
  left: -76px;
  bottom: 30%;
}
/* narrow viewports: the deck column is tight — floats would overflow the
   phone gutter, so they stand down (same rule as the hero ghosts) */
@media (max-width: 1023px) {
  .p-solution--kyc-aml .ka-float {
    display: none;
  }
}

/* the processing spinner: rotate the arc about its own center. The arc is
   a dasharray'd circle baked static in EkycProcessingScreen (.ekp-spinner);
   transform-box makes the rotation self-centered inside the screen SVG. */
.p-solution--kyc-aml .ekp-spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: ka-spin 0.9s linear infinite;
}
@keyframes ka-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--kyc-aml .ekp-spinner {
    animation: none;
  }
}

/* ======================================================================
   8 · HOW-IT-WORKS STEP CHOREOGRAPHY (2026-08-12, Elena). The flow reads
   capture → validate → match → decide, and this page's screens differ
   from customer-onboarding's, so the shared co-* choreography in
   solution.css (keyed to the screen INDEX, not the component) is
   retargeted here. Steps 3 and 4 keep the shared rules verbatim —
   FaceMatch rides screen 2 and Selfie7 rides screen 3 on both pages.

   Step 1 is the special one: it holds TWO screens. The ID capture leads
   with the shared card-in glide, then the selfie phase crossfades on top
   and runs the shared ring scan. One container, two phases, one timeline:
     0.25s  the license rides up into the capture frame  (1.5s)
     1.75s  the frame confirms green                     (0.5s)
     2.40s  crossfade to the selfie                      (0.55s)
     3.40s  "Align your face…" hands off to "Get ready…"
     5.00s  the scan ring settles on success green
   Total 5.6s, inside the 6s auto-advance hold.
   ====================================================================== */
.p-solution--kyc-aml .ka-cap {
  position: relative;
  overflow: hidden;
}
.p-solution--kyc-aml .ka-cap__phase {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.p-solution--kyc-aml .ka-cap__phase--selfie {
  opacity: 0;
}
.p-solution--kyc-aml .ka-cap.is-active .ka-cap__phase--selfie {
  animation: ka-cap-swap 0.55s ease 2.4s both;
}
@keyframes ka-cap-swap {
  to {
    opacity: 1;
  }
}
/* once the selfie phase is up, fade the dark ID-capture phase out beneath it
   so no sliver of it peeks through the screen's rounded corners (the "dark
   corners" — Mauricio 2026-08-17). Desktop only: the mobile fallback below
   cycles the two phases, so it must keep the ID phase live. */
@media (min-width: 1024px) {
  .p-solution--kyc-aml .ka-cap.is-active .ka-cap__phase--id {
    animation: ka-cap-idout 0.55s ease 2.4s both;
  }
}
@keyframes ka-cap-idout {
  to {
    opacity: 0;
  }
}

/* phase 1 · the ID card rides up, lit only inside the capture frame */
.p-solution--kyc-aml .ka-cap.is-active .idc-card,
.p-solution--kyc-aml .ka-cap.is-active .idc-card-lit {
  animation: co-card-in 1.5s cubic-bezier(0.85, 0, 0.25, 1) 0.25s both;
}
.p-solution--kyc-aml .ka-cap.is-active .idc-frame path {
  animation: co-frame-success 0.5s ease 1.75s both;
}

/* phase 2 · the selfie scan ring orbits and the caption hands off, the
   same beats the shared sheet gives screen 0, offset past the swap */
.p-solution--kyc-aml .ka-cap .s3-ring-scan {
  display: inline;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-ring-scan 2.4s linear infinite;
}
.p-solution--kyc-aml .ka-cap.is-active .s3-caption {
  animation: co-cap-out 0.4s ease 3.4s both;
}
.p-solution--kyc-aml .ka-cap.is-active .s3-caption-ready {
  display: inline;
  animation: co-cap-ready 2.2s ease 3.7s both;
}
.p-solution--kyc-aml .ka-cap.is-active .s3-scan-stop {
  animation: co-scan-success 0.6s ease 5s both;
}

/* Narrow viewports pair each step with its own still (solution-hero.js
   moves the screen out of the deck, so .is-active never lands on it).
   Step 1 would freeze on the ID capture and the selfie would never
   show — here the two phases cycle on a loop instead. */
@media (max-width: 1023px) {
  .p-solution--kyc-aml .sol-how__shot .ka-cap__phase--selfie {
    animation: ka-cap-cycle 8s ease-in-out infinite;
  }
}
@keyframes ka-cap-cycle {
  0%,
  30% {
    opacity: 0;
  }
  40%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Step 2 · "Validate the document" — the OCR review screen. The form
   chrome is already on screen; what animates is the DATA landing in it,
   because that is the claim: everything read off the ID comes back as
   editable fields. The portrait settles first, then each extracted value
   rises into its box on the shared incode-flow curve, staggered by --i. */
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-portrait {
  transform-box: fill-box;
  transform-origin: center;
  animation: ka-ocr-portrait 0.6s cubic-bezier(0, 0.75, 0.25, 1) 0.2s both;
}
@keyframes ka-ocr-portrait {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  80% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-field-value {
  /* it's a form: the OCR value TYPES into each field left-to-right, no Y
     movement. SVG <text> can't be clip-typed via CSS, so the character
     reveal is driven by the kyc-ocr-type inline behavior on the page; this
     rule keeps only the submit-dim. Same timing/stagger lives in that JS
     (0.6s + i*0.32s). Mauricio 2026-08-17. */
  animation: ka-ocr-dim 0.45s ease var(--ka-ocr-submit) forwards;
}

/* Gender is a RADIO, not a text field, so it doesn't rise into place with
   the values — it selects. The motion is the design system's own
   (design-system.labs.incode.com/core/components/radio · Prizma core
   Radio button): the control's surface cross-fades to brand blue over
   120ms ease (Radio button/Motion/State-duration) while the dot fades in
   over 80ms (Radio button/Motion/Dot-duration) — no scale, no bounce, and
   the dot lands first so it reads as the response. The tokens live in the
   Prizma build, which this site doesn't load, so the durations are
   mirrored here and the unselected colours come from the component's own
   --ekr-radio-* properties. Both fire in the gender field's stagger slot,
   so the selection still lands in reading order with the rest of the
   extracted data. The screens rest SELECTED, so each keyframe only needs
   its `from` — the `to` is the resting markup. */
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active
  .ekr-radio--female
  .ekr-radio-ring {
  animation:
    ka-radio-select 120ms ease calc(0.6s + 2 * 0.32s) both,
    ka-ocr-lock-radio 0.45s ease var(--ka-ocr-submit) forwards;
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-radio-dot {
  animation: ka-radio-dot 80ms ease calc(0.6s + 2 * 0.32s) both;
}
@keyframes ka-radio-select {
  from {
    fill: var(--ekr-radio-surface);
    stroke: var(--ekr-radio-line);
  }
}
@keyframes ka-radio-dot {
  from {
    opacity: 0;
  }
}

/* …and once the last value has landed, the applicant submits: the form
   locks and the button starts loading (Figma "Review OCR · disabled").
   Every layer eases to the locked palette over the same 0.45s so the two
   states dissolve into each other instead of cutting; the label leaves
   first and the ring follows, the way a real button hands over. These all
   run `forwards`, not `both` — the fill/select animations above own these
   same properties earlier in the step, and a backwards fill here would
   overwrite them from frame one. */
.p-solution--kyc-aml svg[data-sol-screen="1"] {
  --ka-ocr-submit: 2.5s;
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-field-box {
  animation: ka-ocr-lock 0.45s ease var(--ka-ocr-submit) forwards;
}
/* the disabled radio is a SOLID grey control, not a greyed box — the
   design system's Radio button/Surface/Disabled is the border grey */
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active
  .ekr-radio--male
  .ekr-radio-ring {
  animation: ka-ocr-lock-radio 0.45s ease var(--ka-ocr-submit) forwards;
}
@keyframes ka-ocr-lock {
  to {
    fill: var(--ekr-locked-surface);
    stroke: var(--ekr-locked-surface);
  }
}
@keyframes ka-ocr-lock-radio {
  to {
    fill: var(--ekr-locked-ink);
    stroke: var(--ekr-locked-ink);
  }
}
@keyframes ka-ocr-dim {
  to {
    fill: var(--ekr-locked-ink);
  }
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-label {
  animation: ka-ocr-cta-out 0.2s ease var(--ka-ocr-submit) forwards;
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-spin {
  animation: ka-ocr-cta-in 0.3s ease calc(var(--ka-ocr-submit) + 0.12s)
    forwards;
}
.p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-spin-arc {
  transform-box: fill-box;
  transform-origin: center;
  animation: ka-spin 0.9s linear calc(var(--ka-ocr-submit) + 0.12s) infinite;
}
@keyframes ka-ocr-cta-out {
  to {
    opacity: 0;
  }
}
@keyframes ka-ocr-cta-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-solution--kyc-aml .ka-cap .s3-ring-scan,
  .p-solution--kyc-aml .ka-cap.is-active .idc-card,
  .p-solution--kyc-aml .ka-cap.is-active .idc-card-lit,
  .p-solution--kyc-aml .ka-cap.is-active .idc-frame path,
  .p-solution--kyc-aml .ka-cap.is-active .s3-caption,
  .p-solution--kyc-aml .ka-cap.is-active .s3-scan-stop,
  .p-solution--kyc-aml .sol-how__shot .ka-cap__phase--selfie,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-portrait,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-field-value,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-field-box,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-radio-ring,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-radio-dot,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-label,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-spin,
  .p-solution--kyc-aml svg[data-sol-screen="1"].is-active .ekr-cta-spin-arc {
    animation: none;
  }
  /* no motion → the step rests on its first beat: the framed ID, its
     caption, and the OCR form already filled */
  .p-solution--kyc-aml .ka-cap.is-active .s3-caption-ready {
    display: none;
  }
  .p-solution--kyc-aml .ka-cap.is-active .ka-cap__phase--selfie {
    animation: none;
  }
}