/* ATLAS · components/live-bar.css — AuditHunt v3.4.0
 * Animated fill bars used on dashboard, findings, status, intake.
 * Extracted from dashboard.html inline styles. All pages import this.
 * Requires: atlaslife.js running (provides --breath, --pulse, --scan).
 */

/* ── Bar container ─────────────────────────────────────────────── */
.live-bar-wrap {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--faint, #252A38);
  overflow: hidden;
}

/* ── Fill track ────────────────────────────────────────────────── */
.live-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: var(--r-pill);
  transform-origin: left center;
  animation: lb-enter 1.1s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}

/* ── Shimmer sweep ─────────────────────────────────────────────── */
.live-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 45%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.18) 55%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: lb-sweep 2.8s 0.9s var(--ease-in-out, ease-in-out) infinite;
}

/* ── Severity colour variants ──────────────────────────────────── */
.live-bar-fill.sev-c { background: var(--ember,    #E03638); }
.live-bar-fill.sev-h { background: var(--bronze-hi,#E89640); }
.live-bar-fill.sev-m { background: var(--gold,     #C8972A); }
.live-bar-fill.sev-l { background: var(--shield-hi,#4A7FC1); }
.live-bar-fill.sev-i { background: var(--ash,      #8A96AE); }
.live-bar-fill.ok    { background: var(--verify,   #3DA875); }

/* ── Telemetry tick line (sits below a chart) ──────────────────── */
.telemetry-tick {
  height: 1px;
  background: var(--faint, #252A38);
  position: relative;
  overflow: hidden;
  margin-top: 6px;
}
.telemetry-tick::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40px;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--shield-hi, #4A7FC1), transparent);
  animation: tt-scan calc(var(--scan, 3s) * 1) linear infinite;
}

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes lb-enter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes lb-sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}
@keyframes tt-scan {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100% + 80px)); }
}

/* ── Reduced-motion fallback ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .live-bar-fill,
  .live-bar-fill::after,
  .telemetry-tick::after {
    animation: none;
  }
  .live-bar-fill::after { display: none; }
}

/* ── Utility: small-text floor ─────────────────────────────────── */
.mono-small {
  font-family: var(--f-mono, monospace);
  font-size:   var(--mono-min-size,     11px);
  font-weight: var(--mono-min-weight,   500);
  letter-spacing: var(--mono-min-tracking, 0.10em);
  text-transform: uppercase;
  color: var(--mute, #606878);
}