/* ==========================================================================
   DIAGRAMS — the Nexoss IA visual language
   Abstract line drawings of information, processes and systems being
   connected (inline SVG, no images). Always drawn on a dark panel:
   grey lines and blocks, white for focus, yellow for "the AI at work".

   Primitives (SVG classes):
     .dg-line   thin connector        .dg-panel  dark block with border
     .dg-soft   faint connector       .dg-box    small block
     .dg-bar    text-like line        .dg-node   round node
     .dg-accent yellow fill           .dg-highlight  yellow text-line
     .dg-ink    ink fill (details on yellow)

   Animations (.dg-anim) are PAUSED by default and only run when:
     · the diagram container is on screen (.is-inview, js/modules/inview.js)
       – hero, current carousel slide
     · a .glyph-host card is hovered / focused
   The static (paused / reduced-motion) state is always a complete drawing.
   ========================================================================== */

.dg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dg * {
  fill: none;
  stroke-linecap: square;
  vector-effect: none;
}

.dg-line      { stroke: var(--ink-500); stroke-width: 1.5; }
.dg-soft      { stroke: var(--ink-700); stroke-width: 1.5; }
.dg-dashed    { stroke-dasharray: 4 5; }
.dg-bar       { stroke: var(--ink-700); stroke-width: 4; }
.dg-highlight { stroke: var(--color-accent); stroke-width: 4; }
.dg-box       { fill: var(--ink-900); stroke: var(--ink-500); stroke-width: 1.5; }
.dg-box--on   { stroke: var(--white); }
.dg-panel     { fill: var(--ink-900); stroke: var(--ink-600); stroke-width: 1.5; }
.dg-node      { fill: var(--ink-950); stroke: var(--ink-400); stroke-width: 1.5; }
.dg-accent    { fill: var(--color-accent); }
.dg-ink       { fill: var(--ink-950); }

/* ---- Animated primitives ------------------------------------------------- */
/* A short yellow dash travelling along a path (needs pathLength="1") */
.dg-packet {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-dasharray: .1 1.2;
  stroke-dashoffset: .1;
  animation: dg-travel 2.8s var(--ease-in-out-cubic) infinite;
}

@keyframes dg-travel {
  from { stroke-dashoffset: .1; }
  to { stroke-dashoffset: -1.1; }
}

/* Highlighted path that draws itself repeatedly (needs pathLength="1") */
.dg-travel {
  stroke-dasharray: 1 1;
  animation: dg-draw 3.2s var(--ease-in-out-cubic) infinite;
}

@keyframes dg-draw {
  0% { stroke-dashoffset: 1; }
  45%, 100% { stroke-dashoffset: 0; }
}

/* Scanning bar moving down a document (distance in --scan) */
.dg-scan {
  fill: var(--color-accent);
  animation: dg-scan 3s var(--ease-in-out-quad) infinite alternate;
}

@keyframes dg-scan {
  to { transform: translateY(var(--scan, 100px)); }
}

/* Check boxes / ticks / status dots lighting up in sequence */
.dg-check {
  fill: var(--color-accent);
  animation: dg-blink 2.4s ease infinite;
  animation-delay: calc(var(--i, 0) * .4s);
}

.dg-tick {
  stroke: var(--color-accent);
  stroke-width: 2;
  animation: dg-blink 2.4s ease infinite;
  animation-delay: calc(var(--i, 0) * .4s);
}

.dg-status {
  fill: var(--color-accent);
  animation: dg-blink 2.4s ease infinite;
  animation-delay: calc(var(--i, 0) * .5s);
}

@keyframes dg-blink {
  0%, 15% { opacity: .15; }
  30%, 100% { opacity: 1; }
}

/* Text cursor */
.dg-caret {
  fill: var(--white);
  animation: dg-caret 1s steps(1) infinite;
}

@keyframes dg-caret {
  50% { opacity: 0; }
}

/* Bars of a chart re-growing */
.dg-grow {
  fill: var(--ink-600);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dg-grow 3.2s var(--ease-out-quart) infinite;
  animation-delay: calc(var(--i, 0) * .15s);
}

.dg-grow--accent {
  fill: var(--color-accent);
}

@keyframes dg-grow {
  0% { transform: scaleY(.25); }
  40%, 100% { transform: scaleY(1); }
}

/* Slow orbit */
.dg-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: dg-spin 24s linear infinite;
}

@keyframes dg-spin {
  to { transform: rotate(360deg); }
}

/* Data flowing along parallel links */
.dg-flow {
  stroke-dasharray: 6 6;
  animation: dg-flow 1s linear infinite;
}

@keyframes dg-flow {
  to { stroke-dashoffset: -12; }
}

/* ---- Play state (kept last: each animation shorthand above resets it) ---- */
.dg-anim.dg-anim {
  animation-play-state: paused;
}

.net.is-inview .dg-anim,
.carousel__slide.is-current .is-inview .dg-anim,
.glyph-host:focus-within .dg-anim {
  animation-play-state: running;
}

@media (hover: hover) {
  .glyph-host:hover .dg-anim {
    animation-play-state: running;
  }
}