/* agent-analytics.css
 *
 * Styles of the Analytics product subpage (agent.feedbax.* /analytics, same slug in all
 * four languages). Loaded on top of agent-landing.css, which carries the shared la-*
 * primitives (la-anim-rise, la-orbit-blob) and is linked before this file — which is why
 * the staggered bar delays live here as their own classes rather than as Tailwind
 * utilities: the shared entrance uses the `animation` shorthand and would reset them.
 * Everything else is page-specific: the two pulsing presence dots, the drawn line chart
 * (10s) and the two self-running panels of the funnel section (12s).
 * Deliberately outside the Tailwind pipeline, same as agent-landing.css.
 *
 * Every mock on this page is our own dashboard, so all of it uses the semantic tokens and
 * follows light/dark. The colour-bearing keyframes go through var() so the dark theme
 * needs no duplicates.
 */

/* ---------- hero: the daily bars grow in one after another ---------- */

@keyframes la-an-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.la-an-bar {
    transform-origin: bottom;
    animation: la-an-grow .6s ease-out both;
}

.la-an-bar-1 { animation-delay: .05s; }
.la-an-bar-2 { animation-delay: .1s; }
.la-an-bar-3 { animation-delay: .15s; }
.la-an-bar-4 { animation-delay: .2s; }
.la-an-bar-5 { animation-delay: .25s; }
.la-an-bar-6 { animation-delay: .3s; }
.la-an-bar-7 { animation-delay: .35s; }
.la-an-bar-8 { animation-delay: .4s; }
.la-an-bar-9 { animation-delay: .45s; }

/* ---------- presence dots: green for live sessions, rose for hot visitors ---------- */

.la-an-live {
    --la-an-live-ring: rgba(16, 185, 129, .4);
    animation: la-an-live 2s ease-out infinite;
}

.la-an-hot {
    --la-an-hot-ring: rgba(244, 63, 94, .35);
    animation: la-an-hot 2s ease-out infinite;
}

.dark .la-an-live { --la-an-live-ring: rgba(16, 185, 129, .55); }
.dark .la-an-hot { --la-an-hot-ring: rgba(244, 63, 94, .5); }

@keyframes la-an-live {
    0%, 100% { box-shadow: 0 0 0 0 var(--la-an-live-ring); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@keyframes la-an-hot {
    0%, 100% { box-shadow: 0 0 0 0 var(--la-an-hot-ring); }
    50% { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
}

/* ---------- history chart: the line draws itself, the area fades in behind it (10s) ---------- */

@keyframes la-an-draw {
    0%, 6% { stroke-dashoffset: 820; }
    46%, 94% { stroke-dashoffset: 0; }
    98%, 100% { stroke-dashoffset: 820; }
}

@keyframes la-an-area {
    0%, 10% { opacity: 0; }
    50%, 94% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

.la-an-draw {
    stroke-dasharray: 820;
    animation: la-an-draw 10s linear infinite;
}

.la-an-area { animation: la-an-area 10s linear infinite; }

/* ---------- funnel panel: four bars stretch in, then the drop-off note (12s) ---------- */

@keyframes la-an-f1 {
    0%, 3% { opacity: 0; transform: scaleX(0); }
    13%, 93% { opacity: 1; transform: scaleX(1); }
    98%, 100% { opacity: 0; }
}

@keyframes la-an-f2 {
    0%, 9% { opacity: 0; transform: scaleX(0); }
    19%, 93% { opacity: 1; transform: scaleX(1); }
    98%, 100% { opacity: 0; }
}

@keyframes la-an-f3 {
    0%, 15% { opacity: 0; transform: scaleX(0); }
    25%, 93% { opacity: 1; transform: scaleX(1); }
    98%, 100% { opacity: 0; }
}

@keyframes la-an-f4 {
    0%, 21% { opacity: 0; transform: scaleX(0); }
    31%, 93% { opacity: 1; transform: scaleX(1); }
    98%, 100% { opacity: 0; }
}

@keyframes la-an-drop {
    0%, 26% { opacity: 0; }
    32%, 93% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

.la-an-f1,
.la-an-f2,
.la-an-f3,
.la-an-f4 {
    transform-origin: left;
}

.la-an-f1 { animation: la-an-f1 12s linear infinite; }
.la-an-f2 { animation: la-an-f2 12s linear infinite; }
.la-an-f3 { animation: la-an-f3 12s linear infinite; }
.la-an-f4 { animation: la-an-f4 12s linear infinite; }
.la-an-drop { animation: la-an-drop 12s linear infinite; }

/* ---------- activity panel: the four events arrive in order (12s) ---------- */

@keyframes la-an-a1 {
    0%, 6% { opacity: 0; transform: translateY(10px); }
    12%, 95% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-an-a2 {
    0%, 16% { opacity: 0; transform: translateY(10px); }
    22%, 95% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-an-a3 {
    0%, 26% { opacity: 0; transform: translateY(10px); }
    32%, 95% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes la-an-a4 {
    0%, 36% { opacity: 0; transform: translateY(10px); }
    42%, 95% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

.la-an-a1 { animation: la-an-a1 12s linear infinite; }
.la-an-a2 { animation: la-an-a2 12s linear infinite; }
.la-an-a3 { animation: la-an-a3 12s linear infinite; }
.la-an-a4 { animation: la-an-a4 12s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .la-an-bar,
    .la-an-live,
    .la-an-hot,
    .la-an-area,
    .la-an-f1,
    .la-an-f2,
    .la-an-f3,
    .la-an-f4,
    .la-an-drop,
    .la-an-a1,
    .la-an-a2,
    .la-an-a3,
    .la-an-a4 {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* The line has to keep its full length, not just stop animating. */
    .la-an-draw {
        animation: none;
        stroke-dashoffset: 0;
    }
}