/* id-capture.css — document-capture animation (Stripe Identity style). No dependencies.
   Customise via the CSS variables on .idc. Structure is documented in MANUAL.md. */

.idc {
  --idc-width: 400px;          /* max width of the whole card */
  --idc-radius: 20px;
  --idc-inset-x: 6;            /* detection frame inset, % of camera width  (no unit!) */
  --idc-inset-y: 13;           /* detection frame inset, % of camera height (no unit!) */
  --idc-accent: #15be53;       /* "aligned / success" colour */
  --idc-brand: #6c4cf1;        /* colour used on the sample document */
  --idc-frame: #ffffff;        /* idle frame colour */
  --idc-label-bg: #f6f9fc;
  --idc-label-color: #0a2540;
  --idc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  display: flex;
  justify-content: center;
  font-family: var(--idc-font);
}

.idc__card {
  position: relative;
  width: 100%;
  max-width: var(--idc-width);
  border-radius: var(--idc-radius);
  background: #fff;
  box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3);
  container-type: inline-size;
}

/* ---------- camera viewport ---------- */
.idc__camera {
  position: relative;
  aspect-ratio: 400 / 303;
  overflow: hidden;
  border-radius: var(--idc-radius) var(--idc-radius) 0 0;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000); /* Safari: clip transformed children to the radius */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: #1b1d24;
}

.idc__layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }

/* blurred + dimmed copy of the scene */
.idc__layer--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, .5);
}

/* ---------- detection frame (sharp window) ---------- */
.idc__frame {
  position: absolute;
  left:   calc(var(--idc-inset-x) * 1%);
  right:  calc(var(--idc-inset-x) * 1%);
  top:    calc(var(--idc-inset-y) * 1%);
  bottom: calc(var(--idc-inset-y) * 1%);
  border-radius: calc(var(--idc-radius) * .8);
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.idc__frame::before,
.idc__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--idc-frame);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}
.idc__frame::after { border-color: var(--idc-accent); opacity: 0; transition: opacity .25s; }
.idc[data-state="highlight"] .idc__frame::after,
.idc[data-state="done"]      .idc__frame::after { opacity: 1; }

/* the sharp copy is the size of the whole camera, shifted so it lines up with the blurred copy */
.idc__layer--frame {
  width:  calc(100% * 100 / (100 - 2 * var(--idc-inset-x)));
  height: calc(100% * 100 / (100 - 2 * var(--idc-inset-y)));
  left:   calc(-1% * var(--idc-inset-x) * 100 / (100 - 2 * var(--idc-inset-x)));
  top:    calc(-1% * var(--idc-inset-y) * 100 / (100 - 2 * var(--idc-inset-y)));
}

/* scan sweep while aligned */
.idc__scan {
  position: absolute;
  left: 0; right: 0; top: -30%; height: 30%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--idc-accent) 16%, transparent) 60%, color-mix(in srgb, var(--idc-accent) 30%, transparent));
  border-bottom: 2px solid var(--idc-accent);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.idc[data-state="highlight"] .idc__scan { opacity: 1; animation: idc-scan 1.1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes idc-scan { from { transform: translateY(0); } to { transform: translateY(433%); } }

/* ---------- scene: surface + document (authored once, cloned by JS into the frame) ---------- */
.idc__scene { position: absolute; inset: 0; }

.idc__surface {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(120% 80% at 25% 15%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(80% 60% at 85% 90%, rgba(108, 76, 241, .18), transparent 60%),
    linear-gradient(160deg, #3a3e4a 0%, #23262e 55%, #1a1c23 100%);
}
.idc__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a soft prop on the desk so the pan reads as movement */
.idc__prop {
  position: absolute;
  left: -32%; top: 62%;
  width: 70%; height: 55%;
  border-radius: 6%;
  background: linear-gradient(135deg, #f4f1ea, #d9d3c7);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transform: rotate(-9deg);
}
.idc__prop::before {
  content: "";
  position: absolute; inset: 9% 8% auto 8%; height: 3%;
  border-radius: 2px;
  background: rgba(0, 0, 0, .12);
  box-shadow: 0 300% 0 rgba(0,0,0,.12), 0 600% 0 rgba(0,0,0,.12), 0 900% 0 rgba(0,0,0,.12);
}

.idc__doc {
  position: absolute;
  left: 0; top: 0;
  width:  calc((100 - 2 * var(--idc-inset-x)) * 1%);
  height: calc((100 - 2 * var(--idc-inset-y)) * 1%);
  transform-origin: center;
  will-change: transform;
}

/* ---------- sample document (replace the inner HTML of .idc__doc with your own if you like) ---------- */
.idc-id {
  position: absolute; inset: 0;
  border-radius: 3cqw;
  overflow: hidden;
  color: #1f2a44;
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(108, 76, 241, .10), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f1f3fa 55%, #e6e9f4 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .5), inset 0 0 0 .3cqw rgba(255, 255, 255, .8);
}
.idc-id__band {
  position: absolute; left: 0; right: 0; top: 0; height: 16%;
  background: linear-gradient(90deg, var(--idc-brand), color-mix(in srgb, var(--idc-brand) 65%, #fff));
}
.idc-id__title {
  position: absolute; left: 4.5cqw; top: 2.6cqw;
  font: 800 3.3cqw/1 var(--idc-font); letter-spacing: .14em; color: #fff;
}
.idc-id__country {
  position: absolute; right: 4.5cqw; top: 2.6cqw;
  font: 700 3cqw/1 var(--idc-font); letter-spacing: .1em; color: rgba(255, 255, 255, .85);
}
.idc-id__photo {
  position: absolute; left: 4.5cqw; top: 22%; width: 23cqw; height: 58%;
  border-radius: 1.6cqw; overflow: hidden;
  background: linear-gradient(180deg, #d7dced, #b4bdd3);
  box-shadow: inset 0 0 0 .25cqw rgba(0, 0, 0, .08);
}
.idc-id__photo svg { width: 100%; height: 100%; display: block; }
.idc-id__fields {
  position: absolute; left: 32cqw; right: 4.5cqw; top: 22%;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.7cqw 2cqw;
}
.idc-id__field small { display: block; font: 700 1.8cqw/1.2 var(--idc-font); letter-spacing: .1em; text-transform: uppercase; color: #8b96b1; }
.idc-id__field b     { display: block; font: 700 3cqw/1.15 var(--idc-font); color: #131c36; margin-top: .4cqw; white-space: nowrap; }
.idc-id__chip {
  position: absolute; right: 4.5cqw; bottom: 17%; width: 8.5cqw; height: 6.2cqw;
  border-radius: 1.2cqw;
  background: linear-gradient(135deg, #f6dc8c, #c9a24a);
  box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .08);
}
.idc-id__chip::after {
  content: ""; position: absolute; inset: 28% 22%;
  border: .3cqw solid rgba(0, 0, 0, .18); border-radius: .6cqw;
}
.idc-id__mrz {
  position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 5%;
  font: 600 2.55cqw/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em; color: #5e6a8a; white-space: nowrap; overflow: hidden;
}

/* ---------- flash ---------- */
.idc__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; }

/* ---------- label bar ---------- */
.idc__labels {
  position: relative;
  height: 56px;
  background: var(--idc-label-bg);
  border-radius: 0 0 var(--idc-radius) var(--idc-radius);
}
.idc__labelMask {
  position: relative; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent);
}
.idc__labelList { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.65, .05, .36, 1); }
.idc[data-state="highlight"] .idc__labelList { transform: translateY(-100%); }
.idc[data-state="done"]      .idc__labelList { transform: translateY(-200%); }
.idc__label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 100%; padding: 0 16px; text-align: center;
  font: 600 16px/20px var(--idc-font); color: var(--idc-label-color);
}
.idc__spinner { flex: none; animation: idc-spin .6s linear infinite; color: var(--idc-label-color); }
.idc__check   { flex: none; color: var(--idc-accent); }
@keyframes idc-spin { to { transform: rotate(1turn); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .idc__labelList, .idc__frame::after { transition: none; }
  .idc__scan, .idc__spinner { animation: none; }
}