/* Système : automatisation façon n8n. Gmail -> agent IA -> Docs -> réseaux sociaux.
   Boucle de 9 s. Chaque étape a son départ (--d) ; les fenêtres d'animation sont
   courtes et le délai les décale, donc un seul jeu de @keyframes sert à toutes. */

.wf { background: #0e0f12; --loop: 9s; }

.wf__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.3px);
  background-size: 16px 16px;
}

.wf__status {
  position: absolute;
  right: 14px;
  top: 17px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.wf__status i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: wf-live 1.6s ease-in-out infinite; }

/* ---------- Fils ---------- */

.wf__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf__wires path { fill: none; stroke-linecap: round; }
.wf__wires .trk { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 3 5; }
.wf__wires .run { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 130; stroke-dashoffset: 130; animation: wf-wire var(--loop) ease-in-out var(--d) infinite; }

.wf__packet {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(var(--accent-rgb), 0.9);
  offset-rotate: 0deg;
  opacity: 0;
  animation: wf-packet var(--loop) ease-in-out var(--d) infinite;
}

/* ---------- Nœuds ---------- */

.wf__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 124px;
  height: 46px;
  padding: 0 12px 0 5px;
  border-radius: 14px;
  background: #1b1c21;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  animation: wf-on var(--loop) ease var(--d) infinite;
}
.wf__node--mail { left: 18px; top: 66px; }
.wf__node--ai { left: 118px; top: 132px; }
.wf__node--docs { left: 18px; top: 198px; }
.wf__node--post { left: 118px; top: 264px; }

.wf__icon { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.wf__icon svg { width: 24px; height: 24px; }
.wf__node--ai .wf__icon { background: rgba(var(--accent-rgb), 0.16); }
.wf__node--post .wf__icon { gap: 1px; }
.wf__node--post .wf__icon svg { width: 15px; height: 15px; }

/* Anneau de réflexion autour de l'agent IA. */
.wf__node--ai .wf__icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  opacity: 0;
  animation: wf-think var(--loop) linear var(--d) infinite;
}

.wf__done {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3ddc84;
  opacity: 0;
  animation: wf-done var(--loop) ease var(--d) infinite;
}
.wf__done::after { content: ""; position: absolute; left: 5.5px; top: 3.5px; width: 4px; height: 8px; border: solid #0b0b0d; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }

/* ---------- Animations ---------- */

@keyframes wf-live { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@keyframes wf-on {
  0%, 22%, 100% { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; transform: none; }
  4%, 16% { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.18), 0 0 26px rgba(245, 165, 36, 0.45); transform: scale(1.05); }
}

@keyframes wf-wire {
  0% { stroke-dashoffset: 130; opacity: 1; }
  11%, 86% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes wf-packet {
  0% { offset-distance: 0%; opacity: 0; }
  1.5% { opacity: 1; }
  10% { offset-distance: 100%; opacity: 1; }
  12%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes wf-think {
  0% { opacity: 0; transform: rotate(0deg); }
  3% { opacity: 1; }
  17% { opacity: 1; transform: rotate(720deg); }
  20%, 100% { opacity: 0; transform: rotate(720deg); }
}

@keyframes wf-done {
  0%, 6% { opacity: 0; transform: scale(0.3); }
  12%, 86% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1); }
}