/* agent-approach.css
 *
 * Styles of the Ansprache product subpage (agent.feedbax.* /ansprache). Loaded on top
 * of agent-landing.css, which carries the shared la-* primitives (la-rise, la-soft,
 * la-dot, la-spark, pills). Everything here is page-specific: the editor launcher's ping,
 * the studio preview states toggled by agent-approach.js and the self-running demos of levers 2
 * and 3 (8s/11s loops). The hero plays the scripted LeadWin demo (_ProductDemo), lever 1 a clip of
 * it (_DemoClip).
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 */

/* ---------- editor: the launcher's ping, once every 6s ---------- */

@keyframes la-ans-ping {
    0%, 6% { box-shadow: 0 0 0 0 rgba(0, 0, 255, .35); }
    15% { box-shadow: 0 0 0 14px rgba(0, 0, 255, 0); }
    33.32%, 39.32% { box-shadow: 0 0 0 0 rgba(0, 0, 255, .35); }
    48.32% { box-shadow: 0 0 0 14px rgba(0, 0, 255, 0); }
    66.65%, 72.65% { box-shadow: 0 0 0 0 rgba(0, 0, 255, .35); }
    81.65% { box-shadow: 0 0 0 14px rgba(0, 0, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 255, 0); }
}

.la-ans-ping { animation: la-ans-ping 18s ease-out infinite; }

/* ---------- studio preview (states set by agent-approach.js) ---------- */

.la-ans-pop { animation: la-ans-pop .45s cubic-bezier(.2, .9, .3, 1.2) both; }

.la-ans-pop-late { animation: la-ans-pop .45s .2s cubic-bezier(.2, .9, .3, 1.2) both; }

@keyframes la-ans-pop {
    from { opacity: 0; transform: translateY(12px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chat card re-entry on replay / setting changes. */
.la-ans-enter { animation: la-soft .35s ease-out both; }

/* Small pill variant for the compact studio option rows. */
.la-pill-sm { padding: 6px 14px; font-size: 12.5px; }

/* Starter catalogue rows: selection state set by JS; blocked = three already picked. */
.la-ans-starter { transition: color .2s, opacity .2s; }

.la-ans-starter-on { color: inherit; font-weight: 600; }

.la-ans-starter-blocked { opacity: .55; cursor: not-allowed; }

/* Chips inside the (always light) widget preview card, rebuilt by JS in click order. */
.la-ans-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: #18181b;
    animation: la-soft .3s ease-out both;
}

.la-ans-chip-row-next { border-top: 1px solid #f4f4f5; }

/* ---------- lever 2: delay demo (8s loop) ---------- */

@keyframes la-ans-f2-bar {
    0% { transform: scaleX(0); }
    40%, 100% { transform: scaleX(1); }
}

@keyframes la-ans-f2-label-wait {
    0%, 38% { opacity: 1; }
    44%, 96% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-ans-f2-label-now {
    0%, 40% { opacity: 0; transform: translateY(6px); }
    46%, 93% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
}

@keyframes la-ans-f2-bubble {
    0%, 40% { opacity: 0; transform: translateY(16px) scale(.82); }
    46%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}

@keyframes la-ans-f2-ring {
    0%, 40% { opacity: 0; transform: scale(.6); }
    48% { opacity: .5; transform: scale(1.1); }
    62%, 100% { opacity: 0; transform: scale(1.5); }
}

@keyframes la-ans-f2-tag {
    0%, 58% { opacity: 0; transform: translateY(8px); }
    64%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

.la-ans-f2-bar { transform-origin: left; animation: la-ans-f2-bar 8s linear infinite; }
.la-ans-f2-label-wait { animation: la-ans-f2-label-wait 8s linear infinite; }
.la-ans-f2-label-now { animation: la-ans-f2-label-now 8s linear infinite; }
.la-ans-f2-bubble { animation: la-ans-f2-bubble 8s cubic-bezier(.2, .9, .3, 1.2) infinite; }
.la-ans-f2-ring { animation: la-ans-f2-ring 8s linear infinite; }
.la-ans-f2-tag { animation: la-ans-f2-tag 8s linear infinite; }

/* ---------- lever 3: per-page swap demo (11s loop) ---------- */

@keyframes la-ans-f3-a {
    0%, 44% { opacity: 1; }
    49%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes la-ans-f3-b {
    0%, 46% { opacity: 0; transform: translateY(6px); }
    51%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-ans-f3-bubble1 {
    0%, 8% { opacity: 0; transform: translateY(14px) scale(.9); }
    13%, 42% { opacity: 1; transform: none; }
    47%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes la-ans-f3-bubble2 {
    0%, 52% { opacity: 0; transform: translateY(14px) scale(.9); }
    57%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-ans-f3-yes {
    0%, 58% { opacity: 0; transform: translateY(8px); }
    63%, 71% { opacity: 1; transform: scale(1); }
    74% { transform: scale(.88); }
    77%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-ans-f3-ok {
    0%, 79% { opacity: 0; transform: translateY(8px); }
    84%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

.la-ans-f3-a { animation: la-ans-f3-a 11s linear infinite; }
.la-ans-f3-b { animation: la-ans-f3-b 11s linear infinite; }
.la-ans-f3-bubble1 { animation: la-ans-f3-bubble1 11s linear infinite; }
.la-ans-f3-bubble2 { animation: la-ans-f3-bubble2 11s linear infinite; }
.la-ans-f3-yes { animation: la-ans-f3-yes 11s linear infinite; }
.la-ans-f3-ok { animation: la-ans-f3-ok 11s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .la-ans-f2-label-now, .la-ans-f2-ring, .la-ans-f2-tag,
    .la-ans-f3-b, .la-ans-f3-bubble2, .la-ans-f3-yes, .la-ans-f3-ok {
        animation: none;
        opacity: 0;
    }

    .la-ans-f2-label-wait, .la-ans-f2-bubble,
    .la-ans-f3-a, .la-ans-f3-bubble1 {
        animation: none;
        opacity: 1;
    }

    .la-ans-f2-bar, .la-ans-ping {
        animation: none;
    }

    /* These four sit on server-rendered studio content and fill from opacity 0, so dropping
       the animation is not enough — the content has to be put back on screen explicitly. */
    .la-ans-pop,
    .la-ans-pop-late,
    .la-ans-enter,
    .la-ans-chip-row {
        animation: none;
        opacity: 1;
        transform: none;
    }
}