/* ==========================================================
   MITRE sections 09 & 10  —  "flow" layer  (round 5)
   09  = line composition stage (JS builds it from the <ol class="flow-steps">)
   10  = organic bands on a stepped spine
   Own class names (flow-*, band-*) so nothing in mitre.css collides.
   Load LAST, after mitre-t99.css. Replaces every earlier mitre-flow /
   mitre-loop-architecture / mitre-motion file.
   ========================================================== */
 
.mitre-loop {
  --f-cyan: #12c0ff;
  --f-pink: #ff54c2;
  --f-ink: #e9f8ff;
  --f-dim: rgba(255, 255, 255, .62);
  --f-rule: rgba(150, 233, 255, .28);
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.mitre-architecture {
  --b-ink: #1c2530;
  --b-muted: #51657a;
  --b-line: #cdbfe8;
  --b-purple: #5b00c2;
  --b-cyan: #12c0ff;
  --b-gap: 2.2rem;
  --b-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
 
/* ==========================================================
   SECTION 09
   ========================================================== */
.flow-scene { position: relative; margin-top: 2.6rem; }
.flow-scene + p { margin-top: 3rem; }
 
/* --- plain list: what visitors get without JS / with reduced motion,
       and what screen readers always read --- */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--f-rule);
}
.flow-steps li { padding: 16px 12px 0 0; }
.flow-steps b {
  display: block;
  font: 700 12px/1.2 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #2dc7ff;
}
.flow-steps span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--f-dim);
}
@media (max-width: 1000px) { .flow-steps { grid-template-columns: repeat(4, 1fr); row-gap: 20px; } }
@media (max-width: 560px)  { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
 
/* when the stage is live the list becomes screen-reader only */
.flow-scene.flow-live .flow-steps {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
 
/* --- stage --- */
.flow-stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1200 / 520;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.flow-stage::after {                         /* soft vignette */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 2, 8, .5));
}
.flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.flow-grid line {
  stroke: #9fe6ff;
  stroke-opacity: .07;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
 
/* morphing shapes: real <rect> elements. The script tweens x / y / width / height / rx / ry,
   so corner radius stays true while a shape morphs (circle <-> square). */
.flow-rect {
  fill: none;
  stroke: #e9f8ff;
  stroke-width: 1px;
  opacity: 0;
}
.flow-rect.is-heavy { stroke-width: 1.8px; }
.flow-rect.is-cyan  { stroke: #12c0ff; }
.flow-rect.is-fill  { fill: rgba(18, 192, 255, .08); }
 
/* drawn lines */
.flow-line {
  fill: none;
  stroke: #e9f8ff;
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-opacity: .35;
}
.flow-line.l-main { stroke-width: 1.7; stroke-opacity: .95; }
.flow-line.l-mid  { stroke-opacity: .62; }
.flow-line.l-cyan { stroke: #12c0ff; stroke-opacity: .8; }
.flow-line.l-pink { stroke: #ff54c2; stroke-opacity: .95; stroke-width: 1.8; }
 
.flow-pulse {
  fill: none;
  stroke: #ff54c2;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: .07 2;
  stroke-dashoffset: .07;
  filter: drop-shadow(0 0 5px rgba(255, 84, 194, .9));
  transition: opacity .8s ease;
}
.flow-pulse.is-cyan { stroke: #12c0ff; filter: drop-shadow(0 0 5px rgba(18, 192, 255, .9)); }
.flow-pulse.is-pink { stroke-width: 3.4; filter: drop-shadow(0 0 7px rgba(255, 84, 194, 1)); }
 
/* --- typography --- */
.flow-label {
  position: absolute;
  z-index: 2;
  max-width: 62%;
  padding-bottom: 12px;
  transform: translate(0, -100%);
  text-align: left;
  pointer-events: none;
}
.flow-label.is-right { transform: translate(-100%, -100%); text-align: right; }
 
.flow-cap {
  display: block;
  margin-bottom: .7em;
  font: 700 clamp(9px, .92cqw, 12px)/1.2 var(--f-mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #7fe3ff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.6, 0, .2, 1) .1s;
}
.flow-label.is-right .flow-cap { clip-path: inset(0 0 0 100%); }
.flow-label.is-in .flow-cap { clip-path: inset(0 0 0 0); }
.flow-label.is-out .flow-cap { transition-duration: .4s; transition-delay: 0s; }
 
.flow-name {
  display: block;
  font-size: clamp(30px, 5.4cqw, 68px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.flow-name span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-.4em);
  filter: blur(6px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.flow-label.is-in .flow-name span { opacity: 1; transform: none; filter: none; }
.flow-label.is-out .flow-name span { opacity: 0; transform: translateX(.4em); filter: blur(5px); transition-duration: .45s; }
 
/* three typographic voices, rotating by scene */
.flow-label.v1 .flow-name { font-weight: 400; letter-spacing: .22em; font-size: clamp(24px, 4.2cqw, 54px); color: #dff7ff; }
.flow-label.v2 .flow-name { color: transparent; -webkit-text-stroke: 1.2px #7fe3ff; letter-spacing: .05em; }
 
/* giant ghost numeral */
.flow-num {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: -3%;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(90px, 25cqw, 300px);
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(150, 233, 255, .17);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
  user-select: none;
}
.flow-num.is-left { right: auto; left: 4%; }
.flow-num.is-in { opacity: 1; transform: none; }
 
/* credit-style tags pinned to the rectangles */
.flow-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.flow-tag {
  --tx: 0;
  --ty: calc(-100% - 9px);
  position: absolute;
  transform: translate(var(--tx), var(--ty));
  padding-bottom: 6px;
  white-space: nowrap;
  font: 700 clamp(13px, calc(.85cqw + 4px), 15px)/1 var(--f-mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(223, 247, 255, .88);
  border-bottom: 1px solid rgba(127, 227, 255, .35);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .5s ease, clip-path .9s cubic-bezier(.6, 0, .2, 1);
}
.flow-tag.is-end   { --tx: -100%; clip-path: inset(0 0 0 100%); }
.flow-tag.is-below { --ty: 9px; }
.flow-tag.is-in { opacity: 1; clip-path: inset(0 0 0 0); }
.flow-tag i { font-style: normal; color: #12c0ff; margin-right: .9em; }
 
/* parallax (fine pointers) */
.flow-layer-r { transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px)); }
.flow-layer-p { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -11px)); }
.flow-num     { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 8px); }
.flow-label   { translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px); }
.flow-tags    { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -6px); }
 
/* --- ledger (progress + jump) --- */
.flow-ledger {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.flow-ledger button {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: block;
  padding-top: 12px;
  cursor: pointer;
  font: 700 10px/1.3 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  transition: color .4s ease;
  font-size: 12px;
}
.flow-ledger button:hover { color: rgba(255, 255, 255, .85); }
.flow-ledger button:focus-visible { outline: 1px solid #12c0ff; outline-offset: 5px; }
.flow-ledger button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(150, 233, 255, .22);
}
.flow-ledger i {
  position: absolute;
  top: -.5px; left: 0;
  height: 2px;
  width: 0;
  background: #12c0ff;
}
.flow-ledger em { font-style: normal; color: #12c0ff; margin-right: .9em; }
.flow-ledger .is-on { color: #fff; }
.flow-ledger .is-on i { animation: flowFill var(--dur, 6400ms) linear forwards; }
.flow-ledger .is-done i { width: 100%; opacity: .4; }
@keyframes flowFill { to { width: 100%; } }
 
.flow-foot {
  margin-top: 16px;
  font: 700 10px/1.3 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  display: none;
}
 
/* --- compact (phones) --- */
@media (max-width: 700px) {
  .flow-stage { aspect-ratio: 4 / 5; }
  .flow-stage.is-compact .flow-label {
    left: 7%;
    top: auto;
    bottom: 13%;
    max-width: 88%;
    transform: none;
    text-align: left;
  }
  .flow-num { font-size: 42cqw; }
  .flow-ledger { gap: 6px; }
  .flow-ledger button { font-size: 9px; letter-spacing: .1em; }
  .flow-ledger span { display: none; }
  .flow-ledger em { margin: 0; }
  .flow-foot { letter-spacing: .14em; }
}
 
@keyframes flowPulse { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: no-preference) {
  .flow-pulse { animation: flowPulse 2.8s linear 1.4s infinite; }
}
 
/* ==========================================================
   SECTION 10  —  organic bands
   Irregular offsets, rounded corners, elbow accent lines and
   drifting outline rectangles, echoing the section 09 stage.
   ========================================================== */
.band-stack {
  position: relative;
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
}
.band-stack::before {                       /* spine */
  content: "";
  position: absolute;
  left: 0; top: 30px; bottom: 30px;
  width: 1px;
  background: linear-gradient(var(--b-line), var(--b-purple));
  transform-origin: top;
}
.band {
  --pad: calc(var(--ox) + var(--b-gap));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--gy, 34px) var(--pad);
}
.band:last-child { margin-bottom: 0; }
.band::before {                             /* connector spine -> bar */
  content: "";
  position: absolute;
  top: 39px;
  left: calc(-1 * var(--pad));
  width: var(--pad);
  height: 1px;
  background: var(--b-line);
  transform-origin: left;
}
.band::after {                              /* node on the spine */
  content: "";
  position: absolute;
  top: 35px;
  left: calc(-1 * var(--pad) - 4px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c1);
}
 
/* per band: colour, offset, geometry. Offsets deliberately do not step evenly. */
.band:nth-child(1) {
  --c1: #12c0ff; --cn: #7fe3ff; --ox: 0rem;   --gy: 36px;
  --bw: 42%; --dw: 66%; --dm: 6%;
  --w1: 22%; --m1: 34%; --w2: 38%; --m2: 0%;
  --gx: 14px; --gt: -9px;
  --rm: 0 0 0 0; --rd: 0 16px 0 0;
}
.band:nth-child(2) {
  --c1: #3a9bff; --cn: #a9d4ff; --ox: 4.6rem; --gy: 22px;
  --bw: 50%; --dw: 60%; --dm: 14%;
  --w1: 30%; --m1: 12%; --w2: 20%; --m2: 40%;
  --gx: -10px; --gt: 9px;
  --rm: 0 26px 0 0; --rd: 0 0 0 16px;
}
.band:nth-child(3) {
  --c1: #8a4dff; --cn: #cdb6ff; --ox: 1.4rem; --gy: 46px;
  --bw: 46%; --dw: 72%; --dm: 4%;
  --w1: 26%; --m1: 40%; --w2: 44%; --m2: 8%;
  --gx: 18px; --gt: -7px;
  --rm: 0 0 26px 0; --rd: 16px 0 0 0;
}
.band:nth-child(4) {
  --c1: #c000ff; --cn: #ecb0ff; --ox: 6.4rem; --gy: 30px;
  --bw: 56%; --dw: 58%; --dm: 18%;
  --w1: 34%; --m1: 6%; --w2: 28%; --m2: 52%;
  --gx: -14px; --gt: 11px;
  --rm: 0 34px 0 0; --rd: 0 0 16px 0;
}
.band:nth-child(5) {
  --c1: #ff54c2; --cn: #fff; --ox: 3rem;
  --bw: 62%; --dw: 64%; --dm: 12%;
  --w1: 18%; --m1: 50%; --w2: 46%; --m2: 16%;
  --rm: 0 40px 40px 0; --rd: 0 16px 0 16px;
}
 
/* accent lines: rounded orthogonal elbows (same language as the section 09 lines) */
.band > i {
  display: block;
  box-sizing: border-box;
  height: 15px;
  border: 0 solid var(--c1);
}
.band > i:first-child {
  width: var(--w1);
  margin-left: var(--m1);
  border-top-width: 1.5px;
  border-right-width: 1.5px;
  border-top-right-radius: 14px;
  opacity: .85;
  transform-origin: left;
}
.band > i:last-child {
  width: var(--w2);
  margin-left: var(--m2);
  border-bottom-width: 1.5px;
  border-left-width: 1.5px;
  border-bottom-left-radius: 14px;
  opacity: .7;
  transform-origin: right;
}
 
.band-row { position: relative; display: flex; align-items: center; gap: 20px; }
 
/* drifting outline rectangle behind each bar (bands 01-04) */
.band-row::before {
  content: "";
  position: absolute;
  left: var(--gx, 12px);
  top: var(--gt, -9px);
  width: var(--bw);
  min-width: 300px;
  height: 56px;
  box-sizing: border-box;
  border: 1px solid var(--c1);
  opacity: .38;
  pointer-events: none;
}
 
.band-main {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  width: var(--bw);
  min-width: max-content;
  height: 56px;
  padding: 0 28px 0 20px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #08051d, #17034b);
  border-left: 4px solid var(--c1);
  border-radius: var(--rm);
}
.band:nth-child(5) .band-main { background: linear-gradient(90deg, #ff54c2, #c000ff 50%, #5b00c2); border-left-color: #fff; }
.band-no {
  font: 700 12px/1 var(--b-mono);
  letter-spacing: .18em;
  color: var(--cn);                          /* light tints: readable on the dark bar */
}
.band-main b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.band-tags {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 10px/1 var(--b-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--b-muted);
}
.band-tags::before { content: ""; width: 36px; height: 1px; background: var(--b-line); }
 
.band-desc {
  box-sizing: border-box;
  width: var(--dw);
  margin: 0 0 0 var(--dm);
  padding: 11px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--b-muted);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--b-line);
  border-radius: var(--rd);
  transition: background .3s ease, border-color .3s ease;
}
.band:hover .band-desc { background: #fff; border-color: var(--c1); }
 
/* band 05 only: a line travels left to right across the background.
   Without motion it is just a quiet static rule. */
.band:nth-child(5) .band-row::before {
  left: 0; right: 0;
  top: 50%;
  width: auto;
  min-width: 0;
  height: 2px;
  border: 0;
  opacity: 1;
  translate: 0 -50%;
  background: linear-gradient(90deg, var(--b-line), rgba(255, 84, 194, .55));
}
 
/* ghost numerals (decorative) */
.band-stack { counter-reset: bn; }
.band { counter-increment: bn; transition: opacity .35s ease; }
@media (hover: hover) { .band-stack:hover .band:not(:hover) { opacity: .62; } }
.band-row::after {
  content: counter(bn, decimal-leading-zero);
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--b-mono);
  font-weight: 700;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(91, 0, 194, .42);
  pointer-events: none;
}
@media (max-width: 1180px) { .band-row::after { display: none; } }
 
.band-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 44px 0 0 var(--b-gap);
  font: 700 10px/1.3 var(--b-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(81, 101, 122, .85);
}
.band-foot::before { content: ""; width: 48px; height: 1px; background: var(--b-line); }
 
@media (max-width: 760px) {
  .mitre-architecture { --b-gap: 1.1rem; }
  .band:nth-child(n) { --ox: calc(var(--i) * .7rem); --bw: 100%; --dw: 100%; --dm: 0%; }
  .band-main { height: 48px; padding-right: 16px; }
  .band-main b { font-size: 15px; letter-spacing: .06em; }
  .band-tags { display: none; }
  .band::before { top: 35px; }
  .band::after { top: 31px; }
  .band-row::before { display: none; }
}
 
/* --- motion: one-time reveal, then still. Only band 05 loops. --- */
@media (prefers-reduced-motion: no-preference) {
  .mx-anim .band-stack::before { scale: 1 0; }
  .mx-anim .band::before { scale: 0 1; }
  .mx-anim .band::after { opacity: 0; scale: .3; }
  .mx-anim .band > i:first-child,
  .mx-anim .band > i:last-child { scale: 0 1; }
  .mx-anim .band-main,
  .mx-anim .band-desc { clip-path: inset(0 100% 0 0); }
  .mx-anim .band-tags { opacity: 0; }
  .mx-anim .band-row::before,
  .mx-anim .band-row::after,
  .mx-anim .band-foot { opacity: 0; }
 
  .mx-in .band-stack::before { animation: bandDownScale 1.4s ease .1s both; }
  .mx-in .band::before { animation: bandRight .6s ease calc(.3s + var(--i) * .22s) both; }
  .mx-in .band::after  { animation: bandDot .5s cubic-bezier(.3, 1.4, .5, 1) calc(.25s + var(--i) * .22s) both; }
  .mx-in .band > i:first-child { animation: bandRight .9s cubic-bezier(.6, 0, .2, 1) calc(.3s + var(--i) * .22s) both; }
  .mx-in .band > i:last-child  { animation: bandRight .9s cubic-bezier(.6, 0, .2, 1) calc(.6s + var(--i) * .22s) both; }
  .mx-in .band-main { animation: bandWipe .95s cubic-bezier(.65, 0, .2, 1) calc(.25s + var(--i) * .22s) both; }
  .mx-in .band-desc { animation: bandWipe .95s cubic-bezier(.65, 0, .2, 1) calc(.5s + var(--i) * .22s) both; }
  .mx-in .band-tags { animation: bandFade .8s ease calc(1s + var(--i) * .22s) both; }
  .mx-in .band-row::before { animation: bandGhost 1s ease calc(.9s + var(--i) * .22s) both; }
  .mx-in .band-row::after  { animation: bandFade 1s ease calc(1.1s + var(--i) * .22s) both; }
  .mx-in .band-foot { animation: bandFade 1s ease 1.9s both; }
 
  /* band 05: the line, left to right, looping */
  .mx-in .band:nth-child(5) .band-row::before {
    background:
      linear-gradient(90deg, transparent, #ff54c2 60%, #fff) no-repeat -40% 0 / 28% 100%,
      linear-gradient(var(--b-line), var(--b-line)) no-repeat 0 0 / 100% 100%;
    animation: bandFade .8s ease 1.9s both, bandTravel 4.8s linear 2.4s infinite;
    display: none;
  }
 
  @keyframes bandDownScale { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes bandRight { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes bandDot { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
  @keyframes bandWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes bandFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bandGhost { from { opacity: 0; } to { opacity: .38; } }
  @keyframes bandTravel {
    from { background-position: -40% 0, 0 0; }
    to   { background-position: 140% 0, 0 0; }
  }
}
 
/* Section 09: Keep primary flow labels solid, not outlined */
.mitre-loop .flow-label .flow-name,
.mitre-loop .flow-label .flow-name span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  opacity: 1;
}