/* Machine project track and the industrial blade process console. */
#process-section {
  --process-cyan: #38bdf8;
  --process-gold: #f5b400;
  --process-mono: Consolas, "SFMono-Regular", "Microsoft YaHei", monospace;
  position: relative;
  isolation: isolate;
  padding: 96px 0;
  border-block: 1px solid #dce7f0;
  background-color: #f3f7fb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 12v8M12 16h8' stroke='%234b7fa2' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 35%, #72b2df1c, transparent 68%), linear-gradient(180deg, #f9fcff, #edf3f9);
  background-size: 32px 32px, 100% 100%, 100% 100%;
}
#process-section .section-header { position: relative; margin-bottom: 44px; }
.machine-flow { position: relative; margin-bottom: 54px; }
.machine-flow-list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.machine-flow-step { display: grid; grid-template-rows: 80px 1fr; gap: 24px; min-width: 0; text-align: center; }
.machine-flow-rail { position: absolute; z-index: -1; left: 10%; right: 10%; top: 38px; height: 4px; overflow: hidden; border: 1px solid #99b8d166; border-radius: 6px; background: #bdd0e14d; box-shadow: 0 0 14px #38bdf811; }
.machine-flow-pulse { position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: inherit; background: linear-gradient(90deg, transparent, #38bdf8 38%, #ffcd4b 80%, transparent); box-shadow: 0 0 14px #38bdf899; animation: crFlowTrackX 4.2s linear infinite; }
.machine-flow-node { position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin-inline: auto; border: 1px dashed #4a98c4b3; border-radius: 50%; background: #f1f6fc; box-shadow: 0 0 0 4px #38bdf808; transition: border-color .25s, box-shadow .25s; }
.machine-flow-node::before { content: ''; position: absolute; inset: 7px; border: 1px solid #8fc5e85c; border-radius: inherit; background: linear-gradient(145deg, #1a456b, #0b223d 62%, #153b5b); box-shadow: inset 0 2px 7px #ffffff1a, 0 4px 10px #102f4d24; }
.machine-flow-node::after { content: ''; position: absolute; inset: 3px; border: 1px solid #58a6ce24; border-radius: inherit; }
.machine-flow-node > span { position: relative; color: #e9f7ff; font: 700 21px/1 var(--process-mono); letter-spacing: .04em; text-shadow: 0 0 12px #38bdf84d; }
.machine-flow-card { position: relative; min-width: 0; padding: 24px 16px 22px; border: 1px solid #d5e3ee; border-radius: 12px; background: #ffffffd9; box-shadow: 0 7px 22px #12385508; transition: transform .25s, box-shadow .25s, border-color .25s; }
.machine-flow-card::before { content: ''; position: absolute; top: -1px; left: 18%; right: 18%; height: 3px; border-radius: 0 0 4px 4px; background: var(--process-gold); opacity: .45; transform: scaleX(.38); transition: transform .25s, opacity .25s; }
.machine-flow-card h3 { margin: 0 0 10px; color: #133a59; font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere; }
.machine-flow-card p { margin: 0; color: #586f83; font-size: .86rem; line-height: 1.75; overflow-wrap: anywhere; }
.machine-flow-step:hover .machine-flow-node { border-color: #d6a528; box-shadow: 0 0 0 4px #38bdf812, 0 0 24px #38bdf84d; }
.machine-flow-step:hover .machine-flow-card { transform: translateY(-5px); border-color: #b3cfdf; box-shadow: 0 14px 28px #12385514; }
.machine-flow-step:hover .machine-flow-card::before { opacity: 1; transform: scaleX(1); }

.process-console { position: relative; padding: 32px; border: 1px solid #38bdf833; border-radius: 16px; background-image: linear-gradient(#38bdf80b 1px, transparent 1px), linear-gradient(90deg, #38bdf80b 1px, transparent 1px), linear-gradient(145deg, #071426 0%, #0c213d 100%); background-size: 24px 24px, 24px 24px, 100% 100%; box-shadow: 0 24px 55px #07142624, inset 0 1px 0 #ffffff0d; }
.process-console::before { content: ''; position: absolute; top: -1px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f5b400, #ffdc79 25%, #38bdf8 75%, #38bdf833); box-shadow: 0 0 16px #38bdf82b; }
.process-console-corners { position: absolute; inset: 11px; pointer-events: none; opacity: .62; background: linear-gradient(#38bdf8, #38bdf8) left top / 17px 1px no-repeat, linear-gradient(#38bdf8, #38bdf8) left top / 1px 17px no-repeat, linear-gradient(#38bdf8, #38bdf8) right top / 17px 1px no-repeat, linear-gradient(#38bdf8, #38bdf8) right top / 1px 17px no-repeat, linear-gradient(#38bdf8, #38bdf8) left bottom / 17px 1px no-repeat, linear-gradient(#38bdf8, #38bdf8) left bottom / 1px 17px no-repeat, linear-gradient(#38bdf8, #38bdf8) right bottom / 17px 1px no-repeat, linear-gradient(#38bdf8, #38bdf8) right bottom / 1px 17px no-repeat; }
.process-console-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.process-console-heading h3 { display: flex; align-items: flex-start; gap: 13px; min-width: 0; margin: 0; color: #f2f7ff; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 750; line-height: 1.5; }
.process-title-signal { flex: 0 0 5px; height: 30px; margin-top: 3px; border-radius: 2px; background: linear-gradient(#38bdf8 0 48%, #f5b400 52%); box-shadow: 0 0 16px #38bdf84d; animation: crConsoleBeacon 2.4s ease-in-out infinite; }
.process-console-legend { flex: 0 1 420px; min-width: 0; margin: 0; padding: 8px 12px; border: 1px solid rgba(245, 180, 0, .45); border-radius: 20px; background: rgba(245, 180, 0, .12); color: #fbbf24; font-size: .72rem; line-height: 1.65; }
.process-console-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 0 22px; padding-bottom: 14px; border-bottom: 1px solid #38bdf822; }
.process-inspection-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; color: #9abbd6; font: 11px/1.6 var(--process-mono); }
.process-inspection-label > span { width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 9px #38bdf8aa; }
.process-inspection-label b { color: #e4f4ff; font-weight: 500; white-space: nowrap; }
.process-inspection-toggle { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #49739b80; border-radius: 6px; background: #102640; color: #c4dcf1; font: 11px/1.5 var(--process-mono); cursor: pointer; transition: border-color .2s, color .2s; }
.process-inspection-toggle[hidden] { display: none; }
.process-inspection-toggle:hover { color: #fbbf24; border-color: #f5b40080; }
.process-inspection-toggle:focus-visible { outline: 2px solid #fbbf24; outline-offset: 4px; }
.process-console-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.process-console-item { --flow-turn: 0deg; --arrow-top: 48%; --arrow-bottom: auto; --arrow-right: -16px; position: relative; min-width: 0; margin: 0; }
.process-console-item:nth-child(7n) { --flow-turn: 90deg; --arrow-top: auto; --arrow-bottom: -17px; --arrow-right: calc(50% - 7px); }
.process-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; width: 100%; height: 100%; min-height: 186px; margin: 0; padding: 16px 13px 18px; border: 1px solid rgba(56, 189, 248, .18); border-radius: 9px; background: rgba(15, 34, 62, .72); color: #f2f7ff; text-align: left; font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 #ffffff05; transition: transform .22s, border-color .22s, box-shadow .22s; }
.process-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 8px 8px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #38bdf8, #79dbff 50%, #f5b400); box-shadow: 0 0 10px #38bdf855; }
.process-card-number { color: #38bdf8; font: 600 12px/1.2 var(--process-mono); letter-spacing: .12em; }
.process-card-name { align-self: center; color: #f1f6fd; font-size: .88rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.process-card-telemetry { align-self: end; min-width: 0; color: #9fb9d1; font: 10px/1.65 var(--process-mono); letter-spacing: .01em; overflow-wrap: anywhere; }
.core-step .process-card { border-color: rgba(245, 180, 0, .55); background: linear-gradient(180deg, rgba(245, 180, 0, .16) 0%, rgba(15, 34, 62, .85) 100%); box-shadow: 0 0 16px #f5b4000b, inset 0 1px 0 #f5b40012; }
.core-step .process-card-number { color: #fbbf24; }
.core-step .process-card-telemetry { color: #c3ba9f; }
.process-card-star { position: absolute; top: 12px; right: 10px; color: #fbbf24; font-size: 10px; text-shadow: 0 0 9px #f5b40080; animation: crConsoleBeacon 2.4s ease-in-out infinite; }
.process-console-item.is-active { z-index: 2; }
.process-console-item.is-active .process-card { border-color: #7cddff; box-shadow: 0 0 22px #38bdf82e, inset 0 0 22px #38bdf80a; }
.process-console-item.core-step.is-active .process-card { border-color: #ffd66b; box-shadow: 0 0 24px #f5b4002e, inset 0 0 22px #f5b4000a; }
[data-process-ready] .is-active .process-card::after { animation: crProcessProgress 1.2s linear infinite; }
.process-card:hover, .process-card:focus-visible { z-index: 3; transform: translateY(-4px) scale(1.025); border-color: #96e6ff; box-shadow: 0 0 24px #38bdf83b; }
.core-step .process-card:hover, .core-step .process-card:focus-visible { border-color: #ffe09a; box-shadow: 0 0 24px #f5b4003b; }
.process-card:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }
.process-flow-arrow { position: absolute; z-index: 1; top: var(--arrow-top); right: var(--arrow-right); bottom: var(--arrow-bottom); width: 14px; color: #56bde680; font: 16px/1 var(--process-mono); text-align: center; text-shadow: 0 0 8px #38bdf84d; transform: rotate(var(--flow-turn)); pointer-events: none; }
.is-active > .process-flow-arrow { color: #fbbf24; text-shadow: 0 0 9px #f5b40066; }
.process-console-loop { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; color: #89a7c1; font: 10px/1.6 var(--process-mono); }
.process-console-loop > span { color: #75bddc; white-space: nowrap; }
[data-process-paused="true"] .machine-flow-pulse, [data-process-paused="true"] .process-card-star, [data-process-paused="true"] .process-title-signal { animation-play-state: paused; }
[data-process-paused="true"] .is-active .process-card::after { animation: none; transform: scaleX(1); }

@keyframes crFlowTrackX { from { transform: translateX(-110%); } to { transform: translateX(510%); } }
@keyframes crFlowTrackY { from { transform: translateY(-110%); } to { transform: translateY(510%); } }
@keyframes crConsoleBeacon { 0%, 100% { opacity: 1; } 50% { opacity: .48; } }
@keyframes crProcessProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1180px) {
  .process-console-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process-console-item:nth-child(n) { --flow-turn: 0deg; --arrow-top: 48%; --arrow-bottom: auto; --arrow-right: -16px; }
  .process-console-item:nth-child(4n) { --flow-turn: 90deg; --arrow-top: auto; --arrow-bottom: -17px; --arrow-right: calc(50% - 7px); }
  .process-card { min-height: 174px; }
}
@media (max-width: 900px) {
  #process-section { padding: 76px 0; }
  .machine-flow-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .machine-flow-step { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto; gap: 18px; align-items: center; text-align: left; }
  .machine-flow-card { min-height: 108px; padding: 20px; }
  .machine-flow-rail { left: 38px; right: auto; top: 40px; bottom: 40px; height: auto; width: 4px; }
  .machine-flow-pulse { width: 100%; height: 25%; animation-name: crFlowTrackY; }
  .process-console-heading { flex-direction: column; gap: 15px; }
  .process-console-legend { flex-basis: auto; max-width: 100%; }
}
@media (max-width: 640px) {
  #process-section { padding: 64px 0; }
  .machine-flow { margin-bottom: 38px; }
  .machine-flow-card { padding: 18px 16px; }
  .machine-flow-card h3 { font-size: .96rem; }
  .machine-flow-card p { font-size: .8rem; }
  .process-console { padding: 25px 18px; }
  .process-console-corners { inset: 8px; }
  .process-console-heading h3 { font-size: 1.12rem; }
  .process-console-controls { align-items: flex-start; gap: 12px; }
  .process-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-console-item:nth-child(n) { --flow-turn: 0deg; --arrow-top: 48%; --arrow-bottom: auto; --arrow-right: -16px; }
  .process-console-item:nth-child(2n) { --flow-turn: 90deg; --arrow-top: auto; --arrow-bottom: -17px; --arrow-right: calc(50% - 7px); }
  .process-card { padding: 15px 11px 18px; min-height: 180px; }
  .process-card-name { font-size: .85rem; }
  .process-card-telemetry { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #process-section *, #process-section *::before, #process-section *::after { animation: none !important; transition: none !important; }
  #process-section .process-card, #process-section .machine-flow-card { transform: none; }
  #process-section .is-active .process-card::after { transform: scaleX(1); }
}