/* agent-knowledge.css
 *
 * Styles of the Wissen product subpage (agent.feedbax.* /wissen). Loaded on top of
 * agent-landing.css, which carries the shared la-* primitives (la-anim-rise, la-orbit-blob).
 * Everything here is page-specific: the two self-running dashboard mocks of sources 02 and 04,
 * one 13s loop each. Sources 01 and 03 show the widget itself, as a clip of the scripted LeadWin
 * demo (_DemoClip), and need nothing from here.
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 */

/* ---------- scan sweep over a list of released pages (source 02) ---------- */

/* A soft green bar sweeping down the page list, so "indexed / read in" reads as an
   ongoing process. Runs on its own short cycle, independent of the 13s source loops. */
@keyframes la-kn-scan {
    0% { opacity: 0; transform: translateY(0); }
    10%, 90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(150px); }
}

.la-kn-scan {
    background: linear-gradient(90deg, rgba(16, 185, 129, .14), rgba(16, 185, 129, 0));
    animation: la-kn-scan 3.6s linear infinite;
}

/* ---------- source 02: website scan (13s) ---------- */

@keyframes la-kn-w-tick-1 {
    0%, 6% { opacity: 0; transform: scale(.5); }
    10%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-w-tick-2 {
    0%, 14% { opacity: 0; transform: scale(.5); }
    18%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-w-tick-3 {
    0%, 22% { opacity: 0; transform: scale(.5); }
    26%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

/* The two status labels share a slot: "scanning" hands over to "summarized". */
@keyframes la-kn-w-scanning {
    0%, 30% { opacity: 1; }
    36%, 96% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-kn-w-done {
    0%, 32% { opacity: 0; transform: translateY(6px); }
    38%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-w-summary {
    0%, 34% { opacity: 0; transform: translateY(14px); }
    40%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-w-cursor {
    0%, 44% { opacity: 0; transform: translate(90px, 90px); }
    49% { opacity: 1; }
    54%, 56% { opacity: 1; transform: translate(0, 0); }
    58% { transform: translate(0, 0) scale(.8); }
    60%, 62% { opacity: 1; transform: translate(0, 0) scale(1); }
    67%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* Colour-carrying keyframes go through var() so the dark theme needs no duplicate. */
@keyframes la-kn-w-edit {
    0%, 58% { box-shadow: inset 0 0 0 1px var(--la-kn-edit-idle); }
    62%, 88% { box-shadow: inset 0 0 0 1.5px var(--la-kn-edit-active); }
    94%, 100% { box-shadow: inset 0 0 0 1px var(--la-kn-edit-idle); }
}

@keyframes la-kn-w-caret {
    0%, 58% { opacity: 0; }
    60%, 88% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

@keyframes la-kn-w-ok {
    0%, 74% { opacity: 0; transform: translateY(8px); }
    80%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

.la-kn-w-tick-1 { animation: la-kn-w-tick-1 13s linear infinite; }
.la-kn-w-tick-2 { animation: la-kn-w-tick-2 13s linear infinite; }
.la-kn-w-tick-3 { animation: la-kn-w-tick-3 13s linear infinite; }
.la-kn-w-scanning { animation: la-kn-w-scanning 13s linear infinite; }
.la-kn-w-cursor { animation: la-kn-w-cursor 13s linear infinite; }
.la-kn-w-ok { animation: la-kn-w-ok 13s linear infinite; }

/* "done" and "scanning" occupy the same grid slot so the row does not jump. */
.la-kn-w-done {
    margin-left: 0;
    animation: la-kn-w-done 13s linear infinite;
}

.la-kn-w-summary {
    --la-kn-edit-idle: #e4e4e7;
    --la-kn-edit-active: #0000ff;
    animation:
        la-kn-w-summary 13s linear infinite,
        la-kn-w-edit 13s linear infinite;
}

.dark .la-kn-w-summary {
    --la-kn-edit-idle: #3f3f46;
    --la-kn-edit-active: #ffffff;
}

/* Outer layer: only visible while the summary is in edit mode. */
.la-kn-w-caret { animation: la-kn-w-caret 13s linear infinite; }

/* Inner layer: the blink itself, on its own typing-speed cycle. Reuses la-caret from
   agent-landing.css, which is linked before this file — the keyframe here was identical. */
.la-kn-caret-blink { animation: la-caret .9s steps(1) infinite; }

/* ---------- source 04: Intercom (13s) ---------- */

@keyframes la-kn-i-connecting {
    0%, 8% { opacity: 1; }
    14%, 96% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-kn-i-connected {
    0%, 10% { opacity: 0; transform: translateY(4px); }
    16%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-i-art-1 {
    0%, 20% { opacity: 0; transform: translateY(10px); }
    25%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-i-art-2 {
    0%, 26% { opacity: 0; transform: translateY(10px); }
    31%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-i-art-3 {
    0%, 32% { opacity: 0; transform: translateY(10px); }
    37%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-kn-i-cursor {
    0%, 40% { opacity: 0; transform: translate(110px, 80px); }
    45% { opacity: 1; }
    50%, 52% { opacity: 1; transform: translate(0, 0); }
    54% { transform: translate(0, 0) scale(.8); }
    56%, 58% { opacity: 1; transform: translate(0, 0) scale(1); }
    63%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes la-kn-i-row {
    0%, 52% { background: var(--la-kn-row-idle); }
    56%, 90% { background: var(--la-kn-row-active); }
    96%, 100% { background: var(--la-kn-row-idle); }
}

@keyframes la-kn-i-panel {
    0%, 54% { opacity: 0; transform: translateX(105%); }
    60%, 88% { opacity: 1; transform: translateX(0); }
    94%, 100% { opacity: 0; transform: translateX(105%); }
}

.la-kn-i-connecting { animation: la-kn-i-connecting 13s linear infinite; }
.la-kn-i-connected { animation: la-kn-i-connected 13s linear infinite; }
.la-kn-i-kb { animation: la-kn-i-connected 13s linear infinite; }
.la-kn-i-art-1 { animation: la-kn-i-art-1 13s linear infinite; }
.la-kn-i-art-3 { animation: la-kn-i-art-3 13s linear infinite; }
.la-kn-i-cursor { animation: la-kn-i-cursor 13s linear infinite; }
.la-kn-i-panel { animation: la-kn-i-panel 13s linear infinite; }

/* The picked row reveals and then tints, so it carries both loops. */
.la-kn-i-art-2 {
    --la-kn-row-idle: #ffffff;
    --la-kn-row-active: #f2f1ff;
    animation:
        la-kn-i-art-2 13s linear infinite,
        la-kn-i-row 13s linear infinite;
}

.dark .la-kn-i-art-2 {
    --la-kn-row-idle: #18181b;
    --la-kn-row-active: #232040;
}

/* ---------- reduced motion: freeze every loop in a readable state ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-kn-w-tick-1, .la-kn-w-tick-2, .la-kn-w-tick-3, .la-kn-w-done, .la-kn-w-summary, .la-kn-w-ok,
    .la-kn-i-connected, .la-kn-i-kb, .la-kn-i-art-1, .la-kn-i-art-2, .la-kn-i-art-3 {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .la-kn-w-cursor, .la-kn-w-caret,
    .la-kn-w-scanning,
    .la-kn-scan,
    .la-kn-i-cursor, .la-kn-i-connecting, .la-kn-i-panel {
        animation: none;
        opacity: 0;
    }

    .la-kn-caret-blink { animation: none; }

    .la-kn-w-summary { box-shadow: inset 0 0 0 1px var(--la-kn-edit-idle); }
    .la-kn-i-art-2 { background: var(--la-kn-row-idle); }
}