/* agent-team.css
 *
 * Styles of the Team product subpage (agent.feedbax.* /team). Loaded on top of
 * agent-landing.css, which carries the shared la-* primitives (la-anim-rise,
 * la-anim-soft, la-orbit-blob, la-typing-dot, the la-caret keyframe). Everything here is
 * page-specific: the takeover button states toggled by agent-team.js and the two
 * self-running mock loops (11s each) of feature rows 01 and 03. Row 02 shows the widget itself, as
 * a clip of the scripted LeadWin demo (_DemoClip).
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 *
 * Colour convention on this page: the inbox column and the feature mocks are our dashboard
 * and use the semantic tokens, so they follow light/dark. The widget preview in the takeover
 * section shows the visitor's view and keeps the widget's literal colours on purpose.
 */

/* ---------- takeover: button state (driven by agent-team.js) ---------- */

/* The pulse class carries both the "AI is answering" look and the attention pulse, so a
   single class toggle switches the button between its two states. Colour-carrying
   keyframes go through var() so the dark theme needs no duplicate. */
.la-tm-toggle {
    --la-tm-btn-bg: #f4f4f5;
    --la-tm-btn-text: #18181b;
    --la-tm-btn-on-bg: #18181b;
    --la-tm-btn-on-text: #ffffff;
    --la-tm-btn-ring: rgba(0, 0, 255, .45);
    background: var(--la-tm-btn-bg);
    color: var(--la-tm-btn-text);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.dark .la-tm-toggle {
    --la-tm-btn-bg: #27272a;
    --la-tm-btn-text: #fafafa;
    --la-tm-btn-on-bg: #fafafa;
    --la-tm-btn-on-text: #18181b;
    --la-tm-btn-ring: rgba(99, 102, 241, .55);
}

.la-tm-toggle.la-tm-pulse {
    background: var(--la-tm-btn-on-bg);
    color: var(--la-tm-btn-on-text);
    animation: la-tm-pulse 1.8s ease-out infinite;
}

@keyframes la-tm-pulse {
    0% { box-shadow: 0 0 0 0 var(--la-tm-btn-ring); }
    70% { box-shadow: 0 0 0 11px rgba(0, 0, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 255, 0); }
}

/* The "try it" nudge above the transcript, bobbing until the visitor takes over. */
@keyframes la-tm-hint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.la-tm-hint { animation: la-tm-hint 1.6s ease-in-out infinite; }

/* Entrance delays for the messages that appear after the takeover; the animation itself
   is the shared la-anim-soft. */
.la-tm-delay-1 { animation-delay: .15s; }
.la-tm-delay-2 { animation-delay: .3s; }

/* ---------- row 01: person profile, 11s loop ---------- */

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

@keyframes la-tm-p2 {
    0%, 16% { opacity: 0; transform: translateY(6px); }
    21%, 94% { opacity: 1; transform: none; }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-pcaret {
    0%, 16% { opacity: 0; }
    18%, 34% { opacity: 1; }
    36%, 100% { opacity: 0; }
}

@keyframes la-tm-p3 {
    0%, 30% { opacity: 0; transform: scale(.6); }
    35%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-p4 {
    0%, 36% { opacity: 0; transform: scale(.6); }
    41%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-p5 {
    0%, 42% { opacity: 0; transform: scale(.6); }
    47%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-p6 {
    0%, 52% { opacity: 0; transform: scale(.7); }
    58%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-p7 {
    0%, 70% { opacity: 0; transform: translateY(8px); }
    76%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; }
}

.la-tm-p1 { animation: la-tm-p1 11s linear infinite; }
.la-tm-p2 { animation: la-tm-p2 11s linear infinite; }
.la-tm-pcaret { animation: la-tm-pcaret 11s linear infinite; }
.la-tm-p3 { animation: la-tm-p3 11s linear infinite; }
.la-tm-p4 { animation: la-tm-p4 11s linear infinite; }
.la-tm-p5 { animation: la-tm-p5 11s linear infinite; }
.la-tm-p6 { animation: la-tm-p6 11s linear infinite; }
.la-tm-p7 { animation: la-tm-p7 11s linear infinite; }

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

/* ---------- row 03: responsibility and notifications, 11s loop ---------- */

@keyframes la-tm-n1 {
    0%, 5% { opacity: 0; transform: scale(.5); }
    10%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-n2 {
    0%, 12% { opacity: 0; transform: scale(.5); }
    17%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-n3 {
    0%, 20% { opacity: 0; transform: scale(.5); }
    25%, 94% { opacity: 1; transform: scale(1); }
    99%, 100% { opacity: 0; }
}

@keyframes la-tm-n4 {
    0%, 40% { opacity: 0; transform: translateX(40px); }
    48%, 92% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: translateX(20px); }
}

.la-tm-n1 { animation: la-tm-n1 11s linear infinite; }
.la-tm-n2 { animation: la-tm-n2 11s linear infinite; }
.la-tm-n3 { animation: la-tm-n3 11s linear infinite; }
.la-tm-n4 { animation: la-tm-n4 11s ease-out infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .la-tm-p1, .la-tm-p2, .la-tm-p3, .la-tm-p4, .la-tm-p5, .la-tm-p6, .la-tm-p7,
    .la-tm-n1, .la-tm-n2, .la-tm-n3, .la-tm-n4 {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* The caret only makes sense while something is being typed. */
    .la-tm-pcaret,
    .la-tm-caret {
        animation: none;
        opacity: 0;
    }

    .la-tm-hint,
    .la-tm-toggle.la-tm-pulse {
        animation: none;
    }
}