/* Page 03 visual study: five interchangeable scroll-driven concepts. */
.process-visual{
  overflow:hidden;
  background:
    linear-gradient(rgba(244,243,248,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,243,248,.025) 1px,transparent 1px),
    linear-gradient(145deg,rgba(40,37,120,.11),transparent 64%);
  background-size:72px 72px,72px 72px,auto;
}
.process-visual:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 52% 48%,rgba(120,114,255,.09),transparent 62%);
  opacity:calc(.35 + var(--m-progress)*.65);
}
.pv-caption{
  position:absolute;
  z-index:8;
  top:9%;
  right:5%;
  left:5%;
  display:flex;
  justify-content:space-between;
  color:#77758e;
  font:300 7px var(--mono);
  letter-spacing:.14em;
}
.pv-caption span:last-child{color:#aaa7ff}
.pv-phase-strip{
  position:absolute;
  z-index:8;
  right:5%;
  bottom:10.5%;
  left:5%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-top:1px solid rgba(244,243,248,.1);
}
.pv-phase-strip span{
  padding-top:9px;
  color:#79778f;
  font:300 6px var(--mono);
  letter-spacing:.1em;
  opacity:clamp(.16,calc((var(--m-progress) - var(--stage))*12 + 1),1);
}
.pv-phase-strip b{display:block;margin-bottom:4px;color:#aaa7ff;font-weight:300}
.pv-foot{
  position:absolute;
  z-index:8;
  right:5%;
  bottom:5.5%;
  left:5%;
  display:flex;
  justify-content:space-between;
  color:#66647b;
  font:300 6px var(--mono);
  letter-spacing:.13em;
}
.pv-foot span:last-child{color:#9491ea}

/* 01 — Signal pipeline */
.pipeline-board{position:absolute;z-index:2;top:18%;right:5%;bottom:21%;left:5%}
.pipeline-track{position:absolute;z-index:1;top:50%;right:8%;left:8%;height:1px;background:rgba(244,243,248,.12)}
.pipeline-track i{display:block;width:100%;height:1px;background:linear-gradient(90deg,#5752ca,#aaa7ff,#f4f3f8);transform:scaleX(var(--m-progress));transform-origin:left;box-shadow:0 0 12px rgba(137,133,255,.72)}
.pipeline-stations{position:absolute;z-index:2;inset:0;display:grid;grid-template-columns:repeat(6,1fr);align-items:center}
.pipeline-station{
  --local:clamp(0,calc((var(--m-progress) - var(--stage))*8 + .18),1);
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#77758e;
  opacity:calc(.2 + var(--local)*.8);
}
.pipeline-station>span,.pipeline-station>small{font:300 7px var(--mono);letter-spacing:.1em}
.pipeline-station>span{margin-bottom:12px;color:#aaa7ff}
.pipeline-station>small{margin-top:12px;font-size:6px}
.pipeline-station>i{position:relative;width:clamp(34px,3.5vw,54px);height:clamp(94px,15vh,140px);overflow:hidden;border:1px solid rgba(244,243,248,.22);background:#050510}
.pipeline-station>i:before{content:"";position:absolute;z-index:2;top:50%;right:0;left:0;height:1px;background:rgba(244,243,248,.28)}
.pipeline-station>i b{position:absolute;right:0;bottom:0;left:0;height:calc(var(--local)*100%);background:linear-gradient(180deg,rgba(145,141,255,.42),rgba(75,70,184,.12));box-shadow:inset 0 1px #aaa7ff}
.pipeline-pulse{position:absolute;z-index:5;top:50%;left:calc(8% + var(--m-progress)*84%);width:12px;height:12px;border:2px solid #f4f3f8;background:#8985ff;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 8px rgba(137,133,255,.12),0 0 25px rgba(137,133,255,.95)}
.pipeline-packets{position:absolute;z-index:4;top:50%;left:calc(8% + var(--m-progress)*84%);opacity:clamp(0,calc(var(--m-progress)*8),.75)}
.pipeline-packets i{position:absolute;width:5px;height:5px;border:1px solid #7773df;background:#090824}
.pipeline-packets i:nth-child(1){transform:translate(-68px,-24px)}
.pipeline-packets i:nth-child(2){transform:translate(-45px,21px)}
.pipeline-packets i:nth-child(3){transform:translate(-92px,4px)}
.pipeline-packets i:nth-child(4){transform:translate(-28px,-15px)}

/* 02 — Noise to signal */
.signal-board{position:absolute;z-index:2;top:16%;right:4%;bottom:18%;left:4%}
.signal-board svg{width:100%;height:100%;overflow:visible}
.signal-grid path{fill:none;stroke:rgba(244,243,248,.065);stroke-width:1;vector-effect:non-scaling-stroke}
.signal-noise{
  opacity:calc(.78 - var(--m-progress)*.48);
  transform:scaleY(calc(1 - var(--m-progress)*.62));
  transform-box:fill-box;
  transform-origin:center;
}
.signal-noise path{fill:none;stroke:#666382;stroke-width:1.25;vector-effect:non-scaling-stroke}
.signal-noise path:nth-child(2n){stroke:#504cb8}
.signal-clean{clip-path:inset(0 calc((1 - var(--m-progress))*100%) 0 0)}
.signal-clean path{fill:none;stroke:#d7d5ff;stroke-width:4;filter:drop-shadow(0 0 7px rgba(137,133,255,.85));vector-effect:non-scaling-stroke}
.signal-scanner{position:absolute;top:7%;bottom:8%;left:calc(6% + var(--m-progress)*88%);width:1px;background:linear-gradient(transparent,#aaa7ff 18%,#aaa7ff 82%,transparent);box-shadow:0 0 15px rgba(137,133,255,.75)}
.signal-readout{position:absolute;right:6%;bottom:7%;left:6%;display:flex;justify-content:space-between;color:#6e6b84;font:300 6px var(--mono);letter-spacing:.12em}
.signal-readout b{color:#aaa7ff;font-weight:300}

/* 03 — Robustness matrix */
.matrix-board{position:absolute;z-index:2;top:18%;right:8%;bottom:21%;left:8%}
.matrix-head{display:flex;justify-content:space-between;margin-bottom:18px;color:#77758e;font:300 7px var(--mono);letter-spacing:.12em}
.matrix-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(6,1fr);gap:clamp(5px,.7vw,10px);height:76%;padding:clamp(10px,1.2vw,18px);border:1px solid rgba(244,243,248,.14);background:rgba(3,3,9,.3)}
.matrix-grid>i{
  --local:clamp(0,calc((var(--m-progress) - var(--threshold))*12 + .15),1);
  position:relative;
  display:block;
  border:1px solid rgba(137,133,255,calc(.15 + var(--local)*.55));
  background:rgba(116,110,240,calc(.025 + var(--local)*.32));
  opacity:calc(.18 + var(--local)*.82);
  transform:scale(calc(.82 + var(--local)*.18));
  box-shadow:inset 0 0 calc(var(--local)*18px) rgba(137,133,255,.12);
}
.matrix-grid>i.is-rejected{background:rgba(3,3,9,.25);border-color:rgba(151,148,177,calc(.12 + var(--local)*.3))}
.matrix-grid>i.is-rejected:after{content:"";position:absolute;top:50%;left:8%;width:84%;height:1px;background:#77758e;transform:rotate(-35deg) scaleX(var(--local));box-shadow:0 0 6px rgba(170,167,255,.35)}
.matrix-scanner{position:absolute;z-index:3;top:34px;bottom:42px;left:calc(var(--m-progress)*100%);width:1px;background:linear-gradient(transparent,#aaa7ff,transparent);box-shadow:0 0 18px rgba(137,133,255,.8)}
.matrix-legend{display:flex;gap:24px;margin-top:15px;color:#77758e;font:300 6px var(--mono);letter-spacing:.1em}
.matrix-legend span{display:flex;gap:7px;align-items:center}
.matrix-legend i{width:7px;height:7px;border:1px solid #7773df;background:rgba(137,133,255,.25)}
.matrix-legend span:last-child i{position:relative;background:transparent;border-color:#77758e}
.matrix-legend span:last-child i:after{content:"";position:absolute;top:3px;left:-1px;width:8px;height:1px;background:#77758e;transform:rotate(-35deg)}

/* 04 — Modular system architecture */
.architecture-board{position:absolute;z-index:2;top:14%;right:7%;bottom:18%;left:7%}
.architecture-spine{position:absolute;z-index:0;top:10%;bottom:7%;left:50%;width:1px;background:rgba(244,243,248,.1)}
.architecture-spine:after{content:"";position:absolute;right:0;bottom:0;left:0;height:100%;background:linear-gradient(0deg,#5d58d6,#aaa7ff);transform:scaleY(var(--m-progress));transform-origin:bottom;box-shadow:0 0 11px rgba(137,133,255,.7)}
.architecture-module{
  --local:clamp(0,calc((var(--m-progress) - var(--stage))*8 + .18),1);
  position:absolute;
  z-index:2;
  height:clamp(45px,7vh,62px);
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  overflow:hidden;
  padding:0 15px;
  border:1px solid rgba(244,243,248,calc(.08 + var(--local)*.2));
  color:#88869e;
  background:rgba(5,5,16,calc(.35 + var(--local)*.55));
  opacity:calc(.12 + var(--local)*.88);
  transform:translateY(calc((1 - var(--local))*32px));
  box-shadow:0 10px 24px rgba(0,0,0,calc(var(--local)*.24));
}
.architecture-module span{color:#8f8cf0;font:300 7px var(--mono)}
.architecture-module b{font:300 clamp(8px,.7vw,11px) var(--mono);letter-spacing:.1em}
.architecture-module>i{position:absolute;right:0;bottom:0;left:0;height:1px;background:#918dff;transform:scaleX(var(--local));transform-origin:left;box-shadow:0 0 8px #7773df}
.module-1{top:75%;left:4%;width:50%}.module-2{top:62%;left:31%;width:57%}.module-3{top:49%;left:10%;width:61%}.module-4{top:36%;left:38%;width:52%}.module-5{top:23%;left:16%;width:65%}.module-6{top:10%;left:44%;width:49%}
.architecture-output{position:absolute;top:0;right:7%;text-align:right;color:#77758e;opacity:clamp(0,calc((var(--m-progress) - .82)*7),1)}
.architecture-output span,.architecture-output b{display:block;font:300 7px var(--mono);letter-spacing:.12em}
.architecture-output b{margin-top:5px;color:#c4c1ff;font-size:9px}

/* 05 — Hypothesis pruning */
.selection-board{position:absolute;z-index:2;top:16%;right:4%;bottom:18%;left:4%}
.selection-board svg{width:100%;height:100%;overflow:visible}
.selection-grid path{fill:none;stroke:rgba(244,243,248,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.selection-branches{clip-path:inset(0 calc((1 - var(--m-progress))*100%) 0 0);opacity:calc(.68 - var(--m-progress)*.3)}
.selection-branches path{fill:none;stroke:#5e5b76;stroke-width:1.25;vector-effect:non-scaling-stroke}
.selection-survivor{clip-path:inset(0 calc((1 - var(--m-progress))*100%) 0 0)}
.selection-survivor path{fill:none;stroke:#aaa7ff;stroke-width:4;filter:drop-shadow(0 0 7px rgba(137,133,255,.75));vector-effect:non-scaling-stroke}
.selection-survivor rect{fill:#090824;stroke:#e1dfff;stroke-width:2;transform-box:fill-box;transform-origin:center;transform:rotate(45deg);vector-effect:non-scaling-stroke}
.selection-rejections{fill:none;stroke:#77758e;stroke-width:2;opacity:clamp(0,calc((var(--m-progress) - .24)*3),.8);vector-effect:non-scaling-stroke}
.selection-scanner{position:absolute;top:8%;bottom:8%;left:calc(7% + var(--m-progress)*86%);width:1px;background:linear-gradient(transparent,#8e8aec,transparent);box-shadow:0 0 12px rgba(137,133,255,.65)}
.selection-status{position:absolute;right:7%;bottom:7%;left:7%;display:flex;justify-content:space-between;color:#6f6c84;font:300 6px var(--mono);letter-spacing:.11em}
.selection-status b{color:#aaa7ff;font-weight:300}

/* 06 — Reference study: editorial curve with copy on the right. */
.m-process-reference .visual-reference{right:42%;background:linear-gradient(150deg,rgba(24,22,80,.22),rgba(3,3,9,.08) 65%)}
.m-process-reference .m-stages{width:42%}
.m-process-reference .m-stage{padding:4.4vw}
.m-process-reference .sequence-head{display:none}
.m-process-reference .m-stage>span{font-size:clamp(9px,.72vw,11px);letter-spacing:.14em}
.m-process-reference .m-stage h2{font-size:clamp(4.6rem,6.35vw,7.5rem);letter-spacing:-.075em}
.m-process-reference .m-stage p{max-width:360px;color:#b1afc2;font:300 italic clamp(15px,1.2vw,18px)/1.45 var(--serif)}
.m-process-reference .m-progress{right:auto;left:3%;width:52%;transform:none}
.m-process-reference .m-progress span{color:#8c89a2;font-size:clamp(8px,.62vw,9px)}
.sequence-next{position:absolute;z-index:10;right:2vw;bottom:18px;padding-bottom:7px;border-bottom:1px solid #7773df;color:#aaa7ff;font:400 clamp(9px,.72vw,11px) var(--mono);letter-spacing:.14em}
.visual-reference:before{background:radial-gradient(ellipse at 56% 46%,rgba(121,115,255,.11),transparent 66%);opacity:calc(.4 + var(--m-progress)*.6)}
.reference-chart{position:absolute;z-index:2;top:17%;right:5%;bottom:13%;left:5%}
.reference-chart svg{width:100%;height:100%;overflow:visible}
.reference-grid path{fill:none;stroke:rgba(244,243,248,.095);stroke-width:1;vector-effect:non-scaling-stroke}
.reference-curve-ghost{fill:none;stroke:rgba(204,201,229,.22);stroke-width:2;vector-effect:non-scaling-stroke}
.reference-curve-live{clip-path:inset(0 calc((1 - var(--m-progress))*100%) 0 0)}
.reference-curve-live path{fill:none;stroke:#c9c6ff;stroke-width:3;filter:drop-shadow(0 0 5px rgba(137,133,255,.55));vector-effect:non-scaling-stroke}
.reference-targets{opacity:calc(.5 - var(--m-progress)*.2)}
.reference-targets circle:first-child{fill:#08071b;stroke:#8b88a1;stroke-width:2;vector-effect:non-scaling-stroke}
.reference-targets circle:last-child{fill:#cbc9ff}
.reference-marker{opacity:clamp(.13,calc((var(--m-progress) - var(--stage))*10 + 1),1)}
.reference-marker circle:first-child{fill:#08071b;stroke:#aaa7ff;stroke-width:2;vector-effect:non-scaling-stroke}
.reference-marker circle:nth-child(2){fill:#f4f3f8}
.reference-marker text{fill:#8f8ca5;font:300 13px var(--mono);text-anchor:middle;letter-spacing:.08em}

@media(max-width:850px){
  .pv-caption{top:7%}
  .pv-phase-strip{bottom:9%}
  .pv-foot{display:none}
  .pipeline-board,.matrix-board{bottom:16%}
  .signal-board,.selection-board{bottom:13%}
  .architecture-board{bottom:13%}
  .m-process-reference .visual-reference{right:43%}
  .m-process-reference .m-stages{width:43%}
  .m-process-reference .m-stage{padding:4vw}
  .m-process-reference .m-stage h2{font-size:clamp(4rem,6.1vw,5.4rem)}
}

@media(max-width:650px){
  .process-visual{background-size:46px 46px,46px 46px,auto}
  .pv-caption{top:7%;font-size:6px}
  .pv-caption span:last-child{display:block}
  .pv-phase-strip{right:4%;bottom:5%;left:4%}
  .pv-phase-strip span{font-size:0;text-align:center}
  .pv-phase-strip b{font-size:6px}
  .pipeline-board{top:18%;right:2%;bottom:12%;left:2%}
  .pipeline-station>i{width:28px;height:74px}
  .pipeline-station>small{display:none}
  .pipeline-packets{display:none}
  .signal-board,.selection-board{top:15%;right:1%;bottom:8%;left:1%}
  .signal-readout,.selection-status{display:none}
  .matrix-board{top:17%;right:4%;bottom:11%;left:4%}
  .matrix-grid{gap:4px;height:72%;padding:7px}
  .matrix-head{font-size:6px}
  .matrix-legend{display:none}
  .architecture-board{top:12%;right:3%;bottom:8%;left:3%}
  .architecture-module{height:37px;padding:0 9px;grid-template-columns:27px 1fr}
  .architecture-module b{font-size:6px}
  .architecture-output{display:none}
  .m-process-reference .visual-reference{inset:0 0 46%}
  .m-process-reference .m-stages{top:54%;bottom:44px;width:100%}
  .m-process-reference .m-stage{padding:22px 14px}
  .m-process-reference .m-stage h2{font-size:13vw}
  .m-process-reference .m-stage p{max-width:330px;font-size:13px}
  .m-process-reference .m-progress{right:auto;left:14px;width:58vw;transform:none}
  .sequence-next{right:14px}
  .reference-chart{top:13%;right:2%;bottom:8%;left:2%}
}