/* ==========================================================================
   Tatvora — AI product demonstrations

   Graphical explanations of each AI model: input, processing, result.
   Layered on top of the existing design system; nothing here redefines a
   token or an existing component.

   Progressive enhancement rule, matching site.js: the resting state of every
   demo is its FINAL state, so with JavaScript disabled the graphic is still
   complete and readable. Animation only runs once `.is-playing` is added by
   the intersection observer, and uses `both` fill so reduced-motion users
   (whose durations are clamped to ~0ms globally) land on the final frame.
   ========================================================================== */

/* ---------------------------------------------------------------- shell */

.demo {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.demo__chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-tint);
}

.demo__dots { display: inline-flex; gap: 6px; }
.demo__dots span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--slate-300);
}

.demo__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.demo__replay {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--slate-600);
    font-size: var(--text-xs);
    font-weight: 550;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.demo__replay:hover { color: var(--brand); border-color: var(--blue-300); }
.demo__replay svg { width: 13px; height: 13px; }

.demo__body { padding: clamp(var(--space-4), 3vw, var(--space-8)); }

.demo__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--line);
    font-size: var(--text-xs);
    color: var(--muted);
}

.demo__note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ----------------------------------------------------------- flow layout */

.demo-flow {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
}

.demo-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.demo-col__title {
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.demo-panel {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: var(--space-4);
}

.demo-panel--tint { background: var(--surface-tint); }
.demo-panel--brand { background: var(--surface-brand); border-color: var(--blue-200); }

/* The processing column: narrower, and the visual centre of the diagram. */
.demo-col--process { flex: 0 1 190px; justify-content: center; }

.demo-engine {
    text-align: center;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-lg);
    background: var(--surface-brand);
    padding: var(--space-4) var(--space-3);
}

.demo-engine__icon {
    width: 38px; height: 38px;
    margin: 0 auto var(--space-2);
    border-radius: var(--radius);
    background: var(--grad-brand);
    color: var(--white);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-brand);
}

.demo-engine__icon svg { width: 20px; height: 20px; }
.is-playing .demo-engine__icon { animation: engine-pulse 1.6s var(--ease) infinite; }

@keyframes engine-pulse {
    0%, 100% { transform: scale(1); box-shadow: var(--shadow-brand); }
    50%      { transform: scale(1.07); box-shadow: 0 16px 38px rgba(37, 99, 235, 0.38); }
}

.demo-engine__name {
    display: block;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--navy-800);
    line-height: 1.3;
}

.demo-engine__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--blue-700);
    margin-top: 0.25rem;
    word-break: break-all;
}

/* Connector between columns. */
.demo-arrow {
    flex: 0 0 26px;
    align-self: center;
    position: relative;
    height: 2px;
    background: var(--line);
    border-radius: 2px;
}

.demo-arrow::after {
    content: "";
    position: absolute;
    right: -1px; top: 50%;
    width: 7px; height: 7px;
    border-top: 2px solid var(--slate-300);
    border-right: 2px solid var(--slate-300);
    transform: translateY(-50%) rotate(45deg);
}

.demo-arrow::before {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0;
}

.is-playing .demo-arrow::before { animation: arrow-travel 1.8s var(--ease) infinite; }

@keyframes arrow-travel {
    0%   { opacity: 0; transform: translateX(0); }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(22px); }
}

@media (max-width: 900px) {
    .demo-flow { flex-direction: column; }
    .demo-col--process { flex: 1 1 auto; }
    .demo-arrow { width: 2px; height: 26px; align-self: center; flex-basis: 26px; }
    .demo-arrow::after { right: 50%; top: auto; bottom: -1px; transform: translateX(50%) rotate(135deg); }
    .demo-arrow::before { left: 50%; top: 0; margin-left: -3px; margin-top: 0; }
    .is-playing .demo-arrow::before { animation-name: arrow-travel-y; }
}

@keyframes arrow-travel-y {
    0%   { opacity: 0; transform: translateY(0); }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(22px); }
}

/* ------------------------------------------------------------ JSON block */

.demo-json {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    background: var(--navy-800);
    color: #cbd8ee;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    margin: 0;
}

.demo-json .k { color: #93c5fd; }
.demo-json .s { color: #86efac; }
.demo-json .n { color: #fcd34d; }
.demo-json .b { color: #f0abfc; }

/* --------------------------------------------------------------- results */

.result-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line-soft);
    font-size: var(--text-sm);
}

.result-row:last-child { border-bottom: 0; }
.result-row__label { color: var(--muted); font-size: var(--text-xs); }
.result-row__value { font-weight: 620; color: var(--navy-800); text-align: right; }

.is-playing .result-row {
    animation: field-in 420ms var(--ease) both;
    animation-delay: calc(700ms + var(--i, 0) * 130ms);
}

@keyframes field-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Verdict pill: LIVE / SPOOF / MATCH / NO MATCH / DETECTED */
.verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: 0.02em;
}

.verdict svg { width: 15px; height: 15px; }
.verdict--ok   { background: var(--emerald-50); color: #047857; }
.verdict--bad  { background: var(--rose-50);    color: var(--rose-600); }
.verdict--warn { background: var(--amber-50);   color: #b45309; }

.is-playing .verdict { animation: verdict-in 480ms var(--ease) both; animation-delay: 900ms; }

@keyframes verdict-in {
    0%   { opacity: 0; transform: scale(0.86); }
    60%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================================== 1. OCR === */

.ocr-doc {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    padding: var(--space-4);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.ocr-doc__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--navy-800);
    margin-bottom: var(--space-3);
}

.ocr-doc__title { font-size: var(--text-sm); font-weight: 700; color: var(--navy-800); }
.ocr-doc__sub { font-size: 0.65rem; color: var(--muted); font-family: var(--font-mono); }

.ocr-line {
    height: 6px;
    border-radius: 3px;
    background: var(--slate-200);
    margin-bottom: 7px;
}

.ocr-line--short { width: 45%; }
.ocr-line--mid   { width: 70%; }
.ocr-line--dark  { background: var(--slate-300); }

.ocr-doc__total {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--navy-800);
}

/* Scan line sweeping the document while the model runs. */
.ocr-doc__scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 34%;
    background: linear-gradient(180deg,
        rgba(37, 99, 235, 0) 0%,
        rgba(37, 99, 235, 0.14) 55%,
        rgba(37, 99, 235, 0.30) 92%,
        rgba(37, 99, 235, 0.85) 100%);
    opacity: 0;
    pointer-events: none;
}

.is-playing .ocr-doc__scan { animation: ocr-scan 2.4s var(--ease) infinite; }

@keyframes ocr-scan {
    0%   { opacity: 0; transform: translateY(-100%); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(300%); }
}

/* ================================================= 2. Face — shared parts */

.face-stage {
    position: relative;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--slate-100), var(--slate-200));
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.face-stage--dark { background: var(--grad-navy); }
.face-avatar { width: 58%; height: auto; display: block; }

/* Bounding box drawn around the detected face. */
.face-box {
    position: absolute;
    left: 29%; top: 16%;
    width: 42%; height: 62%;
    border: 2px solid var(--emerald-500);
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.face-box::after {
    content: attr(data-label);
    position: absolute;
    top: -1.55rem; left: -2px;
    background: var(--emerald-500);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.is-playing .face-box { animation: box-in 620ms var(--ease) both; animation-delay: 600ms; }

@keyframes box-in {
    from { opacity: 0; transform: scale(1.28); }
    to   { opacity: 1; transform: scale(1); }
}

/* Corner reticle used while "scanning". */
.face-scan {
    position: absolute;
    inset: 12%;
    border: 1px dashed rgba(37, 99, 235, 0.55);
    border-radius: 8px;
    opacity: 0;
}

.is-playing .face-scan { animation: face-scan 2.4s var(--ease) infinite; }

@keyframes face-scan {
    0%, 100% { opacity: 0; transform: scale(1.06); }
    40%, 60% { opacity: 1; transform: scale(1); }
}

/* ==================================================== 3. Face Recognition */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.gallery__item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    padding: var(--space-2);
    text-align: center;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.gallery__item svg { width: 100%; height: auto; max-width: 46px; margin: 0 auto 0.3rem; display: block; }
.gallery__name { font-size: 0.66rem; font-weight: 600; color: var(--slate-600); display: block; }
.gallery__id { font-size: 0.6rem; font-family: var(--font-mono); color: var(--muted); }

.gallery__item--match {
    border-color: var(--emerald-500);
    background: var(--emerald-50);
}

.gallery__item--match .gallery__name { color: #047857; }

.is-playing .gallery__item {
    animation: gallery-scan 2.6s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 220ms);
}

@keyframes gallery-scan {
    0%       { box-shadow: none; }
    18%, 30% { box-shadow: var(--ring); }
    45%      { box-shadow: none; }
}

/* ================================================== 4. Face Verification */

.verify-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: center;
}

.verify-pair__vs {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--slate-400);
}

.verify-tile { text-align: center; }
.verify-tile__caption {
    display: block;
    font-size: 0.66rem;
    color: var(--muted);
    margin-top: 0.4rem;
}

.match-meter {
    margin-top: var(--space-4);
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--slate-200);
    overflow: hidden;
}

.match-meter__fill {
    display: block;
    height: 100%;
    width: var(--match, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-500), var(--emerald-500));
}

.is-playing .match-meter__fill { animation: match-grow 1.2s var(--ease) both; animation-delay: 500ms; }

@keyframes match-grow { from { width: 0; } to { width: var(--match, 0%); } }

.match-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: var(--muted);
    margin-top: 0.35rem;
}

/* ===================================================== 5. Face Liveness */

.liveness-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .liveness-pair { grid-template-columns: minmax(0, 1fr); }
}

.liveness-case {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--white);
}

.liveness-case--ok  { border-color: rgba(16, 185, 129, 0.4); }
.liveness-case--bad { border-color: rgba(225, 29, 72, 0.35); }

.liveness-case__head {
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-3);
}

/* A "screen bezel" drawn around the spoof avatar — a photo of a photo. */
.spoof-frame {
    position: absolute;
    inset: 16% 22%;
    border: 3px solid var(--slate-400);
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
}

.spoof-frame::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -9px;
    width: 26px; height: 4px;
    margin-left: -13px;
    border-radius: 2px;
    background: var(--slate-400);
}

.spoof-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg,
        rgba(255,255,255,0) 38%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 62%);
}

.is-playing .spoof-glare { animation: glare 2.8s var(--ease) infinite; }

@keyframes glare {
    0%, 100% { transform: translateX(-60%); }
    50%      { transform: translateX(60%); }
}

/* ======================================================= 6. Predict AI === */

.predict-field {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}

.predict-text {
    font-size: var(--text-lg);
    color: var(--navy-800);
    min-height: 2.6em;
    line-height: 1.5;
}

.predict-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    vertical-align: text-bottom;
    background: var(--brand);
    margin-left: 1px;
    animation: caret 1.05s steps(2, start) infinite;
}

@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.predict-ghost { color: var(--slate-400); }

.predict-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-soft);
}

.predict-chip {
    border: 1px solid var(--blue-200);
    background: var(--surface-brand);
    color: var(--blue-700);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.predict-chip:hover { background: var(--blue-100); transform: translateY(-1px); }
.predict-chip--top { background: var(--grad-brand); color: var(--white); border-color: transparent; }
.predict-chip[hidden] { display: none; }

.predict-chip { animation: field-in 300ms var(--ease) both; }

/* ================================== 7. Attendance / authentication flow === */

.decision-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.decision-node {
    width: 100%;
    max-width: 460px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: var(--space-3) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-xs);
}

.decision-node--start { background: var(--surface-tint); }
.decision-node--check { border-color: var(--blue-200); background: var(--surface-brand); }
.decision-node--end {
    border-color: rgba(16, 185, 129, 0.45);
    background: var(--emerald-50);
}

.decision-node__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--navy-800);
}

.decision-node__q {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 0.2rem;
}

.decision-node__model {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--blue-700);
    background: var(--white);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-full);
    padding: 0.1rem 0.5rem;
    margin-top: 0.4rem;
}

/* Vertical rail with the YES path continuing and the NO path branching right. */
.decision-link {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 46px;
}

.decision-link::before {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--line);
}

.decision-link__yes {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    color: #047857;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0.35rem;
}

.decision-link__no {
    position: absolute;
    left: calc(50% + 2px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: var(--space-10);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--rose-600);
    white-space: nowrap;
}

.decision-link__no::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: var(--space-10);
    height: 2px;
    background: rgba(225, 29, 72, 0.35);
}

.decision-reject {
    border: 1px dashed rgba(225, 29, 72, 0.45);
    background: var(--rose-50);
    color: var(--rose-600);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
}

.is-playing .decision-node,
.is-playing .decision-link {
    animation: field-in 380ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 190ms);
}

@media (max-width: 560px) {
    .decision-link__no { font-size: 0.56rem; padding-left: var(--space-4); }
    .decision-link__no::before { width: var(--space-4); }
}

/* ==================================================== 8. Architecture === */

.arch {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.arch__tier {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: var(--space-4);
}

.arch__tier--edge    { background: var(--surface-tint); }
.arch__tier--gateway { border-color: var(--blue-200); background: var(--surface-brand); }
.arch__tier--models  { border-color: var(--blue-200); }

.arch__label {
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.arch__tier--gateway .arch__label { color: var(--blue-700); }

.arch__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.arch__item {
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 550;
    color: var(--slate-600);
}

.arch__item--accent {
    border-color: var(--blue-300);
    background: var(--white);
    color: var(--blue-700);
    font-weight: 650;
}

.arch__join {
    height: 20px;
    position: relative;
}

.arch__join::before {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px; margin-left: -1px;
    background: var(--line);
}

.arch__join::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 7px; height: 7px;
    margin-left: -4px;
    border-right: 2px solid var(--slate-300);
    border-bottom: 2px solid var(--slate-300);
    transform: rotate(45deg);
}

/* ------------------------------------------------------- reduced motion */

/* tokens.css clamps animation DURATION globally, but not delay. Several demo elements
   are staged behind a delay of up to ~1.2s and use `both` fill, so without this they sit
   at their from-state — invisible — for over a second for exactly the users who asked for
   less motion. Zero the delays so those users get the finished graphic immediately. */
@media (prefers-reduced-motion: reduce) {
    .is-playing .result-row,
    .is-playing .verdict,
    .is-playing .face-box,
    .is-playing .match-meter__fill,
    .is-playing .gallery__item,
    .is-playing .decision-node,
    .is-playing .decision-link,
    .predict-chip {
        animation-delay: 0ms !important;
    }
}

/* --------------------------------------------------------- demo section */

/* Section wrapper used on product pages so demos sit on a tinted band. */
.demo-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}