/* Shared connected-process diagram for portfolio case studies */
.workflow-motion {
  --wf-ink: #17181d;
  --wf-line: #dfe1e5;
  --wf-lime: #d4ed31;
  --wf-alert: #e66258;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: 0 !important;
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr) !important;
  margin-top: 30px;
  overflow: visible !important;
  position: relative;
}
.workflow-motion .wf-node { background:#fff; border:1px solid var(--wf-line); border-radius:15px; display:flex; flex-direction:column; gap:9px; min-height:154px; padding:16px; position:relative; }
.workflow-motion .wf-node.is-ai { background:#fcfff0; border-color:#c7dd64; }
.workflow-motion .wf-node.is-human { background:#fffaf6; border-color:#efc9b0; }
.workflow-motion .wf-node.is-output { background:var(--wf-ink); border-color:var(--wf-ink); color:#fff; }
.workflow-motion .wf-icon { align-items:center; background:#f1f2f0; border-radius:50%; color:var(--wf-ink); display:flex; font:700 13px/1 'IBM Plex Mono',monospace; height:34px; justify-content:center; width:34px; }
.workflow-motion .is-ai .wf-icon,.workflow-motion .is-output .wf-icon { background:var(--wf-lime); }
.workflow-motion .is-human .wf-icon { background:#ffe1ca; }
.workflow-motion b { font:700 14px/1.15 Inter,sans-serif; letter-spacing:-.015em; }
.workflow-motion small { color:#666b78; font:10px/1.4 'IBM Plex Mono',monospace; }
.workflow-motion .is-output small { color:#d7d9dc; }
.workflow-motion .wf-connector { align-items:center; display:flex; min-width:0; padding:0 6px; }
.workflow-motion .wf-connector::before { background:var(--wf-line); content:''; height:1px; width:100%; }
.workflow-motion .wf-connector.is-moving::before { background:linear-gradient(90deg,var(--wf-line) 0 35%,var(--wf-lime) 35% 50%,var(--wf-line) 50% 100%); background-size:200% 100%; animation:wf-flow 2.4s linear infinite; }
.workflow-motion .wf-connector::after { border-color:transparent transparent transparent #9da1a9; border-style:solid; border-width:4px 0 4px 5px; content:''; height:0; margin-left:-3px; width:0; }
.workflow-motion .wf-connector.is-moving::after { border-left-color:#a2bb17; }
.workflow-motion .wf-status { align-items:center; color:#bacb43; display:flex; font:9px/1.2 'IBM Plex Mono',monospace; gap:5px; margin-top:auto; text-transform:uppercase; }
.workflow-motion .wf-status::before { background:var(--wf-lime); border-radius:50%; content:''; height:6px; width:6px; }
.workflow-motion .wf-flag { align-items:center; border-top:1px solid #f1d7c7; color:#9b312d; display:flex; font:9px/1.28 'IBM Plex Mono',monospace; gap:5px; margin-top:auto; padding-top:8px; text-transform:uppercase; }
.workflow-motion .wf-flag::before { align-items:center; background:var(--wf-alert); border-radius:50%; color:#fff; content:'!'; display:flex; font:700 10px/1 Inter,sans-serif; height:15px; justify-content:center; width:15px; }
.workflow-motion .wf-original { border-top:1px solid var(--wf-line); display:grid; gap:12px; grid-column:1 / -1; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:28px; padding-top:18px; }
.workflow-motion .wf-original article { min-width:0; }
.workflow-motion .wf-original span { color:#4b4f57; font:10px/1.2 'IBM Plex Mono',monospace; text-transform:uppercase; }
.workflow-motion .wf-original p { color:#666b78; font:12px/1.45 Inter,sans-serif; margin:6px 0 0; }
.workflow-motion.is-enhanced .step { display:none; }
@keyframes wf-flow { to { background-position:-200% 0; } }
@media(max-width:820px) {
  .workflow-motion { grid-template-columns:1fr !important; gap:0 !important; padding-left:42px; }
  .workflow-motion .wf-node { min-height:112px; }
  .workflow-motion .wf-original { grid-template-columns:1fr; margin-top:22px; }
  .workflow-motion .wf-connector { height:31px; padding:0; width:1px; }
  .workflow-motion .wf-connector::before { height:100%; width:1px; }
  .workflow-motion .wf-connector.is-moving::before { background:linear-gradient(180deg,var(--wf-line) 0 35%,var(--wf-lime) 35% 50%,var(--wf-line) 50% 100%); background-size:100% 200%; animation-name:wf-flow-vertical; }
  .workflow-motion .wf-connector::after { border-color:#9da1a9 transparent transparent; border-width:5px 4px 0; margin:-3px 0 0 -3px; }
  .workflow-motion .wf-connector.is-moving::after { border-left-color:transparent; border-top-color:#a2bb17; }
}
@keyframes wf-flow-vertical { to { background-position:0 -200%; } }
@media(prefers-reduced-motion:reduce) { .workflow-motion .wf-connector.is-moving::before { animation:none; } }