/* ============================================================
   ROSI Landing — Animations
   ============================================================ */

/* Scroll-Pfeil wippt sanft nach unten (lädt zum Weiterscrollen ein) */
@keyframes scroll-arrow-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* Pipeline-Tooltip: Stufen-Punkt leuchtet als Welle nach unten durch */
@keyframes tip-pipe-dot {
    0%, 100% {
        border-color: rgba(74, 158, 255, 0.5);
        background: rgba(8, 18, 36, 0.96);
        box-shadow: none;
    }
    10% {
        border-color: var(--color-trace-ok);
        background: var(--color-trace-ok);
        box-shadow: 0 0 9px var(--color-trace-ok);
    }
    26% {
        border-color: rgba(63, 224, 162, 0.5);
        background: rgba(8, 18, 36, 0.96);
        box-shadow: none;
    }
}

/* Reveal-on-Scroll: scroll-reveal.js fügt .is-visible hinzu */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal ohne JS: einmalige Einblend-Animation beim Mount.
   Für interaktive Komponenten (z. B. ContactSection), bei denen ein
   per JS umgeschaltetes .is-visible mit Blazor-Re-Renders kollidiert. */
.reveal-on-load {
    animation: reveal-rise 700ms var(--ease-out) both;
}

@keyframes reveal-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-load {
        animation: none;
    }
}

/* Staggered children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Hero-Visual — Keyframes für den Live-KI-Assistenten
   ============================================================ */

/* Wandernder Glow oben im Panel */
@keyframes aiui-glow-drift {
    0%, 100% { transform: translateX(-6%); opacity: 0.8; }
    50%      { transform: translateX(6%);  opacity: 1; }
}

/* KI-Avatar atmet (sanfter Puls, ohne Drehung — passt zum Roboterkopf) */
@keyframes aiui-spark {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.12); opacity: 1; }
}

/* Status-Punkt blinkt während „denkt/generiert" */
@keyframes aiui-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* „Denkt …"-Punkte hüpfen */
@keyframes aiui-think {
    0%, 100% { transform: translateY(0);    opacity: 0.4; }
    50%      { transform: translateY(-3px); opacity: 1; }
}

/* Token erscheint (Stream) */
@keyframes aiui-tok-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Schreib-Cursor blinkt */
@keyframes aiui-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Wissens-Hub: Signal-Punkt wandert von der Quelle zur KI/Antwort.
   pathLength auf 100 normiert, dash 2/98 → ein Punkt pro Leitung. */
@keyframes hub-flow {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

/* Wissens-Hub: zentrale KI „atmet" (weicher Glow-Puls) */
@keyframes hub-glow {
    0%, 100% { opacity: 0.12; transform: scale(0.85); }
    50%      { opacity: 0.30; transform: scale(1.12); }
}

/* ============================================================
   Agentic RAG Trace — Animation Keyframes
   ------------------------------------------------------------
   Jede Karte/Connector hat dieselbe Cycle-Duration; der
   animation-delay (= --n × --trace-stagger) verschiebt die
   gleichen Keyframes in der Zeit. Dadurch entsteht eine Welle,
   die endlos durch die Pipeline läuft — eine Karte ist nie
   ganz „aus", weil die nächste schon hochfährt.
   ============================================================ */

/* Karte: dormant → activating (blau) → completed (mint) → dormant */
@keyframes trace-card-cycle {
    0%, 100% {
        border-color: var(--color-border);
        background: rgba(15, 41, 77, 0.35);
        box-shadow: none;
    }
    4% {
        border-color: rgba(74, 158, 255, 0.7);
        box-shadow:
            0 0 0 1px rgba(74, 158, 255, 0.7),
            0 0 24px var(--color-accent-glow);
    }
    8% {
        border-color: var(--color-accent);
        background: rgba(74, 158, 255, 0.10);
        box-shadow:
            0 0 0 1px var(--color-accent),
            0 0 38px rgba(74, 158, 255, 0.45);
    }
    14% {
        border-color: var(--color-accent);
        background: rgba(74, 158, 255, 0.08);
        box-shadow:
            0 0 0 1px var(--color-accent),
            0 0 26px var(--color-accent-glow);
    }
    20% {
        border-color: var(--color-trace-ok);
        background: rgba(63, 224, 162, 0.05);
        box-shadow:
            0 0 0 1px var(--color-trace-ok),
            0 0 18px var(--color-trace-ok-soft);
    }
    90% {
        border-color: rgba(63, 224, 162, 0.55);
        background: rgba(63, 224, 162, 0.03);
        box-shadow:
            0 0 0 1px rgba(63, 224, 162, 0.45),
            0 0 12px rgba(63, 224, 162, 0.12);
    }
    97% {
        border-color: var(--color-border);
        background: rgba(15, 41, 77, 0.35);
        box-shadow: none;
    }
}

/* Scan-Beam quer über die Karte beim Aktivieren */
@keyframes trace-card-scan {
    0%, 3%, 13%, 100% {
        opacity: 0;
        transform: translateX(0);
    }
    4% {
        opacity: 0.9;
        transform: translateX(0);
    }
    12% {
        opacity: 0.9;
        transform: translateX(450%);
    }
}

/* Head-Farbe / Icon-Farbe folgt dem Zustand */
@keyframes trace-head-cycle {
    0%, 100% { color: var(--color-text-muted); }
    5%, 16% {
        color: var(--color-accent);
        text-shadow: 0 0 10px rgba(74, 158, 255, 0.45);
    }
    24%, 90% {
        color: var(--color-trace-ok);
        text-shadow: 0 0 8px rgba(63, 224, 162, 0.25);
    }
    97% { color: var(--color-text-muted); }
}

/* Sub-Tools (search_bm25 / search_graph / search_by_finas) */
@keyframes trace-sub-cycle {
    0%, 100% {
        border-color: rgba(74, 158, 255, 0.15);
        color: var(--color-text-muted);
        background: rgba(0, 9, 21, 0.5);
    }
    8% {
        border-color: var(--color-accent);
        color: var(--color-text);
        background: rgba(74, 158, 255, 0.12);
        box-shadow: 0 0 0 1px var(--color-accent);
    }
    18%, 88% {
        border-color: rgba(63, 224, 162, 0.4);
        color: rgba(230, 236, 245, 0.7);
        background: rgba(63, 224, 162, 0.04);
        box-shadow: none;
    }
}

/* Connector-Linie füllt sich nach rechts */
@keyframes trace-link-fill-cycle {
    0%, 100% { transform: scaleX(0); opacity: 1; }
    5% { transform: scaleX(0); opacity: 1; }
    14% { transform: scaleX(1); opacity: 1; }
    90% { transform: scaleX(1); opacity: 0.65; }
    96% { transform: scaleX(1); opacity: 0; }
}

/* Wandernder Pulse-Dot entlang der Connector-Schiene */
@keyframes trace-link-pulse-cycle {
    0%, 4%, 16%, 100% { opacity: 0; left: 0%; }
    5% { opacity: 1; left: 0%; }
    14% { opacity: 1; left: 100%; }
    15% { opacity: 0; left: 100%; }
}

/* Connector-Label hellt sich auf */
@keyframes trace-link-label-cycle {
    0%, 100% { color: var(--color-text-muted); }
    8%, 18% {
        color: var(--color-accent);
        text-shadow: 0 0 8px rgba(74, 158, 255, 0.35);
    }
    24%, 88% { color: var(--color-trace-ok); }
}

/* Status-Track: Balken füllt sich */
@keyframes trace-track-bar-cycle {
    0%, 100% { transform: scaleX(0); }
    8% { transform: scaleX(0); }
    18% { transform: scaleX(1); }
    96% { transform: scaleX(1); }
}

/* Status-Track: Dot pulsiert beim Aktivieren, bleibt grün */
@keyframes trace-track-dot-cycle {
    0%, 100% {
        background: var(--color-border);
        box-shadow: none;
        transform: scale(1);
    }
    6% {
        background: var(--color-accent);
        box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
        transform: scale(1.45);
    }
    18%, 90% {
        background: var(--color-trace-ok);
        box-shadow: 0 0 0 3px var(--color-trace-ok-soft);
        transform: scale(1);
    }
}

@keyframes trace-track-label-cycle {
    0%, 100% { color: var(--color-text-muted); }
    18%, 90% { color: var(--color-text); }
}

/* Badge-Refresh-Icon dreht sich permanent */
@keyframes trace-badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Agent-Loop-Icon: drehender Refresh, schneller */
@keyframes trace-agent-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Live-Dot pulsiert */
@keyframes trace-live-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--color-trace-ok-soft);
    }
    70% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trace-card,
    .trace-card::after,
    .trace-card__head,
    .trace-sub,
    .trace-link__fill,
    .trace-link__pulse,
    .trace-link__label,
    .track-step__bar::after,
    .track-step__dot,
    .track-step__label,
    .agentic-trace__badge-icon,
    .agentic-trace__live-dot,
    .trace-card--agent .trace-card__icon {
        animation: none !important;
    }
    /* Statischer „abgeschlossen"-Zustand für alle Stages */
    .trace-card {
        border-color: rgba(63, 224, 162, 0.4);
    }
    .trace-card__head { color: var(--color-trace-ok); }
    .trace-link__fill { transform: scaleX(1); }
    .track-step__dot { background: var(--color-trace-ok); }
    .track-step__bar::after { transform: scaleX(1); }
}