/* ============================================================
   animations.css — Keyframes & motion utilities
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.25); opacity: 0.9; }
  100% { transform: scale(2.8);  opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradient-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glitch chromatic offset — used for critical state */
@keyframes glitch {
  0%, 100%  { text-shadow: 0 0 12px currentColor; }
  20%       { text-shadow: 2px 0 0 var(--red), -2px 0 0 var(--cyan), 0 0 12px currentColor; }
  40%       { text-shadow: -1px 0 0 var(--red), 1px 0 0 var(--cyan), 0 0 12px currentColor; }
  60%       { text-shadow: 0 0 12px currentColor; }
}

/* Scan sweep down a full-height container */
@keyframes scan-sweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ── Utilities ──────────────────────────────────────────────── */
.anim-blink       { animation: blink 1.8s var(--ease-in-out) infinite; }
.anim-blink-fast  { animation: blink 0.9s var(--ease-in-out) infinite; }
.anim-fade-up     { animation: fade-up 500ms var(--ease-out) both; }
.anim-fade-in     { animation: fade-in 400ms var(--ease-out) both; }
.anim-glitch      { animation: glitch 3.5s var(--ease-in-out) infinite; }

.anim-d1 { animation-delay: 40ms; }
.anim-d2 { animation-delay: 80ms; }
.anim-d3 { animation-delay: 120ms; }
.anim-d4 { animation-delay: 160ms; }
.anim-d5 { animation-delay: 200ms; }

.anim-stagger > * { animation: fade-up 500ms var(--ease-out) both; }
.anim-stagger > *:nth-child(1) { animation-delay: 30ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 70ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 110ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 150ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 190ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 230ms; }

/* ── Map ping rings ─────────────────────────────────────────── */
.ping-ring {
  position: absolute;
  width: 50px; height: 50px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  animation: pulse-ring 2.6s var(--ease-out) infinite;
}

.ping-ring:nth-child(2) { animation-delay: 0.85s; }
.ping-ring:nth-child(3) { animation-delay: 1.7s; }

/* ── Mini bar chart (sidebar) ───────────────────────────────── */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 6px;
}

.mini-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  border-radius: 1px;
  animation: bar-grow 600ms var(--ease-out) both;
  transform-origin: bottom;
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* ── Progress bar ───────────────────────────────────────────── */
.progress-bar-wrap {
  position: fixed;
  top: var(--topbar-height);
  left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 99;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--cyan) 0%,
    var(--violet) 50%,
    var(--cyan) 100%);
  background-size: 200% 100%;
  animation: gradient-drift 2.5s var(--ease-in-out) infinite;
  transition: width 500ms var(--ease-out);
  box-shadow:
    0 0 14px var(--cyan-glow),
    0 0 4px var(--cyan);
}

/* ── Shimmer placeholder ───────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2));
  background-size: 200% 100%;
  animation: shimmer 1.6s var(--ease-in-out) infinite;
}