/* agent-instructions.css
 *
 * Styles of the Anweisungen product subpage (agent.feedbax.* /anweisungen). Loaded on top
 * of agent-landing.css, which carries the shared la-* primitives (la-anim-rise,
 * la-orbit-blob, the la-soft and la-caret keyframes). Everything here is page-specific:
 * the two self-running dashboard mocks of rows 03 and 04 (12s, 11s). The hero plays the scripted
 * LeadWin demo (_ProductDemo) and rows 01 and 02 clips of it (_DemoClip); they need nothing from here.
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 *
 * Colour convention on this page: every mock is our dashboard or the chat as the operator
 * sees it, so all of it follows the semantic tokens. Colour-carrying keyframes go through
 * var() and the variables are redefined under .dark, so no keyframe is duplicated.
 */

/* ---------- row 03: own instructions, 12s loop ---------- */

@keyframes la-in-t1 {
    0%, 6% { opacity: 0; }
    11%, 94% { opacity: 1; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-t2 {
    0%, 20% { opacity: 0; }
    25%, 94% { opacity: 1; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-tcaret {
    0%, 6% { opacity: 0; }
    8%, 38% { opacity: 1; }
    40%, 100% { opacity: 0; }
}

@keyframes la-in-t3 {
    0%, 42% { opacity: 0; transform: translateY(8px); }
    48%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

@keyframes la-in-t4 {
    0%, 52% { opacity: 0; transform: translateY(12px); }
    58%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

/* Marks the phrases the instructions produced; the highlight colour differs per theme. */
@keyframes la-in-t5 {
    0%, 62% { background: transparent; }
    68%, 94% { background: var(--la-in-mark); }
    99%, 100% { background: transparent; }
}

.la-in-t1 { animation: la-in-t1 12s linear infinite; }
.la-in-t2 { animation: la-in-t2 12s linear infinite; }
.la-in-tcaret { animation: la-in-tcaret 12s linear infinite; }
.la-in-t3 { animation: la-in-t3 12s linear infinite; }
.la-in-t4 { animation: la-in-t4 12s linear infinite; }

.la-in-t5 {
    --la-in-mark: #fef3c7;
    animation: la-in-t5 12s linear infinite;
}

.dark .la-in-t5 { --la-in-mark: #513c14; }

/* The blinking bar of the typing caret; reuses the landing's la-caret keyframe. */
.la-in-caret {
    background: var(--brand);
    animation: la-caret .9s steps(1) infinite;
}

/* ---------- row 04: pricing instructions, 11s loop ---------- */

@keyframes la-in-p1 {
    0%, 6% { opacity: 0; transform: translateY(8px); }
    11%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-p2 {
    0%, 13% { opacity: 0; transform: translateY(8px); }
    18%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-p3 {
    0%, 20% { opacity: 0; transform: translateY(8px); }
    25%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-p4 {
    0%, 38% { opacity: 0; transform: translateY(16px) scale(.97); }
    45%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-in-p5 {
    0%, 50% { opacity: 0; transform: translateY(8px); }
    56%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

.la-in-p1 { animation: la-in-p1 11s linear infinite; }
.la-in-p2 { animation: la-in-p2 11s linear infinite; }
.la-in-p3 { animation: la-in-p3 11s linear infinite; }
.la-in-p4 { animation: la-in-p4 11s linear infinite; }
.la-in-p5 { animation: la-in-p5 11s linear infinite; }

/* ---------- reduced motion: freeze the self-running loops in a readable state ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-in-t1, .la-in-t2, .la-in-t3, .la-in-t4,
    .la-in-p1, .la-in-p2, .la-in-p3, .la-in-p4, .la-in-p5 {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .la-in-t5 {
        animation: none;
        background: var(--la-in-mark);
    }

    .la-in-tcaret,
    .la-in-caret {
        animation: none;
        opacity: 0;
    }
}