/* ============================================================================
 * GamePanel V3 HUD Pack — Animations Style 2 : Data-Flow Grafana
 *
 * Mood : écran monitoring NASA, flux de données, lignes lumineuses
 * Easing : ease-out rapide, transitions courtes et précises
 *
 * Activé par : body.ui-v3.theme-anims-dataflow
 * Respecte prefers-reduced-motion : voir fin de fichier
 * ============================================================================ */

/* ============================================================================
   @keyframes
   ============================================================================ */

/* Lignes lumineuses qui circulent dans les bordures des cards */
@keyframes dataFlowLine {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Fade-in info-dense rapide */
@keyframes dataFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse data sur les counters au update */
@keyframes dataPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); color: var(--primary); }
  100% { transform: scale(1); }
}

/* Blink sur la LED de status (rapide, monitoring style) */
@keyframes dataLedBlink {
  0%, 100% { opacity: 1; }
  45%, 55% { opacity: 0.3; }
}

/* Slide-in depuis la gauche (sidebar) */
@keyframes dataSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scan horizontal (une fois au render des cards) */
@keyframes dataScan {
  from { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.6; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* ============================================================================
   SERVER CARDS — apparition rapide
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .server-card {
  animation: dataFadeIn 0.18s ease-out both;
}

/* Stagger rapide */
body.ui-v3.theme-anims-dataflow .server-card:nth-child(1) { animation-delay: 0.02s; }
body.ui-v3.theme-anims-dataflow .server-card:nth-child(2) { animation-delay: 0.05s; }
body.ui-v3.theme-anims-dataflow .server-card:nth-child(3) { animation-delay: 0.08s; }
body.ui-v3.theme-anims-dataflow .server-card:nth-child(4) { animation-delay: 0.11s; }
body.ui-v3.theme-anims-dataflow .server-card:nth-child(5) { animation-delay: 0.14s; }
body.ui-v3.theme-anims-dataflow .server-card:nth-child(6) { animation-delay: 0.17s; }

/* ============================================================================
   LIGNE LUMINEUSE CIRCULANT sur la bordure top des cards (data-flow)
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .server-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary, #ffa53d) 40%,
    var(--secondary, #5dd5fc) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: dataFlowLine 8s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

/* Card online : ligne plus lumineuse */
body.ui-v3.theme-anims-dataflow .server-card.online::before {
  opacity: 1;
  height: 2px;
}

/* ============================================================================
   LED MONITORING — blink rapide
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .status-badge.online::before {
  animation: dataLedBlink 1.6s ease-in-out infinite;
}

/* ============================================================================
   COUNTERS STAT — pulse au changement
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .stat-value.updated {
  animation: dataPulse 0.2s ease-out;
}

/* ============================================================================
   PAGE / SECTION — apparition rapide
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .page.active {
  animation: dataFadeIn 0.15s ease-out both;
}

/* ============================================================================
   SIDEBAR NAV — slide-in depuis gauche
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .sidebar-section .nav-item {
  animation: dataSlideIn 0.15s ease-out both;
}

body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(1) .nav-item:nth-child(1) { animation-delay: 0.02s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(1) .nav-item:nth-child(2) { animation-delay: 0.04s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(1) .nav-item:nth-child(3) { animation-delay: 0.06s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(2) .nav-item:nth-child(1) { animation-delay: 0.08s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(2) .nav-item:nth-child(2) { animation-delay: 0.10s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(3) .nav-item:nth-child(1) { animation-delay: 0.12s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(3) .nav-item:nth-child(2) { animation-delay: 0.14s; }
body.ui-v3.theme-anims-dataflow .sidebar-section:nth-child(3) .nav-item:nth-child(3) { animation-delay: 0.16s; }

/* ============================================================================
   MODAL — apparition rapide
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .modal-overlay {
  animation: dataFadeIn 0.12s ease-out;
}

body.ui-v3.theme-anims-dataflow .modal-box {
  animation: dataFadeIn 0.18s ease-out both;
}

/* ============================================================================
   TRANSITIONS BOUTONS — rapides
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .btn {
  transition:
    background 0.10s ease-out,
    color 0.10s ease-out,
    border-color 0.10s ease-out,
    box-shadow 0.10s ease-out,
    transform 0.10s ease-out;
}

/* ============================================================================
   TOPBAR STATS — pulse léger sur update
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .sys-stat-item strong.updated {
  animation: dataPulse 0.2s ease-out;
}

/* ============================================================================
   LIGNE FLUIDE sur les séparateurs de section
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .section-header {
  position: relative;
  overflow: hidden;
}

body.ui-v3.theme-anims-dataflow .section-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--primary, #ffa53d), transparent);
  animation: dataFlowLine 4s linear infinite;
  background-size: 200% 100%;
}

/* ============================================================================
   LOGIN — scan-line rapide
   ============================================================================ */
body.ui-v3.theme-anims-dataflow .login-card {
  animation: dataFadeIn 0.2s ease-out both;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  body.ui-v3.theme-anims-dataflow * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}