/* ============================================================
   08 · EVIDENCE PIPELINE — branching linear flow (SVG-based)
   Replaces the previous section-08 CSS entirely.
   The whole diagram is one SVG with a viewBox, so structure, text,
   circles and lines scale together with the container width.
   Tweak the variables in .mitre-pipeline .pipeline below.
   ============================================================ */

/* .mitre-pipeline {
  background: #f0f1f3;                 
} */

/* ---------- ADJUSTABLE ATTRIBUTES ---------- */
.mitre-pipeline .pipeline {
  /* container */
  width: min(1100px, 100%);            /* diagram width (max) */
  margin: 64px auto;                   /* placement on the page */

  /* step colors, blue -> purple -> magenta (used by nodes, numbers, lines) */
  --c1: #12c0ff;   /* Practitioner Artifacts */
  --c2: #3a9bff;   /* SharePoint Metadata    */
  --c3: #5b7cff;   /* Structured JSON        */
  --c4: #8a4dff;   /* Bitbucket branch       */
  --c5: #b02cf0;   /* Evidence registry      */
  --c6: #d43cd8;   /* Pull request           */
  --c7: #ff54c2;   /* Manual review          */

  /* lines */
  --line-w: 1px;                       /* solid line thickness */
  --line-w-alt: 2px;                   /* dotted (branch B) thickness */
  --line-dash: 2 7;                    /* dotted pattern: dash gap */
  --line-opacity: 1;

  /* nodes */
  --node-r: 4px;                       /* filled dot radius */
  --halo-r: 11px;                      /* outer ring radius */
  --halo-w: 1.5px;                     /* outer ring thickness */
  --halo-gap: #f0f1f3;                 /* match section background */
  --end-scale: 1.25;                   /* size boost for last node */

  /* text */
  --label-size: 15px;                  /* in SVG units; scales with width */
  --label-color: #444444;
  --label-weight: 400;
  --num-size: 11px;
  --num-opacity: 1;

  /* nudge groups if you want to shift things without touching HTML */
  --branch-a-y: 0px;
  --branch-b-y: 0px;
}

/* ---------- reset legacy .pipeline rules from the old design ---------- */
.mitre-pipeline .pipeline {
  display: block;                      /* was grid/flex: made the SVG collapse */
  position: relative;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  counter-reset: none;
}

.mitre-pipeline .pipeline::before,
.mitre-pipeline .pipeline::after {
  content: none;                       /* removes the old vertical rail */
  display: none;
}

.mitre-pipeline .pipeline svg {
  display: block;
  min-width: 0;
  width: 105%;
  height: auto;
  overflow: visible;
}

/* ---------- per-step color hooks ---------- */
.mitre-pipeline .pipeline .s1 { --c: var(--c1); }
.mitre-pipeline .pipeline .s2 { --c: var(--c2); }
.mitre-pipeline .pipeline .s3 { --c: var(--c3); }
.mitre-pipeline .pipeline .s4 { --c: var(--c4); }
.mitre-pipeline .pipeline .s5 { --c: var(--c5); }
.mitre-pipeline .pipeline .s6 { --c: var(--c6); }
.mitre-pipeline .pipeline .s7 { --c: var(--c7); }

/* ---------- lines ---------- */
.mitre-pipeline .pipeline .ln {
  fill: none;
  stroke: var(--c);
  stroke-width: var(--line-w);
  stroke-linecap: round;
  opacity: var(--line-opacity);
}

/* branch B = dotted, like the lower path in the reference */
.mitre-pipeline .pipeline .branch-b .ln {
  stroke-width: var(--line-w-alt);
  stroke-dasharray: var(--line-dash);
}

/* ---------- branch placement ---------- */
.mitre-pipeline .pipeline .branch-a { transform: translateY(var(--branch-a-y)); }
.mitre-pipeline .pipeline .branch-b { transform: translateY(var(--branch-b-y)); }

/* ---------- nodes ---------- */
.mitre-pipeline .pipeline .halo {
  r: var(--halo-r);
  fill: var(--halo-gap);
  stroke: var(--c);
  stroke-width: var(--halo-w);
}

.mitre-pipeline .pipeline .dot {
  r: var(--node-r);
  fill: var(--c);
}

.mitre-pipeline .pipeline .node.end .halo,
.mitre-pipeline .pipeline .node.end .dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--end-scale));
}

/* ---------- text ---------- */
.mitre-pipeline .pipeline .label {
  fill: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: -.01em;
  text-anchor: middle;
}

.mitre-pipeline .pipeline .num {
  fill: var(--c);
  font-size: var(--num-size);
  font-weight: 700;
  letter-spacing: .13em;
  text-anchor: middle;
  opacity: var(--num-opacity);
}

/* ---------- lede lines up with the pipeline ---------- */
.mitre-pipeline .section-lede {
  width: min(840px, 100%);
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}










/* ============================================================
   08 · EVIDENCE PIPELINE — hatched callouts (desktop only)
   Paste at the END of your existing section-08 CSS.
   ============================================================ */

.mitre-pipeline .pipeline {
  --hatch-opacity: .6;
  --leader-color: #c9ccd1;
  --co-title-color: #111;
  --co-sub-color: #888;
  --co-delay: 1.4s;          /* when callouts start fading in (after the nodes land) */
  --co-fade: 0.9s;
}

/* ---------- hatched strip ---------- */
.mitre-pipeline .pipeline .hatch {
  stroke: none;
  opacity: var(--hatch-opacity);
}
.mitre-pipeline .pipeline .hatch-start { fill: url(#hatch-start); }
.mitre-pipeline .pipeline .hatch-end   { fill: url(#hatch-end); }

/* ---------- leader line ---------- */
.mitre-pipeline .pipeline .leader {
  fill: none;
  stroke: var(--leader-color);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- callout text ---------- */
.mitre-pipeline .pipeline .co-title {
  fill: var(--co-title-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-anchor: start;
}
.mitre-pipeline .pipeline .co-sub {
  fill: var(--co-sub-color);
  font-size: 12px;
  text-anchor: start;
}

/* ---------- mobile: callouts only exist in the horizontal SVG,
   and that SVG is already hidden at <=720px ---------- */

/* ---------- entrance: fade in after the nodes land ---------- */
.mitre-pipeline .pipeline.js-anim .callout {
  opacity: 0;
}
.mitre-pipeline .pipeline.js-anim svg.is-playing .callout {
  animation: pipe-fade var(--co-fade) ease-out both;
  animation-delay: var(--co-delay);
}

@media (prefers-reduced-motion: reduce) {
  .mitre-pipeline .pipeline.js-anim .callout {
    opacity: 1;
    animation: none !important;
  }
}








/* new mobile css */
/* Desktop shows horizontal, mobile shows vertical */
.mitre-pipeline .pipeline svg.pipeline-v { display: none; }

@media (max-width: 720px) {
  .mitre-pipeline .pipeline svg.pipeline-h { display: none; }
  .mitre-pipeline .pipeline svg.pipeline-v {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    margin-left: -9px;
  }
}

/* Label/number alignment overrides for the vertical layout */
.mitre-pipeline .pipeline-v .label.start { text-anchor: start; }
.mitre-pipeline .pipeline-v .label.end   { text-anchor: end; }
.mitre-pipeline .pipeline-v .num.start   { text-anchor: start; }
.mitre-pipeline .pipeline-v .num.end     { text-anchor: end; }

/* ============================================================
   08 · EVIDENCE PIPELINE — "feather float" entrance (plays once)
   Paste at the END of your existing section-08 CSS.
   Works on both the desktop (.pipeline-h) and mobile (.pipeline-v) SVGs.
   Hidden/animated states only apply after the JS adds .js-anim, so
   with JS off (or reduced motion) the diagram simply shows normally.
   ============================================================ */

.mitre-pipeline .pipeline {
  /* ---------- ADJUSTABLE ---------- */
--anim-step: 0.12s;      /* was 0.2s, tighter so each node tips the next like dominoes */
--anim-row-gap: 0.15s;   /* was 0.25s */
--anim-dur: 0.9s;        /* was 1.5s, one quick fall plus a settle */
--anim-drop: 16px;       /* was 34px, short lift instead of a long drift */
--anim-tilt: 6deg;      /* was 14deg, more lean so the "lay down" reads */
--anim-ease: linear;     /* easing is now set inside the keyframes */
--anim-fade: 1.6s;   /* how long each node takes to go from 0% to 100% opacity */
}

/* ---- initial (pre-play) state ---- */
.mitre-pipeline .pipeline.js-anim .node,
.mitre-pipeline .pipeline.js-anim .ln {
  opacity: 0;
}

.mitre-pipeline .pipeline.js-anim .node {
  transform-box: fill-box;
  transform-origin: 0% 100%;   /* pivots on the bottom-left, like a card hinging down left to right */
}

/* ---- play state (added once when the section scrolls into view) ---- */
.mitre-pipeline .pipeline.js-anim svg.is-playing .node {
  animation:
    pipe-feather var(--anim-dur) var(--anim-ease) both,
    pipe-fade    var(--anim-fade) ease-in-out both;
  animation-delay: var(--d, 0s);
}

.mitre-pipeline .pipeline.js-anim svg.is-playing .ln {
  animation: pipe-line 0.7s ease-out both;
  animation-delay: var(--d, 0s);
}

.mitre-pipeline .pipeline.js-anim.is-playing .ln {
  animation: pipe-line var(--anim-fade) ease-in-out both;
  animation-delay: var(--d, 0s);
}

/* Floats down, sways side to side with shrinking swings, rocks, settles. */
@keyframes pipe-feather {
  0% {
    transform: translateY(calc(-1 * var(--anim-drop)))
               rotate(calc(-1 * var(--anim-tilt))) scale(.94);
    animation-timing-function: cubic-bezier(.5, 0, .9, .55);  /* speeds up like gravity */
  }
  
  62% {                                                       /* lands, slightly past flat */
    transform: translateY(1px) rotate(calc(.16 * var(--anim-tilt))) scale(1);
    animation-timing-function: cubic-bezier(.3, 0, .3, 1);
  }
  82% {                                                       /* small rebound */
    transform: translateY(0) rotate(calc(-.05 * var(--anim-tilt))) scale(1);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

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

@keyframes pipe-line {
  from { opacity: 0; }
  to   { opacity: var(--line-opacity, 1); }
}

/* Respect reduced-motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .mitre-pipeline .pipeline.js-anim .node,
  .mitre-pipeline .pipeline.js-anim .ln {
    opacity: 1;
    animation: none !important;
  }
}