/* ProLine — background chart system (BACKGROUND-CHART-SYSTEM.md).
   Three decorative atmospheres: Why, Technology, Methodology. Approved
   2026-08-01 with the Methodology curve raised above the real progress rail,
   its duplicate ring markers removed, and no chart layer at all below 768px. */

.bg-chart {
  /* Anchored to the shell content box, not the viewport: both 1440 and 1280
     resolve to the same 1200px box, so chart nodes stay locked to the real
     column and stage positions at every width. */
  position: absolute; inset-block: 0; left: 0; right: 0; margin-inline: auto;
  width: calc(min(var(--content-max), 100%) - var(--margin) * 2);
  height: 100%;
  pointer-events: none;
  fill: none;
  /* 0.75–1.25px at every scale: the viewBox is sliced, so the stroke must not
     scale with it */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bg-chart * { vector-effect: non-scaling-stroke; }

/* Opacity per surface: light 4–8%, dark 6–12%. */
.section--light .bg-chart { opacity: .07; }
.section--dark .bg-chart { opacity: .11; }

/* Geometry fades beneath the copy and at the section edges. Each mask keeps
   the clearest geometry in the quiet part of its own section. */
#why .bg-chart {
  -webkit-mask-image: radial-gradient(74% 78% at 78% 22%, #000 0 34%, rgb(0 0 0 / 45%) 62%, transparent 88%);
          mask-image: radial-gradient(74% 78% at 78% 22%, #000 0 34%, rgb(0 0 0 / 45%) 62%, transparent 88%);
}
#technology .bg-chart {
  -webkit-mask-image: linear-gradient(180deg, transparent 0 14%, #000 30% 62%, rgb(0 0 0 / 30%) 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0 14%, #000 30% 62%, rgb(0 0 0 / 30%) 82%, transparent 100%);
}
/* Methodology: the curve now lives entirely in the band between the lede and
   the real progress rail, so the mask is tightened to that band. */
#method .bg-chart {
  -webkit-mask-image: radial-gradient(104% 132% at 66% 40%, #000 0 42%, rgb(0 0 0 / 52%) 70%, transparent 94%);
          mask-image: radial-gradient(104% 132% at 66% 40%, #000 0 42%, rgb(0 0 0 / 52%) 70%, transparent 94%);
}

/* ---- Why ProLine — fragmented sources becoming ordered ---- */
#why .scatter circle { fill: var(--blue-500); stroke: none; }
#why .ordered circle { fill: none; stroke: var(--blue-500); }
#why .link path { stroke: var(--text-dim); }
#why .curve { stroke: var(--cyan-400); }

/* ---- Technology — pipeline traces ---- */
#technology .trace path { stroke: var(--cyan-400); }
#technology .riser path { stroke: var(--blue-500); }
#technology .node circle { fill: var(--cyan-400); stroke: none; }

/* ---- Methodology — one governed path through the four real stages ---- */
/* at the brief's 8% ceiling for light surfaces — the most presence
   available without raising the limit in BACKGROUND-CHART-SYSTEM.md section 3 */
#method .bg-chart { opacity: .08; }
#method .curve { stroke: var(--blue-500); stroke-width: 1.25; }
#method .mark circle { fill: none; stroke: var(--blue-500); }
#method .drop path { stroke: var(--text-dim); stroke-width: .75; stroke-dasharray: 2 4; }

/* ---- Motion: once on entry, reusing the existing reveal observer ---- */
.bg-chart .curve, .bg-chart .trace path, .bg-chart .link path, .bg-chart .riser path, .bg-chart .drop path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.bg-chart :is(.mark, .node, .scatter, .ordered) circle { opacity: 0; }

.is-in .bg-chart .curve { animation: chart-draw 820ms var(--e-signal) forwards; }
.is-in .bg-chart :is(.trace, .link, .drop) path { animation: chart-draw 760ms var(--e-signal) forwards; }
.is-in .bg-chart :is(.trace, .link) path:nth-child(2) { animation-delay: 60ms; }
.is-in .bg-chart :is(.trace, .link) path:nth-child(3) { animation-delay: 120ms; }
.is-in .bg-chart :is(.trace, .link) path:nth-child(4) { animation-delay: 180ms; }
.is-in .bg-chart :is(.mark, .node, .scatter, .ordered) circle {
  animation: chart-node 520ms var(--e-out) forwards;
}
.is-in .bg-chart circle:nth-child(2) { animation-delay: 60ms; }
.is-in .bg-chart circle:nth-child(3) { animation-delay: 120ms; }
.is-in .bg-chart circle:nth-child(4) { animation-delay: 180ms; }
.is-in .bg-chart circle:nth-child(5) { animation-delay: 240ms; }
.is-in .bg-chart circle:nth-child(6) { animation-delay: 300ms; }

@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-node { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

/* ---- Mobile: no decorative chart layer at all ----
   The methodology curve interfered with the vertical timeline, so below 768px
   every chart atmosphere is removed rather than simplified. */
@media (max-width: 767px) { .bg-chart { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .bg-chart :is(.curve, .trace path, .link path, .riser path, .drop path) { stroke-dashoffset: 0; animation: none; }
  .bg-chart circle { opacity: 1; translate: none; animation: none; }
}