/* ================================
   CYBER ILLUSTRATIONS
   Animated inline-SVG art (shield-scan hero, globe/network hero,
   radar empty-state) rendered by src/config/illustrations.php.
   Kept in its own file (not dashboard-professional.css) so it can be
   linked only on the views that actually use an illustration.
   ================================ */

.cyber-illust { display: block; margin: 0 auto; overflow: visible; }

/* --- Shield scan (dashboard hero) --- */
.cyber-illust .shield-outline { filter: drop-shadow(0 0 10px rgba(254, 200, 54, 0.35)); }

.cyber-illust .scan-beam { animation: shieldScanSweep 2.6s ease-in-out infinite; }
@keyframes shieldScanSweep {
  0%   { transform: translateY(-38px); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { transform: translateY(38px); opacity: 0; }
}

.cyber-illust .check-dot { animation: checkPulse 2.2s ease-in-out infinite; transform-origin: center; }
.cyber-illust .check-dot:nth-child(2) { animation-delay: 0.4s; }
.cyber-illust .check-dot:nth-child(3) { animation-delay: 0.8s; }
@keyframes checkPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.3); }
}

/* --- Globe / network (landing hero) --- */
.cyber-illust .globe-ring { animation: globeSpin 46s linear infinite; transform-origin: center; }
@keyframes globeSpin { to { transform: rotate(360deg); } }

.cyber-illust .globe-node { animation: nodePulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes nodePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.cyber-illust .globe-link {
  stroke-dasharray: 6 7;
  animation: dataFlow 3.6s linear infinite;
}
@keyframes dataFlow { to { stroke-dashoffset: -130; } }

/* --- Radar empty-state --- */
.cyber-illust .radar-ping {
  transform-origin: center;
  animation: radarPing 2.4s ease-out infinite;
}
.cyber-illust .radar-ping:nth-child(2) { animation-delay: 0.8s; }
.cyber-illust .radar-ping:nth-child(3) { animation-delay: 1.6s; }
@keyframes radarPing {
  0%   { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.cyber-illust .radar-sweep { transform-origin: center; animation: radarSpin 3s linear infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cyber-illust * { animation: none !important; }
}