/*
 * animation.css — Heartbeat pulse, sparkline hover, drawer spring, skeleton loaders,
 *                 SSE connection flash, and tier-promotion highlight.
 */

/* ── Heartbeat (operative pulse ring) ── */
@keyframes heartbeat-ring {
    0%   { transform: scale(1);   opacity: 0.8; }
    50%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}
.heartbeat-ring {
    position: absolute; inset: -3px; border-radius: 50%;
    border: 1px solid var(--accent);
    animation: heartbeat-ring 2s var(--ease) infinite;
    pointer-events: none;
}
.heartbeat-ring.warn { border-color: var(--warn); }
.heartbeat-ring.dead { border-color: var(--bad); animation: none; opacity: 0.4; }

/* Slow pulse for idle operatives */
@keyframes pulse-idle {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}
.dot-pulse { animation: pulse-idle 2.4s ease-in-out infinite; }

/* ── Sparkline hover glow ── */
.sparkline-wrap { position: relative; }
.sparkline-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 3px 7px;
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-main);
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s;
    z-index: 10;
}
.sparkline-wrap:hover .sparkline-tooltip { opacity: 1; }

/* ── Drawer spring ── */
@keyframes drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes drawer-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
#drawer.entering { animation: drawer-in 0.28s var(--ease) forwards; }
#drawer.leaving  { animation: drawer-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }

/* ── Skeleton loaders ── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) 25%,
        var(--surface-3) 50%,
        var(--surface-2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text  { height: 12px; margin-bottom: 6px; }
.skeleton-title { height: 18px; margin-bottom: 8px; width: 60%; }
.skeleton-stat  { height: 32px; }

/* ── SSE connect flash ── */
@keyframes sse-flash {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}
.sse-flash {
    animation: sse-flash 1.2s ease-out forwards;
}

/* ── Tier promotion highlight ── */
@keyframes tier-promote {
    0%   { background: rgba(0,255,136,0.18); }
    100% { background: transparent; }
}
.tier-promote-flash {
    animation: tier-promote 1.8s var(--ease) forwards;
}

/* ── Progress bar transition ── */
.pbar-fill { transition: width 0.6s var(--ease); }

/* ── Graph node pulse (promoted memory nodes in repo + memory views) ── */
@keyframes node-pulse {
    0%   { r: var(--base-r, 8); opacity: 0.85; }
    50%  { r: calc(var(--base-r, 8) + 3); opacity: 0.55; }
    100% { r: var(--base-r, 8); opacity: 0.85; }
}
.node-pulse {
    animation: node-pulse 2.4s ease-in-out infinite;
}

/* ── Fade in for new event rows ── */
@keyframes ev-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ev-item.new { animation: ev-fadein 0.25s var(--ease) forwards; }

/* ── Kanban card drop ── */
@keyframes card-drop {
    0%   { transform: translateY(-8px); opacity: 0.6; }
    100% { transform: translateY(0);    opacity: 1; }
}
.kcard.dropped, .tcard.dropped {
    animation: card-drop 0.2s var(--ease) forwards;
}
