/* flow.css — the animated pipeline: document estate → five layers → AI-ready records.
   Load after home-gradients.css. Self-contained: no JS, no build step.

   Motion is SMIL <animateMotion> for the travelling packets (works everywhere SVG
   does, including older Safari, and follows curved paths exactly) plus CSS for the
   rail dashes, node pulses and label fades. Everything animated is transform,
   opacity or stroke-dashoffset, so it stays on the compositor.

   prefers-reduced-motion: all motion stops and the packet layer is hidden. The
   diagram still reads as a static schematic — nothing meaningful is lost. */

.flow{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg,18px);
  background:var(--paper,#fff);
  padding:26px 22px 18px;
  overflow:hidden;
}
.flow-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim,#7A8794);
  padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px dashed var(--line);
}
.flow-bar b{color:var(--ink);font-weight:600}
.flow-bar .r{margin-left:auto;display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:.02em}
.flow-bar .r i{
  width:7px;height:7px;border-radius:50%;background:#12A5A0;display:inline-block;
  animation:flow-blink 2.4s ease-in-out infinite;
}
@keyframes flow-blink{0%,100%{opacity:1}50%{opacity:.28}}

.flow-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.flow-svg{display:block;width:100%;height:auto}
.flow-hint{display:none;margin:10px 0 0;font-size:12px;color:var(--dim,#7A8794)}

/* ---- the rails ------------------------------------------------------- */
.fl-rail{
  fill:none;stroke:var(--line-2,#D3DCE4);stroke-width:2;stroke-linecap:round;
}
.fl-rail-lit{
  fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 13;
  animation:fl-dash 1.5s linear infinite;
}
@keyframes fl-dash{to{stroke-dashoffset:-22}}

.fl-branch{
  fill:none;stroke:#C9A227;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:6 8;opacity:.75;
  animation:fl-dash-slow 2.6s linear infinite;
}
@keyframes fl-dash-slow{to{stroke-dashoffset:-28}}

/* ---- nodes ------------------------------------------------------------ */
.fl-node rect{
  fill:var(--paper,#fff);stroke:var(--line-2,#D3DCE4);stroke-width:1.5;
}
.fl-node .fl-ring{
  fill:none;stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:fl-pulse 5s ease-out infinite;
}
@keyframes fl-pulse{
  0%,72%{opacity:0;transform:scale(.86)}
  78%{opacity:.75;transform:scale(1)}
  100%{opacity:0;transform:scale(1.22)}
}
.fl-n1 .fl-ring{animation-delay:0s}
.fl-n2 .fl-ring{animation-delay:.55s}
.fl-n3 .fl-ring{animation-delay:1.1s}
.fl-n4 .fl-ring{animation-delay:1.65s}
.fl-n5 .fl-ring{animation-delay:2.5s}

.fl-lab{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.09em;fill:var(--ink,#0E1B2A);
  text-transform:uppercase;
}
.fl-sub{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:10.5px;fill:var(--dim,#7A8794);
}
.fl-num{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.1em;fill:var(--dim,#9AA6B2);
}

/* ---- source chips ----------------------------------------------------- */
.fl-src rect{fill:var(--tint,#F2F6F9);stroke:var(--line,#E3E9EF);stroke-width:1}
.fl-src text{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:10.5px;fill:var(--ink-2,#48576A)}
.fl-src g{animation:fl-lift 5s ease-in-out infinite}
.fl-src g:nth-child(1){animation-delay:0s}
.fl-src g:nth-child(2){animation-delay:.4s}
.fl-src g:nth-child(3){animation-delay:.8s}
.fl-src g:nth-child(4){animation-delay:1.2s}
.fl-src g:nth-child(5){animation-delay:1.6s}
@keyframes fl-lift{
  0%,84%,100%{transform:translateX(0);opacity:1}
  90%{transform:translateX(5px);opacity:.55}
}

/* ---- the output panel ------------------------------------------------- */
.fl-out rect.fl-card{fill:var(--paper,#fff);stroke:#9FD5CE;stroke-width:1.5}
.fl-out .fl-row{
  opacity:1;transform-box:fill-box;transform-origin:left center;
  animation:fl-in 5s ease-out infinite;
}
.fl-out .fl-row:nth-of-type(1){animation-delay:2.70s}
.fl-out .fl-row:nth-of-type(2){animation-delay:2.95s}
.fl-out .fl-row:nth-of-type(3){animation-delay:3.20s}
/* the row is always readable; it just lands as its packet arrives */
@keyframes fl-in{
  0%,52%{opacity:.62;transform:translateX(-3px)}
  62%,100%{opacity:1;transform:translateX(0)}
}
.fl-out text{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;fill:var(--ink-2,#48576A)}
.fl-out .fl-ok{fill:#0E7C63}

/* ---- packets ---------------------------------------------------------- */
.fl-pk circle{filter:drop-shadow(0 0 5px rgba(18,165,160,.55))}
.fl-pk-gate circle{filter:drop-shadow(0 0 5px rgba(201,162,39,.6))}

/* ---- legend ----------------------------------------------------------- */
.flow-foot{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  padding-top:14px;margin-top:6px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-2,#48576A);
}
.flow-foot span{display:inline-flex;align-items:center;gap:7px}
.flow-foot i{width:9px;height:9px;border-radius:50%;flex:none}
.flow-foot .k-pass{background:#12A5A0}
.flow-foot .k-gate{background:#C9A227}
.flow-foot .k-cite{background:#2D55C4}

@media (max-width:860px){
  .flow{padding:18px 14px 14px}
  .flow-bar{font-size:10px;gap:7px}
  .flow-foot{gap:12px;font-size:12px}
  /* below this width the labels stop being legible if the diagram is squeezed
     to fit, so it keeps its natural size and the reader swipes instead —
     the same treatment the wide tables get */
  .flow-svg{min-width:880px}
  .flow-hint{display:block}
  .flow-foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---- motion off ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .flow *{animation:none!important}
  .fl-pk,.fl-pk-gate{display:none}
  .fl-rail-lit{stroke-dasharray:none;opacity:.9}
  .fl-branch{stroke-dasharray:4 5}
  .fl-out .fl-row{opacity:1}
  .fl-node .fl-ring{opacity:.35}
  .flow-bar .r i{opacity:1}
}