/* Three connected steps, animated only while their process is in view. */
.case-window{--stage-1:1;--stage-2:1;--stage-3:1;--result-light:1}
.case-window figcaption{padding-bottom:16px;border-bottom:0}
.case-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;height:3px}
.case-progress>span{position:relative;overflow:hidden;border-radius:3px;background:#c6a4ff1f}
.case-progress>span:before{content:'';position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,#7130ff,#dab8ff);transform:scaleX(var(--stage-1))}
.case-progress>span:nth-child(2):before{transform:scaleX(var(--stage-2))}
.case-progress>span:nth-child(3):before{transform:scaleX(var(--stage-3))}
.case-window[data-process=processing] .case-window-dot{background:#ead6ff;box-shadow:0 0 0 4px #a76bff1f}
.case-route{margin-top:6px}
.case-route>li{align-items:flex-start;gap:16px;min-height:68px;padding-block:12px;border-radius:12px}
.case-route>li>div{padding-block:8px}
.case-route>li:not(:last-child):before,.case-route>li:not(:last-child):after{content:'';position:absolute;left:19px;top:32px;bottom:-32px;width:2px;border-radius:2px}
.case-route>li:not(:last-child):before{background:#71489c55}
.case-route>li:not(:last-child):after{background:linear-gradient(#8140ff,#dec5ff);transform-origin:top;transform:scaleY(var(--wire-progress,1))}
.route-marker{width:40px;height:40px;font-size:.8125rem;background:#241b32;border-color:#8459bd5c;transition:background-color .22s,border-color .22s,box-shadow .22s}
.route-marker img{display:block;width:26px;height:26px;transform-origin:center}
.route-marker.route-agent{background:#4e17a0;border-color:#9865db}
.case-route strong{color:#d9cfe5;transition:color .22s}
.case-route>li[data-step-state=current]{background:linear-gradient(90deg,transparent,#9958ff12)}
.case-route>li[data-step-state=current] strong,.case-route>li[data-step-state=complete] strong{color:#faf4ff}
.case-route>li[data-step-state=current] .route-marker{background:#5e00ff;border-color:#c495ff;color:#fff;box-shadow:0 0 0 5px #9852ff1a,0 0 22px #8938ff38}
.case-route>li[data-step-state=complete] .route-marker{background:#432368;border-color:#ac76ed;color:#ead8ff}
.case-window[data-process=processing] .route-agent img{will-change:transform}
.case-outcome{position:relative;isolation:isolate;border-color:#a972ee70;background:#6b26d211}
.case-outcome:before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(110deg,#7023d43b,#9f69ef10);opacity:var(--result-light);box-shadow:inset 0 0 0 1px #c99bff66,0 0 30px #712cc014}
.case-outcome>span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#a766ff17;color:#dabaff}
.case-window[data-process=ready] .case-outcome>span,.case-window[data-process=complete] .case-outcome>span{background:#9252e22e;color:#f0e3ff}
@media(max-width:800px){
  .case-window figcaption{padding-bottom:14px}
  .case-route>li{gap:13px;min-height:68px;padding-block:12px}
  .case-route strong{font-size:1rem;line-height:1.5}
}
@media(max-width:370px){.case-route>li{gap:11px}.case-route strong{font-size:.9375rem}}
@media(prefers-reduced-motion:reduce){.route-marker,.case-route strong{transition:none}.route-agent img{will-change:auto!important}}
@media(forced-colors:active){.case-progress>span{border:1px solid CanvasText}.case-route>li:not(:last-child):after,.case-progress>span:before{background:Highlight}.case-route>li[data-step-state=current] .route-marker{outline:2px solid Highlight}}