/* Technology system instrument — causal choreography.
   The diagram explains one operating loop rather than behaving like an ambient
   screensaver. JavaScript supplies phase/state; CSS owns visual semantics. */
.system-instrument[data-cyb-choreographed="true"]::before{animation:none;opacity:0}
.system-instrument[data-cyb-choreographed="true"] .silo-ring,
.system-instrument[data-cyb-choreographed="true"] .dag,
.system-instrument[data-cyb-choreographed="true"] .band,
.system-instrument[data-cyb-choreographed="true"] .band-fill,
.system-instrument[data-cyb-choreographed="true"] .ai-ring,
.system-instrument[data-cyb-choreographed="true"] .out,
.system-instrument[data-cyb-choreographed="true"] .win-ring,
.system-instrument[data-cyb-choreographed="true"] .dash{animation:none}
.system-instrument[data-cyb-choreographed="true"] .ai-ring,
.system-instrument[data-cyb-choreographed="true"] .win-ring,
.system-approval{transform-box:fill-box;transform-origin:center}

.system-instrument[data-cyb-choreographed="true"] .system-stage-track{display:flex;align-items:center;justify-content:flex-end;gap:.42rem;min-width:0;color:var(--deep-green);white-space:nowrap}
.system-instrument[data-cyb-choreographed="true"] .system-stage-track::before{animation:none;opacity:.32;transition:opacity .2s ease,box-shadow .2s ease}
.system-instrument[data-cyb-choreographed="true"]:not([data-phase="idle"]):not([data-phase="static"]) .system-stage-track::before{opacity:1}
.system-stage-token{opacity:.34;transition:opacity .2s ease,color .2s ease,text-shadow .2s ease}
.system-stage-token.is-active{opacity:1;color:#8fe4c1}
.system-stage-sep{opacity:.24}

.system-source{opacity:.7;transition:opacity .2s ease,filter .2s ease}
.system-input-flow,.system-output-flow{opacity:.16}
.system-graph-network{opacity:.22;transition:opacity .2s ease,filter .2s ease,stroke .2s ease}
.system-path-family-scan{opacity:0;fill:none;stroke:#7ddcff;stroke-width:1.35;stroke-dasharray:3 10;pointer-events:none}
.system-critical-corridor{opacity:.16}
.system-graph-node{opacity:.52;transition:opacity .18s ease,filter .18s ease}
.system-canonical-label,.system-predictive-label{opacity:.58;transition:opacity .2s ease,fill .2s ease}
.system-output{opacity:.62;transition:opacity .2s ease,filter .2s ease}
.system-output.is-complete{opacity:.82}
.system-output--2.is-complete .sl{fill:#8fe4c1}
.system-new-state{opacity:.68;transition:opacity .2s ease,filter .2s ease}
.system-approval,.system-feedback{opacity:0;pointer-events:none}
.system-feedback{fill:none;stroke:#69dcae;stroke-width:1.25;stroke-dasharray:5 10}

/* 01 · fragmented evidence arrives asynchronously. */
.system-instrument[data-phase="ingest"] .system-source{animation:cybSystemSourceEvent .72s ease-out both;animation-delay:calc(var(--stage-index) * 120ms)}
.system-instrument[data-phase="ingest"] .system-source .silo-ring{animation:cybSystemSourceRing .68s ease-out both;animation-delay:calc(var(--stage-index) * 120ms)}
.system-instrument[data-phase="ingest"] .system-input-flow{animation:cybSystemTravel .78s linear both;animation-delay:calc(100ms + var(--stage-index) * 120ms)}

/* 02 · temporal graph reconciles all connected branches and lineage. */
.system-instrument[data-phase="resolve"] .system-graph-node{animation:cybSystemNodeResolve .62s ease-out both;animation-delay:calc(var(--node-index) * 55ms)}
.system-instrument[data-phase="resolve"] .system-graph-network{animation:cybSystemNetworkResolve .78s ease-out both}
.system-instrument[data-phase="resolve"] .system-path-family-scan{animation:cybSystemPathFamilyScan .92s linear both}
.system-instrument[data-phase="resolve"] .system-critical-corridor{opacity:.14}
.system-instrument[data-phase="resolve"] .dag-t{fill:#8fe4c1}

/* 03 · the canonical project-state boundary locks. */
.system-instrument[data-phase="state"] .band{animation:cybSystemStateLock .68s cubic-bezier(.16,1,.3,1) both}
.system-instrument[data-phase="state"] .band-fill{animation:cybSystemStateFill .68s cubic-bezier(.16,1,.3,1) both}
.system-instrument[data-phase="state"] .system-canonical-label{opacity:1;fill:#a9dfff}

/* 04 · CPM/EVM and propagation evaluate the full critical + near-critical path family. */
.system-instrument[data-phase="compute"] .band,.system-instrument[data-phase="reason"] .band{opacity:1}
.system-instrument[data-phase="compute"] .band-fill,.system-instrument[data-phase="reason"] .band-fill{opacity:.78}
.system-instrument[data-phase="compute"] .system-predictive-label{opacity:1;fill:#a9dfff}
.system-instrument[data-phase="compute"] .system-graph-network{animation:cybSystemNetworkCompute .72s ease-out both}
.system-instrument[data-phase="compute"] .system-path-family-scan{animation:cybSystemPathFamilyScan .72s linear both}
.system-instrument[data-phase="compute"] .system-critical-corridor{animation:cybSystemPrimaryCorridor .7s linear both}

/* 05 · reasoning transforms state into candidate action. */
.system-instrument[data-phase="reason"] .core{animation:cybSystemCoreCompute .78s ease-in-out both}
.system-instrument[data-phase="reason"] .ai-ring{animation:cybSystemReasonWave .78s ease-out both;animation-delay:calc(var(--ring-index) * 100ms)}
.system-instrument[data-phase="reason"] .core-l{filter:drop-shadow(0 0 5px rgba(130,226,255,.25))}

/* 06–09 · outputs emerge in causal order and remain as accumulated state. */
.system-instrument[data-phase="forecast"] .system-output-flow--0,
.system-instrument[data-phase="mitigate"] .system-output-flow--1,
.system-instrument[data-phase="decide"] .system-output-flow--2,
.system-instrument[data-phase="govern"] .system-output-flow--3{animation:cybSystemTravel .46s linear both}
.system-instrument[data-phase="forecast"] .system-output--0,
.system-instrument[data-phase="mitigate"] .system-output--1,
.system-instrument[data-phase="decide"] .system-output--2,
.system-instrument[data-phase="govern"] .system-output--3{animation:cybSystemOutputCommit .46s ease-out both}

/* Decisions are intentionally different: computation pauses at human authority. */
.system-instrument[data-phase="decide"] .system-output--2{filter:drop-shadow(0 0 8px rgba(102,217,174,.34))}
.system-instrument[data-phase="decide"] .system-output--2 .sl{fill:#8fe4c1}
.system-instrument[data-phase="decide"] .system-approval{animation:cybSystemApproval .65s cubic-bezier(.16,1,.3,1) .2s both}

/* 10 · observed state closes the loop back into the connected model. */
.system-instrument[data-phase="observe"] .system-close-flow{animation:cybSystemCloseTrace .52s ease-out both}
.system-instrument[data-phase="observe"] .system-new-state{animation:cybSystemOutcome .55s ease-out .12s both}
.system-instrument[data-phase="observe"] .win-ring{animation:cybSystemOutcomeRing .65s ease-out .12s both}
.system-instrument[data-phase="observe"] .system-feedback{animation:cybSystemFeedback .65s ease-in-out .18s both}
.system-instrument[data-phase="observe"] .system-graph-entry{animation:cybSystemFeedbackReceive .38s ease-out .56s both}

/* The three explanatory panels reinforce only the macro stage. */
.system-instrument__legend>div{transition:background .22s ease,color .22s ease}
.system-instrument[data-phase="ingest"] .system-instrument__legend>div:nth-child(1){background:rgba(79,160,218,.045);color:rgba(235,248,255,.88)}
.system-instrument:is([data-phase="resolve"],[data-phase="state"],[data-phase="compute"],[data-phase="reason"]) .system-instrument__legend>div:nth-child(2){background:rgba(79,160,218,.045);color:rgba(235,248,255,.88)}
.system-instrument:is([data-phase="forecast"],[data-phase="mitigate"],[data-phase="decide"],[data-phase="govern"],[data-phase="observe"]) .system-instrument__legend>div:nth-child(3){background:rgba(102,217,174,.04);color:rgba(235,248,255,.88)}

@keyframes cybSystemSourceEvent{0%{opacity:.55;filter:none}45%{opacity:1;filter:drop-shadow(0 0 7px rgba(79,160,218,.32))}100%{opacity:.82;filter:none}}
@keyframes cybSystemSourceRing{0%{opacity:.08}38%{opacity:.72;stroke-width:1.3}100%{opacity:.16;stroke-width:1}}
@keyframes cybSystemTravel{0%{opacity:0;stroke-dashoffset:24}18%{opacity:.95}84%{opacity:.95}100%{opacity:.14;stroke-dashoffset:-48}}
@keyframes cybSystemNodeResolve{0%{opacity:.42;filter:none}55%{opacity:1;filter:drop-shadow(0 0 5px rgba(102,217,174,.48))}100%{opacity:.72;filter:none}}
@keyframes cybSystemNetworkResolve{0%{opacity:.18;stroke:#315f7d;filter:none}50%{opacity:.8;stroke:#5fbfe9;filter:drop-shadow(0 0 5px rgba(95,191,233,.28))}100%{opacity:.48;stroke:#4b8fb7;filter:none}}
@keyframes cybSystemNetworkCompute{0%{opacity:.38;stroke:#4b8fb7}50%{opacity:.9;stroke:#82e2ff;filter:drop-shadow(0 0 6px rgba(125,220,255,.34))}100%{opacity:.58;stroke:#5aa7ce;filter:none}}
@keyframes cybSystemPathFamilyScan{0%{opacity:0;stroke-dashoffset:42}18%{opacity:.9}82%{opacity:.9}100%{opacity:.12;stroke-dashoffset:-54}}
@keyframes cybSystemPrimaryCorridor{0%{opacity:.12;stroke-dashoffset:24}45%{opacity:.58}100%{opacity:.24;stroke-dashoffset:-42}}
@keyframes cybSystemStateLock{0%{opacity:.45;stroke-width:1.2}48%{opacity:1;stroke-width:2;filter:drop-shadow(0 0 10px rgba(79,160,218,.32))}100%{opacity:.78;stroke-width:1.2;filter:none}}
@keyframes cybSystemStateFill{0%{opacity:.28}55%{opacity:.86}100%{opacity:.62}}
@keyframes cybSystemCoreCompute{0%{filter:drop-shadow(0 0 8px rgba(79,160,218,.16))}52%{filter:drop-shadow(0 0 18px rgba(79,160,218,.42))}100%{filter:drop-shadow(0 0 10px rgba(79,160,218,.2))}}
@keyframes cybSystemReasonWave{0%{opacity:.42;transform:scale(.76)}100%{opacity:0;transform:scale(1.82)}}
@keyframes cybSystemOutputCommit{0%{opacity:.55;filter:none}58%{opacity:1;filter:drop-shadow(0 0 7px rgba(102,217,174,.4))}100%{opacity:.82;filter:none}}
@keyframes cybSystemApproval{0%{opacity:0;stroke-width:1;transform:scale(.82)}48%{opacity:.9;stroke-width:2}100%{opacity:.34;stroke-width:1;transform:scale(1.12)}}
@keyframes cybSystemCloseTrace{0%{opacity:.2;stroke-dasharray:1 12;stroke-dashoffset:30}100%{opacity:.72;stroke-dasharray:5 9;stroke-dashoffset:-24}}
@keyframes cybSystemOutcome{0%{opacity:.62;filter:none}55%{opacity:1;filter:drop-shadow(0 0 9px rgba(102,217,174,.4))}100%{opacity:.86;filter:none}}
@keyframes cybSystemOutcomeRing{0%{opacity:.42;transform:scale(.82)}100%{opacity:0;transform:scale(1.75)}}
@keyframes cybSystemFeedback{0%{opacity:0;stroke-dashoffset:-60}18%{opacity:.72}82%{opacity:.72}100%{opacity:.12;stroke-dashoffset:38}}
@keyframes cybSystemFeedbackReceive{0%{opacity:.65;filter:none}45%{opacity:1;filter:drop-shadow(0 0 7px rgba(102,217,174,.55))}100%{opacity:.72;filter:none}}

@media(max-width:700px){
  .system-stage-track{justify-content:flex-start!important}
  .system-stage-token,.system-stage-sep{display:none}
  .system-stage-token.is-active{display:inline}
  .system-stage-track::after{content:"ACTIVE STAGE";margin-left:.4rem;font-size:.48rem;letter-spacing:.14em;color:rgba(145,190,214,.42)}
}

@media(prefers-reduced-motion:reduce){
  .system-instrument[data-cyb-choreographed="true"] *,
  .system-instrument[data-cyb-choreographed="true"] *::before,
  .system-instrument[data-cyb-choreographed="true"] *::after{animation:none!important;transition:none!important}
  .system-instrument[data-motion="reduced"] .system-stage-token{opacity:.64}
  .system-instrument[data-motion="reduced"] .system-feedback{opacity:.16;stroke-dasharray:5 10}
  .system-instrument[data-motion="reduced"] .system-approval{opacity:.32}
  .system-instrument[data-motion="reduced"] .system-graph-network{opacity:.5}
  .system-instrument[data-motion="reduced"] .system-path-family-scan{opacity:.24;stroke-dasharray:3 10}
  .system-instrument[data-motion="reduced"] .system-critical-corridor{opacity:.3}
}