/*
 * evidence-flow.css — EvidenceFlowVisual: the SVG diagram in the Hero (SPEC.md
 * ADR-003, §7.4, EVI-5, EVI-6). Requires tokens.css to be loaded first — every
 * color below is a var(--token), no raw hex (brief §25.3).
 *
 * Scope of this file: the SVG/diagram itself (node shapes, connecting lines,
 * the flagged-signal marker, the soft radial glow, the settle-in-view motion)
 * plus the `.sr-only` utility used by the accessible data-table alternative
 * (EVI-5) that lives next to the SVG in src/partials/03-hero.html.
 *
 * No animation libraries (GSAP, anime.js, etc.) — pure CSS @keyframes, per
 * brief §22/§25.4.
 */

/* ---------------------------------------------------------------------- */
/* sr-only — visually hidden but present for assistive tech (EVI-5)        */
/* ---------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------- */
/* Container + responsive SVG                                              */
/* ---------------------------------------------------------------------- */

.evidence-flow {
  position: relative;
  width: 100%;
}

.evidence-flow__diagram {
  display: block;
  width: 100%;
  height: auto; /* viewBox preserves the aspect ratio; width/height attrs on the
                   <svg> already reserve the space to avoid layout shift (§22) */
}

/* ---------------------------------------------------------------------- */
/* Soft radial glow around the evidence graph (brief §17.2 — allowed,       */
/* must stay very soft: single accent color, low peak opacity, no neon)    */
/* ---------------------------------------------------------------------- */

.ef-glow__start {
  stop-color: var(--accent);
  stop-opacity: 0.22;
}

.ef-glow__end {
  stop-color: var(--accent);
  stop-opacity: 0;
}

/* ---------------------------------------------------------------------- */
/* Input source nodes                                                      */
/* ---------------------------------------------------------------------- */

.ef-node-shape {
  fill: var(--accent-soft);
  fill-opacity: 0.06;
  stroke: var(--accent-soft);
  stroke-opacity: 0.4;
  stroke-width: 1;
}

.ef-node-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-body-medium);
  fill: var(--text-on-dark);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* ---------------------------------------------------------------------- */
/* Central node: Evidence graph panel + its four checks                    */
/* ---------------------------------------------------------------------- */

.ef-panel-shape {
  fill: var(--accent-soft);
  fill-opacity: 0.1;
  stroke: var(--accent);
  stroke-opacity: 0.85;
  stroke-width: 1.5;
}

.ef-panel-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-h3);
  fill: var(--text-on-dark);
  text-anchor: middle;
}

.ef-panel-divider {
  stroke: var(--accent);
  stroke-opacity: 0.3;
  stroke-width: 1;
}

.ef-check__dot {
  fill: var(--accent-soft);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-opacity: 0.9;
  stroke-width: 1.25;
}

.ef-check__mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ef-check__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  fill: var(--text-on-dark-muted);
  dominant-baseline: middle;
}

/* ---------------------------------------------------------------------- */
/* Output node: Decision-ready analysis                                    */
/* ---------------------------------------------------------------------- */

.ef-output-shape {
  fill: var(--accent-soft);
  fill-opacity: 0.09;
  stroke: var(--accent);
  stroke-opacity: 0.7;
  stroke-width: 1.25;
}

.ef-output-label {
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------- */
/* Additional indicator: Uncertainty exposed (confidence/coverage signal)  */
/* Uses the warning status color (EVI-3 semantics), not the accent —        */
/* this is a signal, not a second accent color.                            */
/* ---------------------------------------------------------------------- */

.ef-indicator-shape {
  fill: var(--status-warning);
  fill-opacity: 0.12;
  stroke: var(--status-warning);
  stroke-opacity: 0.65;
  stroke-width: 1;
}

.ef-indicator__ring {
  fill: none;
  stroke: var(--status-warning);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.ef-indicator__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  fill: var(--text-on-dark);
  dominant-baseline: middle;
}

/* ---------------------------------------------------------------------- */
/* Traceability lines                                                      */
/* ---------------------------------------------------------------------- */

.ef-line {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}

.ef-line--output {
  stroke-opacity: 0.7;
}

/* The one input line carrying a conflicting signal: marked, not hidden or
   removed (brief §7.4 "не исчезает, а отмечается") — dashed + warning color
   instead of the shared accent, while staying a fully connected line. */
.ef-line--flagged {
  stroke: var(--status-warning);
  stroke-opacity: 0.85;
  stroke-dasharray: 4 3;
}

.ef-flag__triangle {
  fill: var(--status-warning);
}

.ef-flag__mark {
  stroke: var(--bg-dark);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ef-flag__dot {
  fill: var(--bg-dark);
}

/* ---------------------------------------------------------------------- */
/* Settling motion (EVI-6) — plays once on scroll-into-view, never loops.  */
/*                                                                          */
/* The scattered "pre-settle" state only applies under html.js-ef, a class */
/* evidence-flow.js adds itself (and only when it intends to animate).     */
/* Without JS — or before it runs — nodes render in their final position   */
/* by default, per brief §19 "не скрывать контент до загрузки JavaScript". */
/* ---------------------------------------------------------------------- */

html.js-ef .evidence-flow .ef-node {
  opacity: 0;
  transform: translate(var(--ef-dx, 0px), var(--ef-dy, 0px)) scale(0.94);
  transform-origin: center;
}

html.js-ef .evidence-flow .ef-line {
  opacity: 0;
}

html.js-ef .evidence-flow.is-visible .ef-node {
  animation: ef-node-settle 620ms var(--transition-easing, ease-out) forwards;
  animation-delay: var(--ef-delay, 0ms);
}

html.js-ef .evidence-flow.is-visible .ef-line {
  animation: ef-line-fade 480ms var(--transition-easing, ease-out) forwards;
  animation-delay: var(--ef-delay, 0ms);
}

@keyframes ef-node-settle {
  from {
    opacity: 0;
    transform: translate(var(--ef-dx, 0px), var(--ef-dy, 0px)) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes ef-line-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Belt-and-braces: base.css already forces near-zero animation/transition
   durations under reduced motion, but the settle keyframes above translate
   nodes away from their resting position first — so reduced motion must also
   force the resting transform/opacity directly, not just shorten a timer. */
@media (prefers-reduced-motion: reduce) {
  html.js-ef .evidence-flow .ef-node,
  html.js-ef .evidence-flow .ef-line {
    opacity: 1;
    transform: none;
    animation: none;
  }
}