/* =============================================================
   diagram.css — arrière-plan parallaxe du fil.
   Le diagramme est un SVG placé en position fixed, derrière le texte.
   Chaque couche (client, opnsense, kong, keycloak, bff, crowdsec,
   apps, proxmox, openclaw) apparaît quand son chapitre entre en vue.
   Les classes .visible sont ajoutées/retirées par js/parallax.js.
   ============================================================= */

.diagram-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s var(--ease-out);
}

.diagram-bg svg {
  width: 100%;
  height: 100%;
  max-width: 1400px;
  opacity: 0.65;
  filter: blur(0.3px);
  transform: scale(1.05);
  transform-origin: 50% 50%;
}

/* Toutes les couches démarrent à opacité minimale, restent visibles mais fantomatiques */
.diagram-bg .layer {
  opacity: 0.08;
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  transform: translateY(8px);
  transform-origin: center center;
}

/* Et deviennent pleinement visibles quand leur chapitre est actif */
.diagram-bg .layer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Les flèches ont un comportement un peu différent — elles se dessinent */
.diagram-bg .arrow {
  opacity: 0.08;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.5s var(--ease-out), opacity 1.2s var(--ease-out);
}
.diagram-bg .arrow.visible {
  opacity: 0.7;
  stroke-dashoffset: 0;
}

.diagram-bg.reduced-motion .layer,
.diagram-bg.reduced-motion .arrow {
  transition: none;
}

/* Les légendes textuelles du diagramme */
.diagram-bg .diagram-label {
  font-family: var(--font-body);
  font-weight: 600;
  fill: var(--ink-deep);
}
.diagram-bg .diagram-sublabel {
  font-family: var(--font-body);
  font-weight: 400;
  fill: var(--ink-mid);
}
.diagram-bg .diagram-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  fill: var(--sage-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Couleurs pastel pour les boîtes — palette complémentaire à la sauge */
.diagram-bg .box-client    { fill: var(--sky-100);      stroke: var(--sky-300); }
.diagram-bg .box-edge      { fill: var(--sand-100);     stroke: var(--sand-200); }
.diagram-bg .box-proxy     { fill: var(--sand-100);     stroke: var(--sand-200); }
.diagram-bg .box-defense   { fill: var(--sage-100);     stroke: var(--sage-300); }
.diagram-bg .box-app       { fill: var(--lavender-100); stroke: var(--lavender-300); }
.diagram-bg .box-host      { fill: rgba(255,255,255,0.3); stroke: var(--ink-soft);
                             stroke-dasharray: 6 4; }
.diagram-bg .box-ai        { fill: var(--rose-100);     stroke: var(--rose-200); }

.diagram-bg .box-client,
.diagram-bg .box-edge,
.diagram-bg .box-proxy,
.diagram-bg .box-defense,
.diagram-bg .box-app,
.diagram-bg .box-host,
.diagram-bg .box-ai {
  stroke-width: 1.5;
}

/* L'indicateur de progression linéaire à droite */
.scroll-indicator {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 40vh;
  background: rgba(168, 184, 160, 0.25);
  z-index: 50;
  pointer-events: none;
  border-radius: 2px;
  transition: opacity 0.35s var(--ease-out);
}
.scroll-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 4px;
  border-radius: 2px;
  background: var(--sage-400);
  height: 0;
  transition: height 0.15s linear;
}

body.diagram-at-footer .diagram-bg,
body.diagram-at-footer .scroll-indicator {
  opacity: 0;
}

@media (max-width: 720px) {
  .scroll-indicator { display: none; }
  .diagram-bg {
    align-items: flex-start;
    padding-top: 3.8rem;
  }
  .diagram-bg svg {
    opacity: 0.58;
    filter: none;
    transform: scale(1.1);
    transform-origin: 50% 6%;
  }
  .diagram-bg .layer {
    opacity: 0.02;
    transition-duration: 0.75s;
  }
  .diagram-bg .arrow {
    opacity: 0;
    transition-duration: 0.9s;
  }
}

/* Impression : on cache le diagramme, seul le texte compte */
@media print {
  .diagram-bg, .scroll-indicator { display: none; }
}