/* ============================================================
   ATTENTION DYNAMICS — Animations
   ============================================================
   All @keyframes and animation utility classes.
   Depends on: tokens.css
   ============================================================ */


/* --------------------------------------------------------
   1. PULSE & GLOW ANIMATIONS
   -------------------------------------------------------- */

@keyframes badge-pulse {
  0%   { transform: scale(0.95); opacity: 0.4; }
  50%  { transform: scale(1.15); opacity: 0.9; filter: drop-shadow(0 0 2px var(--color-cyan)); }
  100% { transform: scale(0.95); opacity: 0.4; }
}

@keyframes pulse-glow {
  0%   { stroke-width: 1.5px; stroke: rgba(0, 194, 255, 0.3); }
  50%  { stroke-width: 2px; stroke: rgba(0, 194, 255, 0.7); filter: drop-shadow(0 0 2px var(--color-cyan)); }
  100% { stroke-width: 1.5px; stroke: rgba(0, 194, 255, 0.3); }
}

.kernel-glow {
  animation: pulse-glow 4.5s infinite ease-in-out;
  transform-origin: 144px 80px;
}


/* --------------------------------------------------------
   2. RESEARCH SYMBOL ANIMATIONS
   -------------------------------------------------------- */

@keyframes flow-dash {
  0%   { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}

.flow-wave-1 { stroke-dasharray: 8 6;  animation: flow-dash 5.5s linear infinite; }
.flow-wave-2 { stroke-dasharray: 10 7; animation: flow-dash 5s linear infinite; }
.flow-wave-3 { stroke-dasharray: 6 5;  animation: flow-dash 4.5s linear infinite; }
.flow-wave-4 { stroke-dasharray: 12 8; animation: flow-dash 6s linear infinite; }
.flow-wave-5 { stroke-dasharray: 7 6;  animation: flow-dash 5.2s infinite linear; }
.flow-wave-6 { stroke-dasharray: 9 6;  animation: flow-dash 5.8s infinite linear; }

@keyframes dot-move {
  0%   { opacity: 0.3; transform: scale(0.9); }
  50%  { opacity: 0.9; transform: scale(1.1); }
  100% { opacity: 0.3; transform: scale(0.9); }
}

.dot-animated-1 { animation: dot-move 2.2s infinite ease-in-out; }
.dot-animated-2 { animation: dot-move 2.2s infinite ease-in-out 0.4s; }
.dot-animated-3 { animation: dot-move 2.2s infinite ease-in-out 0.8s; }
.dot-animated-4 { animation: dot-move 2.2s infinite ease-in-out 1.2s; }
.dot-animated-5 { animation: dot-move 2.2s infinite ease-in-out 1.6s; }


/* --------------------------------------------------------
   3. BKAM DIAGRAM FLOW ANIMATIONS
   -------------------------------------------------------- */

@keyframes flow-run {
  0%   { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

.flow-stream-1 { animation: flow-run 3s linear infinite; }
.flow-stream-2 { animation: flow-run 2.4s linear infinite reverse; }

@keyframes node-pulse-blue {
  0%   { stroke-width: 1.5px; stroke: var(--color-blue); fill: rgba(0, 102, 255, 0.05); }
  50%  { stroke-width: 2.5px; stroke: var(--color-cyan); fill: rgba(0, 194, 255, 0.15); }
  100% { stroke-width: 1.5px; stroke: var(--color-blue); fill: rgba(0, 102, 255, 0.05); }
}

@keyframes node-pulse-cyan {
  0%   { stroke-width: 1.5px; stroke: var(--color-cyan); fill: rgba(0, 194, 255, 0.05); }
  50%  { stroke-width: 2.5px; stroke: var(--color-pure-white); fill: rgba(255, 255, 255, 0.15); }
  100% { stroke-width: 1.5px; stroke: var(--color-cyan); fill: rgba(0, 194, 255, 0.05); }
}

.pulse-node-blue { animation: node-pulse-blue 4.5s infinite ease-in-out; }
.pulse-node-cyan { animation: node-pulse-cyan 3.6s infinite ease-in-out; }

@keyframes active-node-pulse-1 {
  0%   { opacity: 0.5; fill: var(--color-blue); }
  100% { opacity: 1; fill: var(--color-cyan); filter: drop-shadow(0 0 2px var(--color-cyan)); }
}

@keyframes active-node-pulse-2 {
  0%   { opacity: 0.5; fill: var(--color-cyan); }
  100% { opacity: 1; fill: var(--color-pure-white); filter: drop-shadow(0 0 2px var(--color-cyan)); }
}

.active-node-1 { animation: active-node-pulse-1 3s infinite alternate ease-in-out; }
.active-node-2 { animation: active-node-pulse-2 2.5s infinite alternate ease-in-out; }


/* --------------------------------------------------------
   4. AMBIENT GLOW FLOATING
   -------------------------------------------------------- */

@keyframes float-glow-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, 8%) scale(1.2); }
}

@keyframes float-glow-2 {
  0%   { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(8%, -8%) scale(0.9); }
}

.glow-1 { animation: float-glow-1 35s infinite alternate ease-in-out; }
.glow-2 { animation: float-glow-2 40s infinite alternate ease-in-out; }


/* --------------------------------------------------------
   5. WAVE BREATH (BKAM diagram)
   -------------------------------------------------------- */

@keyframes wave-breath-1 {
  0%   { stroke-width: 2px; opacity: 0.7; }
  100% { stroke-width: 3.5px; opacity: 1; }
}

@keyframes wave-breath-2 {
  0%   { stroke-width: 1px; opacity: 0.6; }
  100% { stroke-width: 2px; opacity: 0.9; }
}

.wave-1 { animation: wave-breath-1 4.5s infinite alternate ease-in-out; }
.wave-2 { animation: wave-breath-2 3.2s infinite alternate ease-in-out; }


/* --------------------------------------------------------
   6. TELEMETRY-SPECIFIC ANIMATIONS
   -------------------------------------------------------- */

@keyframes connection-pulse {
  0%   { stroke-opacity: 0.15; }
  50%  { stroke-opacity: 0.6; }
  100% { stroke-opacity: 0.15; }
}

@keyframes status-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@keyframes scan-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}


/* --------------------------------------------------------
   7. TERMINAL TYPING CURSOR
   -------------------------------------------------------- */

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typing-cursor::after {
  content: '▋';
  color: var(--color-cyan);
  animation: cursor-blink 1s infinite;
  font-size: 0.9em;
  margin-left: 2px;
}