/* Props and actors follow the same three-act timeline as the spoken verse. */
.task-scene .candles,.task-scene .music-note{display:none!important}
#taskStage{position:absolute;inset:0;z-index:3;pointer-events:none}#taskStage>svg{width:100%;height:100%;overflow:visible}#taskStage text{font:700 12px monospace;stroke:none;fill:#524460;text-anchor:middle}
.task-scene .bubble{white-space:normal;max-width:90%;text-align:center;z-index:5}
.task-scene #character{transition:left 1s;left:36%}
.task-scene[data-activity="1"] #character,.task-scene[data-activity="8"] #character{left:50%}
.task-scene .person{transform-origin:160px 320px;animation:work-think 3s ease-in-out infinite!important}
.task-scene .priest-idle{display:none}.task-scene .priest-dance{display:block}.task-scene .priest-frame{display:none}
.task-scene[data-workpose="robot"] .frame-robot,.task-scene[data-workpose="floss"] .frame-floss,.task-scene[data-workpose="shuffle"] .frame-shuffle,.task-scene[data-workpose="dab"] .frame-dab{display:block}
.task-scene[data-workpose="idle"] .priest-idle{display:block}.task-scene[data-workpose="idle"] .priest-dance{display:none}
.task-scene[data-workpose="robot"] .companion-sheet{background-position:100% 0}.task-scene[data-workpose="floss"] .companion-sheet{background-position:50% 0}.task-scene[data-workpose="shuffle"] .companion-sheet{background-position:75% 0}.task-scene[data-workpose="dab"] .companion-sheet{background-position:25% 0}
.task-scene .companion-sheet-1{clip-path:inset(0 2%)}.task-scene[data-workpose="idle"] .companion-sheet-1{clip-path:inset(0 12% 0 0)}
#taskStage .work-confetti{opacity:0}.task-scene[data-phase="2"] .work-confetti{opacity:1;animation:work-spark 2s ease-in-out infinite}
/* Coding: frantic keyboard, growing lines, then a victorious run. */
.task-scene[data-activity="1"] .person{animation:work-type .45s ease-in-out infinite!important}
.code-a{stroke-dasharray:150;animation:code-write 4s linear infinite}.code-b{opacity:0}.typing-sparks{animation:work-spark .5s steps(2) infinite}.code-success{display:none}
[data-phase="1"] .code-b{opacity:1;stroke-dasharray:150;animation:code-write 5s linear infinite}
[data-phase="2"] .code-a,[data-phase="2"] .code-b,[data-phase="2"] .typing-sparks{display:none}[data-phase="2"] .code-success{display:block}
.task-scene[data-activity="1"][data-phase="2"] .person{animation:work-victory 2s ease-in-out infinite!important}
/* Architecture: a spaghetti diagram settles into an actual boundary. */
.arch-box{transform-box:fill-box;transform-origin:center;animation:box-wobble 3s ease-in-out infinite}.box-b{animation-delay:-1s}.box-c{animation-delay:-2s}.arch-clean,.arch-adr{opacity:0}.work-pointer{transform-origin:182px 236px;animation:point-board 3s ease-in-out infinite}
[data-phase="1"] .arch-wire,[data-phase="2"] .arch-wire{opacity:0}[data-phase="1"] .arch-clean,[data-phase="2"] .arch-clean,[data-phase="2"] .arch-adr{opacity:1}[data-phase="2"] .arch-box{animation:none}
.task-scene[data-activity="2"][data-phase="1"] .person{animation:work-present 3s ease-in-out infinite!important}
/* Review: magnify the diff, investigate, slam the approval stamp. */
.review-glass{animation:scan-diff 4s ease-in-out infinite}.review-stamp,.approve-mark{opacity:0}[data-phase="2"] .review-glass{display:none}[data-phase="2"] .review-stamp{opacity:1;transform-origin:306px 250px;animation:stamp-it 2.5s ease-in-out infinite}[data-phase="2"] .approve-mark{opacity:1;transform-origin:305px 287px;transform:rotate(-9deg)}
.task-scene[data-activity="3"][data-phase="2"] .person{animation:work-strike 2.5s ease-in-out infinite!important}
/* Debugging: chase, swing a net, quarantine the captured bug. */
.escaping-bug{animation:bug-run 3s ease-in-out infinite}.work-net{transform-origin:212px 255px;animation:net-swing 3s ease-in-out infinite}.bug-jar{opacity:0}
.task-scene[data-activity="4"] .person{animation:work-chase 3s ease-in-out infinite!important}[data-phase="1"] .escaping-bug{animation:bug-trap 3s ease-in-out infinite}[data-phase="1"] .work-net{animation:net-catch 3s ease-in-out infinite}
[data-phase="2"] .escaping-bug,[data-phase="2"] .work-net{display:none}[data-phase="2"] .bug-jar{opacity:1}.task-scene[data-activity="4"][data-phase="2"] .person{animation:work-victory 2s ease-in-out infinite!important}
/* Refactor: comb the spaghetti into three tidy modules. */
.legacy-tangle{transform-origin:300px 250px;animation:tangle-wiggle 2s ease-in-out infinite}.clean-modules{opacity:0}.work-comb{animation:comb-code 3s ease-in-out infinite}[data-phase="1"] .legacy-tangle{opacity:.5}[data-phase="2"] .legacy-tangle,[data-phase="2"] .work-comb{display:none}[data-phase="2"] .clean-modules{opacity:1}
.task-scene[data-activity="5"] .person{animation:work-comb-body 3s ease-in-out infinite!important}
/* Tests: a falling red tower, comic repairs, a stable green suite. */
.test-block rect{fill:#efc1bd;transition:fill 1s}.test-cross{stroke:#b95b59;stroke-width:5}.test-check{opacity:0}.test-block{transform-box:fill-box;transform-origin:bottom center;animation:broken-test 2s ease-in-out infinite}.test-two{animation-delay:-.5s}.test-three{animation-delay:-1s}.work-hammer{transform-origin:226px 243px;animation:hammer-ready 3s ease-in-out infinite}.impact-star{opacity:0}
[data-phase="1"] .work-hammer{animation:hammer-hit 1.6s ease-in-out infinite}[data-phase="1"] .impact-star{animation:impact 1.6s ease-in-out infinite}.task-scene[data-activity="6"][data-phase="1"] .person{animation:work-strike 1.6s ease-in-out infinite!important}
[data-phase="2"] .test-block{animation:none}[data-phase="2"] .test-block rect{fill:#c6e3cb}[data-phase="2"] .test-cross,[data-phase="2"] .work-hammer{display:none}[data-phase="2"] .test-check{opacity:1}.task-scene[data-activity="6"][data-phase="2"] .person{animation:work-victory 2s ease-in-out infinite!important}
/* Agents: unruly bots become an orchestra under the conductor's baton. */
.bot{animation:rogue-bot 2.3s ease-in-out infinite;animation-delay:calc(var(--i)*-.6s)}.conductor-baton{transform-origin:199px 243px;animation:conduct 2s ease-in-out infinite}.task-scene[data-activity="7"] .person{animation:work-conduct 2s ease-in-out infinite!important}[data-phase="1"] .bot{animation:ordered-bot 2s ease-in-out infinite;animation-delay:calc(var(--i)*-.3s)}[data-phase="2"] .bot{animation:ordered-bot 2s ease-in-out infinite;animation-delay:0}
/* Focus: swat notifications away, then levitate with tea. */
.ping{animation:ping-jump 1.2s ease-in-out infinite}.ping-b{animation-delay:-.4s}.ping-c{animation-delay:-.8s}.focus-aura,.focus-moon,.focus-cup{opacity:0}[data-phase="1"] .noise-pings,[data-phase="2"] .noise-pings{opacity:0;transform:translateY(-70px);transition:1.5s}[data-phase="1"] .focus-aura,[data-phase="2"] .focus-aura{opacity:.7;transform-origin:205px 238px;animation:zen-ring 6s ease-in-out infinite}[data-phase="2"] .focus-moon,[data-phase="2"] .focus-cup{opacity:1}.task-scene[data-activity="8"][data-phase="0"] .person{animation:work-shoo 1.2s ease-in-out infinite!important}.task-scene[data-activity="8"][data-phase="1"] .person,.task-scene[data-activity="8"][data-phase="2"] .person{animation:work-float 6s ease-in-out infinite!important}
@keyframes work-think{50%{transform:rotate(-4deg)}}@keyframes work-type{50%{transform:translateY(3px) rotate(2deg)}}@keyframes work-victory{50%{transform:translateY(-13px) rotate(-8deg)}}@keyframes work-present{50%{transform:rotate(5deg) translateX(9px)}}@keyframes work-strike{0%,100%{transform:rotate(-7deg)}45%{transform:rotate(8deg) translate(8px,6px)}}@keyframes work-chase{25%{transform:translate(-18px,-6px) rotate(-6deg)}75%{transform:translate(30px,-4px) rotate(8deg)}}@keyframes work-comb-body{50%{transform:translate(10px,9px) rotate(6deg)}}@keyframes work-conduct{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}@keyframes work-shoo{50%{transform:rotate(8deg) translateX(10px)}}@keyframes work-float{50%{transform:translateY(-17px)}}
@keyframes code-write{0%{stroke-dashoffset:150}80%,100%{stroke-dashoffset:0}}@keyframes work-spark{50%{opacity:.2}}@keyframes box-wobble{50%{transform:translate(4px,-6px) rotate(5deg)}}@keyframes point-board{50%{transform:rotate(28deg)}}@keyframes scan-diff{50%{transform:translate(32px,42px)}}@keyframes stamp-it{0%,100%{transform:translateY(-28px) rotate(-15deg)}45%,65%{transform:translateY(25px) rotate(0)}}@keyframes bug-run{0%,100%{transform:translate(-15px,0)}25%{transform:translate(28px,-32px) rotate(7deg)}70%{transform:translate(-40px,12px)}}@keyframes net-swing{50%{transform:rotate(32deg)}}@keyframes net-catch{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(70deg)}}@keyframes bug-trap{50%{transform:translate(14px,-16px) scale(.8)}}@keyframes tangle-wiggle{50%{transform:rotate(5deg) scale(.94)}}@keyframes comb-code{50%{transform:translate(20px,80px)}}@keyframes broken-test{50%{transform:rotate(13deg) translateY(8px)}}@keyframes hammer-ready{50%{transform:rotate(-20deg)}}@keyframes hammer-hit{0%,100%{transform:rotate(-35deg)}40%,55%{transform:rotate(35deg)}}@keyframes impact{0%,30%,70%,100%{opacity:0}40%,55%{opacity:1}}@keyframes rogue-bot{25%{transform:translate(-24px,21px) rotate(-6deg)}75%{transform:translate(17px,-24px) rotate(5deg)}}@keyframes ordered-bot{50%{transform:translateY(-9px)}}@keyframes conduct{25%{transform:rotate(-22deg)}75%{transform:rotate(25deg)}}@keyframes ping-jump{50%{transform:translateY(-10px)}}@keyframes zen-ring{50%{transform:scale(1.08);opacity:.25}}
@media(max-width:500px){.task-scene #character{height:275px}.task-scene{height:350px}.task-scene .bubble{font-size:11px}}
@media(prefers-reduced-motion:reduce){.task-scene .person,#taskStage *{animation:none!important;transition:none!important}}