/* One continuous sequence, followed by an editable local demo. */
#workflow-animation{--workflow-green:#198754;--pointer-x:50%;--pointer-y:35%;--tilt-x:0deg;--tilt-y:0deg;isolation:isolate;padding:24px;transform:perspective(1100px) rotate(-1deg);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
#workflow-animation::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(320px circle at var(--pointer-x) var(--pointer-y),#fff 0%,#d7e9ff80 45%,transparent 80%);opacity:0;transition:opacity .4s ease;pointer-events:none}
#workflow-animation:hover,#workflow-animation:focus-within{transform:perspective(1100px) translateY(-5px) rotate(-1deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));border-color:#bfd6f5;box-shadow:0 24px 55px #264d751c,0 5px 14px #264d750b}
#workflow-animation:hover::before,#workflow-animation:focus-within::before{opacity:1}
#workflow-animation > :not(.workflow-streams){position:relative;z-index:1}
#workflow-animation .visual-caption{margin-bottom:12px}
#workflow-animation .flow-line{height:36px;flex-shrink:0}
#workflow-animation .flow-line svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#workflow-animation .flow-line span{position:absolute;left:calc(50% + 23px);font-size:10px;white-space:nowrap}
#workflow-animation .workflow-branch-space{height:54px;flex-shrink:0}
#workflow-animation .workflow-arrow-second svg{position:absolute;top:4px;left:calc(50% - 10px)}
#workflow-animation .workflow-arrow-second span{top:6px}
#workflow-animation .workflow-arrow-result{height:46px}
#workflow-animation .workflow-arrow-result svg{position:absolute;top:24px;left:calc(50% - 10px)}
.workflow-arrow-first{--arrow-start:1.9s}
.workflow-arrow-second{--arrow-start:4.5s}
.workflow-arrow-result{--arrow-start:6.75s}

/* Streams use untransformed layout coordinates and tilt with the window. */
.workflow-streams{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.workflow-streams path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.workflow-rail{stroke:#5c9fff;stroke-width:1;opacity:0;transition:opacity .3s ease}
.workflow-stream{stroke:#57a9ff;stroke-width:3;stroke-dasharray:.17 1.83;stroke-dashoffset:.17;opacity:0;filter:drop-shadow(0 0 4px #78bbff)}
.workflow-stream-core{stroke:#e0f3ff;stroke-width:1}
.workflow-transit{stroke:#398cef;stroke-width:1.8;stroke-dasharray:.28 1.72;stroke-dashoffset:.28;opacity:0;filter:drop-shadow(0 0 2px #78bbff)}
.workflow-complete:hover .workflow-rail,.workflow-complete:focus-within .workflow-rail{opacity:.22}

#workflow-animation .document{display:block;padding:0;transition:border-color .25s ease,box-shadow .25s ease}
.workflow-document-trigger{display:flex;align-items:center;gap:16px;width:100%;padding:18px;border:0;border-radius:inherit;background:transparent;color:inherit;text-align:left}
.workflow-document-copy{flex:1;min-width:0}
.workflow-document-label{overflow-wrap:anywhere}
.workflow-edit-mark{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;opacity:0;transition:opacity .2s ease}
.workflow-document-trigger:hover .workflow-edit-mark,.workflow-document-trigger:focus-visible .workflow-edit-mark,.workflow-title-trigger:hover .workflow-edit-mark,.workflow-title-trigger:focus-visible .workflow-edit-mark{opacity:.65}
#workflow-animation .document:hover,#workflow-animation .document.is-editing{border-color:#97c0fa;box-shadow:0 8px 24px #2f70bf18}
#workflow-animation .article-card{padding:18px;border:1px solid #20324c;transition:border-color .25s ease,box-shadow .25s ease}
#workflow-animation .article-card:hover,#workflow-animation .article-card.is-editing{border-color:#5b8fc6;box-shadow:0 14px 30px #172f5325,inset 0 0 20px #398cef0b}
.workflow-title{position:relative}
.workflow-title-trigger{display:block;position:relative;width:100%;padding:0 18px 0 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;letter-spacing:inherit}
.workflow-title-trigger .workflow-edit-mark{position:absolute;right:0;top:7px}
.workflow-type-output{display:none}
.workflow-document-input,.workflow-title-input{position:absolute;border:0;border-bottom:1px solid #80b4f9;outline:0;border-radius:0;padding:0;color:inherit;background:transparent;font:inherit;box-shadow:0 3px 0 #80b4f926}
.workflow-document-input{top:18px;left:80px;width:calc(100% - 116px);height:28px;font-size:17px;font-weight:600}
.workflow-title-input{inset:0;width:100%;height:100%;font-weight:inherit}
.document.is-editing .workflow-document-label,.article-card.is-editing .workflow-title-trigger{visibility:hidden}
#workflow-animation .channel-chips button{display:inline-flex;align-items:center;gap:6px;position:relative;border:1px solid #bcd6f5;border-radius:7px;padding:9px 12px;background:#fff;color:#405b7b;font-size:12px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
#workflow-animation .channel-chips button::before{content:"";width:4px;height:4px;border-radius:50%;background:#3887e8;transition:background .2s ease}
#workflow-animation .channel-chips button:hover{background:#f4f9ff;border-color:#7db0f1;box-shadow:0 4px 12px #4383ca17}
#workflow-animation .channel-chips button[aria-pressed="false"]{color:#7a8ba1;border-color:#d8e4f5;background:#edf3fa}
#workflow-animation .channel-chips button[aria-pressed="false"]::before{background:#b5c3d3}
.workflow-result{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;width:max-content;color:var(--workflow-green)}
.workflow-success-icon{width:32px;height:32px;overflow:visible;flex-shrink:0;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.workflow-ring{stroke:var(--workflow-green);fill:#e3f4eb;transform:rotate(-90deg);transform-origin:18px 18px}
.workflow-check{stroke:var(--workflow-green);stroke-width:2.7}
.workflow-success-text{font-size:16px;font-weight:650;letter-spacing:1px;white-space:nowrap}
#workflow-animation .pipeline-foot{margin-top:10px}
.workflow-interaction-note{margin:6px 0 0;min-height:17px;text-align:center;font-size:10px;color:#7188a6}

/* Reserve final geometry throughout the sequence. */
.workflow-ready .document,.workflow-ready .article-card,.workflow-ready .flow-line,.workflow-ready .channel-chips button,.workflow-ready .workflow-result,.workflow-ready .workflow-interaction-note{opacity:0}
.workflow-ready button:disabled{cursor:default;pointer-events:none}
.workflow-ready .flow-line path,.workflow-ready .workflow-ring,.workflow-ready .workflow-check{stroke-dasharray:1;stroke-dashoffset:1}
.workflow-ready .workflow-ring{stroke:var(--blue);fill:transparent}
.workflow-ready .workflow-success-icon{transform:translateX(39px)}
.workflow-ready .workflow-success-text{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-12px)}
.workflow-ready .workflow-type-source{visibility:hidden}
.workflow-ready .workflow-type-output{display:block;position:absolute;inset:0 18px 0 0}
.workflow-ready .article-lines b{transform:scaleX(0);transform-origin:left}
.workflow-ready .article-bottom{opacity:0}
.workflow-ready.is-typing .workflow-type-output::after{content:"";display:inline-block;width:0;height:.95em;border-right:2px solid #91bcff;vertical-align:-.1em}

.is-playing .document{animation:workflow-materialize .7s cubic-bezier(.2,.7,.2,1) .15s both}
.is-playing .workflow-rail-document{animation:workflow-focus 1.35s ease .55s both}
.is-playing .workflow-stream-document{animation:workflow-current 1.1s cubic-bezier(.4,0,.3,1) .7s both}
.is-playing .flow-line{animation:workflow-fade .1s linear var(--arrow-start) both}
/* Every arrow stays visible; only the travelling connections dissipate. */
.is-playing .workflow-arrow-stem{animation:workflow-arrow-stem-hold .342s linear var(--arrow-start) both}
.is-playing .workflow-arrow-head{animation:workflow-arrow-head-hold .15s linear calc(var(--arrow-start) + .342s) both}
.is-playing .article-card{animation:workflow-materialize .45s ease 2.45s both}
.is-playing .workflow-rail-article{animation:workflow-focus 2s ease 2.5s both}
.is-playing .workflow-stream-article{animation:workflow-current 1.8s cubic-bezier(.4,0,.3,1) 2.65s both}
.is-playing .article-lines b{animation:workflow-line .5s ease both}
.is-playing .article-lines b:nth-child(1){animation-delay:3.25s}
.is-playing .article-lines b:nth-child(2){animation-delay:3.5s}
.is-playing .article-lines b:nth-child(3){animation-delay:3.75s}
.is-playing .article-bottom{animation:workflow-rise .3s ease 4.1s both}
.is-playing .workflow-transit-split{animation:workflow-transit .65s cubic-bezier(.3,0,.4,1) 5.12s both}
.is-playing .channel-chips button{animation:workflow-rise .35s ease both}
.is-playing .channel-chips button:nth-child(1){animation-delay:5.6s}
.is-playing .channel-chips button:nth-child(2){animation-delay:5.65s}
.is-playing .channel-chips button:nth-child(3){animation-delay:5.7s}
.is-playing .workflow-transit-merge{animation:workflow-transit .75s cubic-bezier(.3,0,.4,1) 6.15s both}
.is-playing .workflow-result{animation:workflow-fade .2s ease 7.2s both}
.is-playing .workflow-ring{animation:workflow-draw .7s ease 7.2s both,workflow-green .3s ease 7.9s forwards}
.is-playing .workflow-check{animation:workflow-draw .35s cubic-bezier(.4,0,.2,1) 8s both}
.is-playing .workflow-success-icon{animation:workflow-icon-shift .55s cubic-bezier(.2,.8,.25,1) 8.6s both}
.is-playing .workflow-success-text{animation:workflow-success-reveal .55s cubic-bezier(.2,.8,.25,1) 8.6s both}
.is-playing .workflow-interaction-note{animation:workflow-fade .3s ease 8.85s both}

@keyframes workflow-materialize{from{opacity:0;filter:blur(5px);clip-path:inset(0 40% 0 0 round 13px)}to{opacity:1;filter:blur(0);clip-path:inset(0 round 13px)}}
@keyframes workflow-current{0%{opacity:0;stroke-dashoffset:.17}12%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes workflow-transit{0%{opacity:0;stroke-dashoffset:.28}10%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes workflow-arrow-stem-hold{0%{opacity:0;stroke-dashoffset:1}10%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes workflow-arrow-head-hold{0%{opacity:0;stroke-dashoffset:1}10%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes workflow-focus{0%,100%{opacity:0}25%,75%{opacity:.55}}
@keyframes workflow-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes workflow-fade{from{opacity:0}to{opacity:1}}
@keyframes workflow-draw{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes workflow-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes workflow-green{to{stroke:var(--workflow-green);fill:#e3f4eb}}
@keyframes workflow-icon-shift{from{transform:translateX(39px)}to{transform:translateX(0)}}
@keyframes workflow-success-reveal{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-12px)}to{opacity:1;clip-path:inset(0);transform:translateX(0)}}

@media(prefers-reduced-motion:reduce){
  #workflow-animation{transition:none}
  #workflow-animation:hover,#workflow-animation:focus-within{transform:rotate(-1deg)}
  #workflow-animation *{animation:none!important}
  #workflow-animation .document,#workflow-animation .article-card,#workflow-animation .flow-line,#workflow-animation .channel-chips button,#workflow-animation .workflow-result,#workflow-animation .article-bottom,#workflow-animation .workflow-interaction-note{opacity:1;transform:none;filter:none;clip-path:none}
  #workflow-animation .workflow-type-source{visibility:visible}
  #workflow-animation .workflow-type-output{display:none}
  #workflow-animation .article-lines b,#workflow-animation .workflow-success-icon,#workflow-animation .workflow-success-text{opacity:1;transform:none;clip-path:none}
  #workflow-animation .flow-line path,#workflow-animation .workflow-check,#workflow-animation .workflow-ring{stroke-dashoffset:0}
  #workflow-animation .flow-line svg{opacity:1}
  #workflow-animation .workflow-ring{stroke:var(--workflow-green);fill:#e3f4eb}
}