/* Track fills over 72% of a 12 s loop; node n lights when the fill reaches it and stays lit until 92%. */
.fx-proc { --loop: 12s; display: flex; flex-direction: column; gap: 52px; }
.fx-proc.is-boxed { border-radius: 28px; background: var(--surface); border: 1px solid var(--line); padding: 64px; }
.fx-proc__aside { font-size: 16px; color: var(--muted); }
.fx-proc__body { position: relative; }
.fx-proc__track { position: absolute; left: 22px; top: 21px; width: calc(100% - 100% / var(--n) - 0px); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.fx-proc__fill { display: block; height: 100%; background: linear-gradient(90deg, #5B2BD9, #EE5A3A); transform-origin: left center; animation: prFill var(--loop) linear infinite; }
.fx-proc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fx-proc__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding-right: 32px; }
.fx-proc__node {
	position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink);
	animation-duration: var(--loop); animation-timing-function: linear; animation-iteration-count: infinite;
}
.fx-proc__title { margin: 10px 0 0; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1.2; }
.fx-proc__text { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* Node i of n lights at i/(n-1) of the fill (72% of the loop), stays lit to 92%; the last node is coral. */
@keyframes fxpn3-0{0%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn3-0}
@keyframes fxpn3-1{0%,35%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}37%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn3-1}
@keyframes fxpn3-2{0%,71%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFFFFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}
.fx-proc[style*="--n:3;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn3-2}
@keyframes fxpn4-0{0%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn4-0}
@keyframes fxpn4-1{0%,22%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}24%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn4-1}
@keyframes fxpn4-2{0%,47%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}49%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn4-2}
@keyframes fxpn4-3{0%,71%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFFFFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}
.fx-proc[style*="--n:4;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn4-3}
@keyframes fxpn5-0{0%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn5-0}
@keyframes fxpn5-1{0%,16%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}18%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn5-1}
@keyframes fxpn5-2{0%,35%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}37%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn5-2}
@keyframes fxpn5-3{0%,53%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}55%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn5-3}
@keyframes fxpn5-4{0%,71%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFFFFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}
.fx-proc[style*="--n:5;"] .fx-proc__step:nth-child(5) .fx-proc__node{animation-name:fxpn5-4}
@keyframes fxpn6-0{0%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(1) .fx-proc__node{animation-name:fxpn6-0}
@keyframes fxpn6-1{0%,13%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}15%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(2) .fx-proc__node{animation-name:fxpn6-1}
@keyframes fxpn6-2{0%,27%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}29%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(3) .fx-proc__node{animation-name:fxpn6-2}
@keyframes fxpn6-3{0%,42%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}44%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(4) .fx-proc__node{animation-name:fxpn6-3}
@keyframes fxpn6-4{0%,56%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}58%,92%{background-color:#5B2BD9;color:#FFFFFF;border-color:#5B2BD9;box-shadow:0 0 0 6px #EEEBFE}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #EEEBFE}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(5) .fx-proc__node{animation-name:fxpn6-4}
@keyframes fxpn6-5{0%,71%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}73%,92%{background-color:#EE5A3A;color:#FFFFFF;border-color:#EE5A3A;box-shadow:0 0 0 6px #FFE8E2}100%{background-color:#FFFFFF;color:#17112E;border-color:#E3DEEF;box-shadow:0 0 0 0 #FFE8E2}}
.fx-proc[style*="--n:6;"] .fx-proc__step:nth-child(6) .fx-proc__node{animation-name:fxpn6-5}
@keyframes prFill { 0% { transform: scaleX(0); opacity: 1; } 72% { transform: scaleX(1); opacity: 1; } 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes prFillV { 0% { transform: scaleY(0); opacity: 1; } 72% { transform: scaleY(1); opacity: 1; } 92% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 960px) {
	.fx-proc.is-boxed { padding: 40px 32px; }
	.fx-proc__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fx-proc__step { padding: 0 0 0 64px; min-height: 44px; gap: 6px; }
	.fx-proc__node { position: absolute; left: 0; top: 0; }
	.fx-proc__title { margin: 8px 0 0; font-size: 21px; }
	.fx-proc__track { left: 21px; top: 22px; bottom: 22px; width: 2px; height: auto; }
	.fx-proc__fill { width: 100%; height: 100%; transform-origin: top center; animation-name: prFillV; }
}
@media (max-width: 600px) {
	.fx-proc { gap: 32px; }
	.fx-proc.is-boxed { padding: 0; background: none; border: 0; border-radius: 0; }
	.fx-proc__step { padding-left: 60px; }
	.fx-proc__text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-proc__node { background-color: #5B2BD9 !important; color: #fff !important; border-color: #5B2BD9 !important; }
	.fx-proc__node.is-last { background-color: #EE5A3A !important; border-color: #EE5A3A !important; }
	.fx-proc__fill { transform: none !important; }
}