/* ─────────────────────────────────────────────────────────────────────────────
   Le graphe d'Alfred, tel que l'application le dessine.

   Repris de public/infra.css (cartes, ports, câbles) et de public/infra.ts
   (géométrie des câbles et des ancres). Les valeurs ne sont pas « inspirées »
   de l'application : ce sont les siennes. Si l'application change de dessin,
   ce fichier doit suivre — sinon le site montre un produit qui n'existe pas.

   Tout est préfixé `ag-` : la feuille partagée du site a déjà ses `.port`,
   `.node`, etc., et rien ici ne doit s'y mélanger.
   ───────────────────────────────────────────────────────────────────────────── */

/* La fenêtre sur le graphe. La perspective est réglée par graph.js : à plat
   (vue de dessus) elle n'a aucun effet, incliné elle donne la profondeur. */
.ag-view{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  font-family:"Outfit","Segoe UI",-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.ag-world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}

/* ── Câbles ─────────────────────────────────────────────────────── */
.ag-edges,.ag-anchors{position:absolute;overflow:visible}
.ag-edges{z-index:1}
.ag-anchors{z-index:3}
.ag-nodes{position:absolute;left:0;top:0;z-index:2}

.ag-bloom{fill:none;stroke-width:12px;stroke-linecap:butt;opacity:.10;transition:opacity .5s}
.ag-strand{fill:none;stroke-linecap:round;transition:opacity .5s}
.ag-s1{stroke-width:1.2px;opacity:.22}
.ag-s2{stroke-width:1px;opacity:.18}
.ag-core{fill:none;stroke-width:1px;stroke-linecap:round;opacity:.85;transition:opacity .5s,stroke-width .5s}
/* L'état « survolé » de l'application : c'est lui qu'on allume sur le câble
   que la visite commente. */
.ag-edge.hot .ag-bloom{opacity:.20}
.ag-edge.hot .ag-core{opacity:1;stroke-width:2.2px}
.ag-edge.hot .ag-s1,.ag-edge.hot .ag-s2{opacity:.38}

.ag-label-text{fill:#fff;font-size:16px;font-weight:300;letter-spacing:.3px;
  text-anchor:middle;dominant-baseline:central}
.ag-label-bg{fill:rgb(20,20,22)}

.ag-anchor-spread{opacity:.35}
.ag-anchor-glow{opacity:.75}

/* ── Blocs ──────────────────────────────────────────────────────── */
.ag-node{position:absolute;width:300px;isolation:isolate}
.ag-backplate{position:absolute;inset:-15px;border-radius:49px;z-index:-1;
  border:2px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 20px 40px rgba(0,0,0,.22)}
.ag-surface{position:relative;z-index:1;box-sizing:border-box;min-height:178px;padding:20px;
  border-radius:34px;border:2px solid rgba(255,255,255,.13);background:rgb(18,20,24);
  box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025);
  display:flex;align-items:center;justify-content:center;transition:border-color .5s}
.ag-cluster{display:flex;align-items:center;gap:14px;max-width:100%}
.ag-icon{width:48px;height:48px;flex:0 0 auto;color:rgba(244,246,248,.94);opacity:.88}
.ag-icon svg{width:100%;height:100%;display:block}
.ag-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ag-title{margin:0;font-size:20px;font-weight:300;line-height:1.12;letter-spacing:-.02em;
  color:#f7f8fa;max-width:188px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-kind{margin:0;font-size:15px;font-weight:200;line-height:1.1;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(207,212,219,.72)}

/* L'agent en cours d'exécution — bordure, lueur pulsée, ondes : l'état
   `.is-running` de l'application, à l'identique. */
.ag-node.running .ag-surface{border-color:#c9a0ff;animation:ag-glow 1.7s ease-in-out infinite}
.ag-node.running::before,.ag-node.running::after{content:"";position:absolute;inset:0;
  border-radius:34px;border:2px solid rgba(190,170,255,.5);pointer-events:none;
  animation:ag-wave 2.4s cubic-bezier(.22,1,.36,1) infinite}
.ag-node.running::after{animation-delay:1.2s}
@keyframes ag-glow{
  0%,100%{box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 0 1px rgba(170,31,205,.45),
    0 0 18px rgba(170,31,205,.35),0 0 44px rgba(170,31,205,.20)}
  50%{box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 0 1px rgba(170,31,205,.9),
    0 0 34px rgba(170,31,205,.7),0 0 82px rgba(170,31,205,.42)}
}
@keyframes ag-wave{0%{transform:scale(1);opacity:.6}70%{opacity:.12}100%{transform:scale(1.22);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ag-node.running .ag-surface,.ag-node.running::before,.ag-node.running::after{animation:none}
  .ag-node.running .ag-surface{box-shadow:0 16px 44px rgba(0,0,0,.42),0 0 24px rgba(170,31,205,.5)}
}