/* agent-helpcenter.css
 *
 * Styles of the help-center product subpage (leadwin.ai /de/hilfe-center). Loaded on top of
 * agent-landing.css, which carries the shared la-* primitives (la-anim-rise, la-typing-dot, la-orbit-blob).
 * Everything here is one of the page's self-running mocks:
 *   la-hc-h-*  hero: question, knowledge-base search, answer with article card, click, article opens (14s)
 *   la-hc-s-*  sources: a draft goes live and is translated; an Intercom import runs through (10s)
 *   la-hc-p-*  public page: the agent's invitation in the corner (9s)
 *   la-hc-c-*  chat: the popular articles of the start screen rise in, the pointer rests on one (9s)
 * Every movement stays inside its frame (the frames clip), and reduced motion freezes each loop in a readable
 * state. Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 */

/* ---------- hero (14s) ---------- */

@keyframes la-hc-h-q {
    0%, 3% { opacity: 0; transform: translateY(8px); }
    7%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: none; }
}

@keyframes la-hc-h-tools {
    0%, 9% { opacity: 0; }
    12%, 21% { opacity: 1; }
    24%, 100% { opacity: 0; }
}

@keyframes la-hc-h-a {
    0%, 24% { opacity: 0; transform: translateY(8px); }
    28%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: none; }
}

@keyframes la-hc-h-card {
    0%, 30% { opacity: 0; transform: translateY(8px); }
    34%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: none; }
}

@keyframes la-hc-h-cursor {
    0%, 38% { opacity: 0; transform: translate(90px, 70px); }
    42% { opacity: 1; }
    48%, 50% { opacity: 1; transform: translate(0, 0); }
    52% { transform: translate(0, 0) scale(.8); }
    54%, 56% { opacity: 1; transform: translate(0, 0) scale(1); }
    60%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes la-hc-h-article {
    0%, 54% { opacity: 0; transform: translateY(14px); }
    58%, 86% { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateY(14px); }
}

.la-hc-h-q { animation: la-hc-h-q 14s linear infinite; }
.la-hc-h-tools { animation: la-hc-h-tools 14s linear infinite; }
.la-hc-h-a { animation: la-hc-h-a 14s linear infinite; }
.la-hc-h-card { animation: la-hc-h-card 14s linear infinite; }
.la-hc-h-cursor { animation: la-hc-h-cursor 14s linear infinite; }
.la-hc-h-article { animation: la-hc-h-article 14s ease-out infinite; }

/* ---------- sources (10s) ---------- */

@keyframes la-hc-s-draft {
    0%, 40% { opacity: 1; }
    46%, 94% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-hc-s-live {
    0%, 42% { opacity: 0; transform: scale(.85); }
    48%, 94% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-hc-s-tr {
    0%, 54% { opacity: 0; transform: translateY(6px); }
    60%, 92% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
}

@keyframes la-hc-s-bar {
    0%, 8% { transform: scaleX(0); }
    60%, 94% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

@keyframes la-hc-s-run {
    0%, 60% { opacity: 1; }
    64%, 94% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-hc-s-done {
    0%, 62% { opacity: 0; }
    66%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

.la-hc-s-draft { animation: la-hc-s-draft 10s linear infinite; }
.la-hc-s-live { animation: la-hc-s-live 10s linear infinite; }
.la-hc-s-tr { animation: la-hc-s-tr 10s linear infinite; }
.la-hc-s-bar { animation: la-hc-s-bar 10s ease-in-out infinite; }
.la-hc-s-run { animation: la-hc-s-run 10s linear infinite; }
.la-hc-s-done { animation: la-hc-s-done 10s linear infinite; }

/* ---------- public page (9s) ---------- */

@keyframes la-hc-p-hint {
    0%, 12% { opacity: 0; transform: translateY(8px) scale(.96); }
    18%, 88% { opacity: 1; transform: none; }
    94%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
}

.la-hc-p-hint {
    transform-origin: 100% 100%;
    animation: la-hc-p-hint 9s ease-out infinite;
}

/* ---------- chat start screen (9s) ---------- */

@keyframes la-hc-c-row-1 {
    0%, 4% { opacity: 0; transform: translateY(8px); }
    10%, 100% { opacity: 1; transform: none; }
}

@keyframes la-hc-c-row-2 {
    0%, 10% { opacity: 0; transform: translateY(8px); background: #ffffff; }
    16%, 50% { opacity: 1; transform: none; background: #ffffff; }
    56%, 86% { opacity: 1; transform: none; background: #eef2ff; }
    92%, 100% { opacity: 1; transform: none; background: #ffffff; }
}

@keyframes la-hc-c-row-3 {
    0%, 16% { opacity: 0; transform: translateY(8px); }
    22%, 100% { opacity: 1; transform: none; }
}

@keyframes la-hc-c-cursor {
    0%, 28% { opacity: 0; transform: translate(70px, 60px); }
    34% { opacity: 1; }
    44%, 86% { opacity: 1; transform: translate(0, 0); }
    92%, 100% { opacity: 0; transform: translate(0, 0); }
}

.la-hc-c-row-1 { animation: la-hc-c-row-1 9s ease-out infinite; }
.la-hc-c-row-2 { animation: la-hc-c-row-2 9s ease-out infinite; }
.la-hc-c-row-3 { animation: la-hc-c-row-3 9s ease-out infinite; }
.la-hc-c-cursor { animation: la-hc-c-cursor 9s ease-in-out infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .la-hc-h-q, .la-hc-h-a, .la-hc-h-card,
    .la-hc-s-live, .la-hc-s-tr, .la-hc-s-done,
    .la-hc-p-hint,
    .la-hc-c-row-1, .la-hc-c-row-2, .la-hc-c-row-3 {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .la-hc-h-tools, .la-hc-h-cursor, .la-hc-h-article,
    .la-hc-s-draft, .la-hc-s-run,
    .la-hc-c-cursor {
        animation: none;
        opacity: 0;
    }

    .la-hc-s-bar {
        animation: none;
        transform: none;
    }
}