/* A source-to-action sequence: map the context, connect the work, hand it over. */
.visual-delivery{--delivery-duration:4.8s}
.visual-delivery article{min-width:0;display:grid;grid-template-rows:auto 1fr auto auto}
.delivery-diagram{height:288px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:76px 32px 52px 32px minmax(54px,1fr)}
.map-sources,.build-sources{align-self:center}
.map-sources>span{margin-inline:6px}
.map-sources>span,.launch-grid>div{padding:8px;line-height:18px}
.launch-grid .icon:last-child{top:8px;left:calc(50% + 16px)}
.delivery-diagram>.flow-wires{height:100%}
.delivery-diagram>.diagram-center{grid-row:3}
.map-diagram>.diagram-owner{grid-row:4 / 6;align-self:center;padding-top:0}
.launch-diagram>.launch-handoff{grid-row:4 / 6;align-self:center;margin-top:0}
.build-outputs{align-self:start;padding-top:12px}
.flow-wires{overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.flow-wires path{vector-effect:non-scaling-stroke}
.flow-signal{stroke:var(--ink);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.flow-signal:nth-last-child(3){--flow-delay:.15s}
.flow-signal:nth-last-child(2){--flow-delay:.4s}
.flow-signal:last-child{--flow-delay:.65s}
.flow-wires-out{height:30px}
.flow-wires-out .flow-signal{stroke-dasharray:none;stroke-dashoffset:0}
.map-sources>span,.build-sources>span{border-radius:6px;min-width:0}
.build-sources>span{display:grid;place-items:center;width:44px;height:44px}
.visual-stage-status{position:relative;padding-bottom:12px}
.visual-stage-status:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.launch-grid>div{position:relative}
.launch-grid>div:nth-child(2){--check-delay:.7s}
.launch-grid>div:nth-child(3){--check-delay:1.4s}
.launch-grid>div>.icon:last-child{stroke-dasharray:32;stroke-dashoffset:0}
.visual-delivery [data-delivery-active] .flow-signal{animation:delivery-flow 3.4s var(--ease) var(--flow-delay,0s) both}
.visual-delivery [data-delivery-active] .flow-wires-out .flow-signal{animation-name:delivery-output-flow;animation-duration:2.4s;animation-delay:calc(1.5s + var(--flow-delay,0s))}
.visual-delivery [data-delivery-active] .diagram-center{animation:delivery-receive var(--delivery-duration) var(--ease) both}
.visual-delivery [data-delivery-active] .diagram-center>img{animation:delivery-mark var(--delivery-duration) var(--ease) both}
.visual-delivery [data-delivery-active] .map-sources>span,.visual-delivery [data-delivery-active] .build-sources>span{animation:delivery-source 2.2s var(--ease) both}
.visual-delivery [data-delivery-active] :is(.map-sources,.build-sources)>:nth-child(2){animation-delay:.25s}
.visual-delivery [data-delivery-active] :is(.map-sources,.build-sources)>:nth-child(3){animation-delay:.5s}
.visual-delivery [data-delivery-active] .build-outputs>span{animation:delivery-output 1.4s var(--ease) 2.5s both}
.visual-delivery [data-delivery-active] .build-outputs>span:nth-child(2){animation-delay:2.8s}
.visual-delivery [data-delivery-active] .build-outputs>span:nth-child(3){animation-delay:3.1s}
.visual-delivery [data-delivery-active] .launch-grid>div{animation:delivery-source 2.2s var(--ease) var(--check-delay,0s) both}
.visual-delivery [data-delivery-active] .launch-grid>div>.icon:last-child{animation:delivery-check 1s var(--ease) calc(.25s + var(--check-delay,0s)) both}
.visual-delivery [data-delivery-active] .launch-handoff{animation:delivery-handoff 1s var(--ease) 2.6s both}
.visual-delivery [data-delivery-active] .visual-stage-status:after{animation:delivery-progress var(--delivery-duration) linear both}
.visual-delivery [data-delivery-active] *,.visual-delivery [data-delivery-active] :after{animation-play-state:paused}
.visual-delivery[data-motion-state="running"] [data-delivery-active] *,.visual-delivery[data-motion-state="running"] [data-delivery-active] :after{animation-play-state:running}
@keyframes delivery-flow{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}62%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes delivery-output-flow{0%,100%{opacity:0}20%,80%{opacity:1}}
@keyframes delivery-source{0%,100%{background:transparent}25%,65%{background:var(--yellow)}}
@keyframes delivery-receive{0%,22%{background:var(--request-paper);color:var(--ink)}38%,85%{background:var(--ink);color:var(--white)}100%{background:var(--source-wash);color:var(--ink)}}
@keyframes delivery-mark{0%,22%,100%{filter:none}38%,85%{filter:brightness(0) invert(1)}}
@keyframes delivery-output{0%{opacity:.45;transform:translateY(-5px)}70%,100%{opacity:1;transform:translateY(0)}}
@keyframes delivery-check{0%{stroke-dashoffset:32;opacity:.25}100%{stroke-dashoffset:0;opacity:1}}
@keyframes delivery-handoff{0%{opacity:.45;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes delivery-progress{to{transform:scaleX(1)}}
@media(min-width:851px) and (max-width:1000px){.map-sources>span,.launch-grid>div{margin-inline:4px;padding-inline:4px;font-size:10px}.launch-grid .icon:last-child{left:calc(50% + 14px)}}
@media(max-width:359px){.map-sources>span,.launch-grid>div{margin-inline:4px;padding-inline:4px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.visual-delivery .flow-signal{display:none}.visual-delivery .diagram-center{background:var(--source-wash)}.visual-delivery .visual-stage-status:after{transform:scaleX(1)}}