/* ============================================================
   Animations
   ============================================================ */
@keyframes flowDash{ to{ stroke-dashoffset:-200; } }
.flow-line{ stroke-dasharray:6 6; animation:flowDash 3.2s linear infinite; }
.flow-line.slow{ animation-duration:5s; }
.flow-line.fast{ animation-duration:2s; }

@keyframes flowDot{
  0%{ offset-distance:0%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}
.flow-dot{ animation:flowDot 3.2s linear infinite; }

@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(79,70,229,.35); }
  50%{ box-shadow:0 0 0 8px rgba(79,70,229,0); }
}
.pulse{ animation:pulseGlow 2.4s ease-in-out infinite; }

@keyframes nodePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
.node-pulse{ animation:nodePulse 2.6s ease-in-out infinite; transform-origin:center; }

/* Slow traveling dot along the dashed connector lines in the "what you'll
   see once connected" preview (Dashboard + HRMS). Deliberately gentle —
   fades in, drifts right, fades out — never fast or chaotic. */
@keyframes flowTravel{
  0%{ left:0; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.float{ animation:floatY 3s ease-in-out infinite; }

@keyframes shimmer{
  0%{ background-position:-200px 0; }
  100%{ background-position:200px 0; }
}
.shimmer-bg{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size:200px 100%;
  background-repeat:no-repeat;
  animation:shimmer 2.5s infinite;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.fade-up{ animation:fadeUp .4s ease both; }
.fade-up.d1{ animation-delay:.05s; }
.fade-up.d2{ animation-delay:.1s; }
.fade-up.d3{ animation-delay:.15s; }
.fade-up.d4{ animation-delay:.2s; }

@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.spin-slow{ animation:spinSlow 20s linear infinite; }

@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes countUp{
  from{ opacity:0; }
  to{ opacity:1; }
}