/* =====================================================================
   ZOVREL — DIAGRAMS
   Hand-built SVG schematics. These carry the visual load in place of
   icons. Shared primitives so every diagram reads as one drawing system:
   1px strokes, tabular mono labels, accent reserved for the live path.
   ===================================================================== */

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

/* --- Strokes ------------------------------------------------------- */
.dg-box {
    fill: none;
    stroke: var(--rule-strong);
    stroke-width: 1;
}

.dg-box-fill {
    fill: rgba(255, 255, 255, 0.05);
    stroke: var(--rule-strong);
    stroke-width: 1;
}

.band-paper .dg-box-fill { fill: rgba(22,19,15,0.035); }

.dg-box-live {
    fill: rgba(255, 122, 61, 0.14);
    stroke: var(--accent);
    stroke-width: 1;
}

.dg-wire {
    fill: none;
    stroke: var(--rule-strong);
    stroke-width: 1;
}

.dg-wire-dim {
    fill: none;
    stroke: var(--rule);
    stroke-width: 1;
}

/* The live path — a dash that travels, showing direction of flow. */
.dg-flow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.25;
    stroke-dasharray: 4 5;
    animation: dgFlow 1.6s linear infinite;
}

@keyframes dgFlow { to { stroke-dashoffset: -18; } }

.dg-flow-slow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    stroke-dasharray: 3 6;
    animation: dgFlow 3.2s linear infinite;
    opacity: 0.75;
}

/* --- Marks --------------------------------------------------------- */
.dg-dot      { fill: var(--accent); }
.dg-dot-dim  { fill: var(--text-dim); }
.dg-ring     { fill: var(--ink); stroke: var(--accent); stroke-width: 1; }
.band-paper .dg-ring { fill: var(--paper); }

.dg-tick { stroke: var(--rule-strong); stroke-width: 1; }

/* Pulsing node, used once per diagram at most. */
.dg-pulse { fill: var(--accent); animation: dgPulse 2.4s var(--ease) infinite; }

/* Opacity only. Animating the `r` attribute re-rasterises the whole SVG
   every frame; opacity is handled by the compositor. */
@keyframes dgPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* --- Type inside diagrams ------------------------------------------ */
.dg text { font-family: var(--mono); fill: var(--text-mid); }

.dg-t {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--text-mid);
}

.dg-t-dim   { font-size: 8.5px; letter-spacing: 0.1em; fill: var(--text-dim); }
.dg-t-accent{ font-size: 9px; letter-spacing: 0.12em; fill: var(--accent); }

.dg-t-lg {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    fill: var(--text);
}

.dg-t-num {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.04em;
    fill: var(--text-dim);
}

/* Annotation leader lines — the thing that makes a drawing read as
   a technical drawing rather than an illustration. */
.dg-lead { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }

/* --- Bars / plot --------------------------------------------------- */
.dg-bar     { fill: var(--rule-strong); }
.dg-bar-live{ fill: var(--accent); }
.dg-axis    { stroke: var(--rule); stroke-width: 1; }

.dg-plot {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.dg-plot-area { fill: url(#dgGrad); stroke: none; }

/* Draw-in for plotted lines once scrolled to. */
.dg-draw {
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
}

.in .dg-draw,
.dg-draw.in { animation: dgDraw 1.5s var(--ease) forwards; }

@keyframes dgDraw { to { stroke-dashoffset: 0; } }

/* --- Vision diagram: detection boxes ------------------------------- */
.dg-mask { fill: rgba(10, 7, 16, 0.72); }

.dg-det {
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
    stroke: var(--accent);
    stroke-width: 1.25;
    opacity: 0;
    animation: dgDet 4s var(--ease) infinite;
}

.dg-det-2 { animation-delay: 0.5s; }
.dg-det-3 { animation-delay: 1s; }

@keyframes dgDet {
    0%, 8%    { opacity: 0; transform: scale(0.96); }
    16%, 78%  { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0; }
}

.dg-det-tag { fill: var(--accent); }
.dg-det-tag-t { font-size: 7px; fill: #fff; letter-spacing: 0.08em; }

/* Scanning sweep across the vision frame. */
.dg-scan {
    stroke: var(--accent);
    stroke-width: 1;
    opacity: 0.6;
    animation: dgScan 4s linear infinite;
}

@keyframes dgScan {
    0%   { transform: translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateX(150px); opacity: 0; }
}

/* --- Grid backdrop inside a diagram frame -------------------------- */
.dg-grid { stroke: var(--rule); stroke-width: 0.5; }


/* =====================================================================
   OFFSCREEN IDLING
   A diagram outside the viewport has nothing to say. Pausing its
   animations keeps the compositor free for the scroll itself.
   ===================================================================== */
.dg.idle *,
.marquee.idle .marquee-track { animation-play-state: paused !important; }