/* Segmented movement uses existing artwork; gestures do not report real calls. */
.office-person{--art:url('/office-men-v37.png');--sheet:300% 200%;--row:0%;--pace:1s}
[data-role="documents"]{--pace:1.15s}[data-role="chief"]{--pace:1.35s}[data-role="fleet"]{--pace:.9s}
.office-person .person-art{background:none;animation:none!important;transform:rotate(var(--facing,0deg));transition:transform .24s ease}
.office-person[data-pose="walk"],.office-person[data-pose="break"]{--row:100%}
.office-person[data-gesture="read"],.office-person[data-gesture="annotate"]{--art:url('/office-actions-v37.png');--sheet:300% 400%;--row:0%}
.office-person[data-gesture="coffee"]{--art:url('/office-actions-v37.png');--sheet:300% 400%;--row:33.333333%}
.office-person[data-gesture="phone"]{--art:url('/office-actions-v37.png');--sheet:300% 400%;--row:66.666667%}
.office-person[data-gesture="stretch"]{--art:url('/office-actions-v37.png');--sheet:300% 400%;--row:100%}
.person-part{position:absolute;inset:0;background-image:var(--art);background-size:var(--sheet);background-position:var(--column) var(--row);background-repeat:no-repeat;pointer-events:none;backface-visibility:hidden}
/* Four non-overlapping slices ensure moving parts don't leave ghost limbs. */
.part-upper{clip-path:polygon(0 0,100% 0,100% 38%,0 38%);transform-origin:50% 38%;animation:upper-rest 5s ease-in-out infinite}
.part-body{clip-path:polygon(0 38%,100% 38%,100% 68%,0 68%)}
.part-left{clip-path:polygon(0 68%,50% 68%,50% 100%,0 100%);transform-origin:43% 68%}
.part-right{clip-path:polygon(50% 68%,100% 68%,100% 100%,50% 100%);transform-origin:57% 68%}
.office-person[data-pose="walk"] .part-upper{animation:walk-upper .7s ease-in-out infinite}
.office-person[data-pose="walk"] .part-left{animation:walk-leg .7s ease-in-out infinite}
.office-person[data-pose="walk"] .part-right{animation:walk-leg .7s ease-in-out -.35s infinite}
.office-person[data-pose="walk"] .part-body{animation:walk-hip .7s ease-in-out infinite}
.office-person[data-gesture="type"] .part-upper{animation:typing-hands var(--pace) ease-in-out infinite}
.office-person[data-gesture="mouse"] .part-upper{animation:mouse-reach 3s ease-in-out infinite}
.office-person[data-gesture="read"] .part-upper{animation:turn-page 4.4s ease-in-out infinite}
.office-person[data-gesture="annotate"] .part-upper{animation:paper-note 1.7s ease-in-out infinite}
.office-person[data-gesture="coffee"] .part-upper{animation:coffee-sip 5s ease-in-out infinite}
.office-person[data-gesture="phone"] .part-upper{animation:phone-nod 4s ease-in-out infinite}
.office-person[data-gesture="stretch"] .part-upper{animation:stretch-arms 5s ease-in-out infinite}
.office-person[data-gesture="stretch"] .part-body{animation:stretch-back 5s ease-in-out infinite}
.office-person[data-gesture="think"] .part-upper,.office-person[data-gesture="look"] .part-upper{animation:look-around 7s ease-in-out infinite}
.office-person[data-gesture="settle"] .part-body{animation:chair-settle 4s ease-in-out infinite}
.office-person[data-gesture="notice"] .part-upper{animation:notice-message 1.5s ease-in-out 1}
.office-person[data-gesture="sleep"] .part-upper{animation:sleep-breathe 7s ease-in-out infinite}
.office-person[data-mode="offline"] .person-part{animation:none!important}
@keyframes upper-rest{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6px)}}
@keyframes typing-hands{0%,100%{transform:rotate(0)}20%{transform:rotate(-1.2deg) translateY(-.7px)}45%{transform:rotate(.9deg) translateY(.3px)}65%{transform:rotate(-.8deg)}85%{transform:rotate(.6deg) translateY(-.5px)}}
@keyframes mouse-reach{0%,100%{transform:rotate(0)}30%,65%{transform:rotate(3deg) translateX(1px)}}
@keyframes turn-page{0%,18%,100%{transform:rotate(0)}38%{transform:rotate(-4deg) translate(-1px,-1px)}55%{transform:rotate(2deg)}75%{transform:rotate(0)}}
@keyframes paper-note{0%,100%{transform:rotate(-1deg)}30%{transform:rotate(1.5deg) translateY(-.5px)}70%{transform:rotate(-.5deg)}}
@keyframes coffee-sip{0%,18%,100%{transform:rotate(0)}38%,58%{transform:rotate(-3deg) translateY(2px)}75%{transform:rotate(1deg)}}
@keyframes phone-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(2.5deg)}50%{transform:rotate(1deg) translateY(1px)}70%{transform:rotate(2deg)}}
@keyframes stretch-arms{0%,100%{transform:scaleY(1)}40%,65%{transform:scaleY(1.065) rotate(-2deg)}80%{transform:rotate(1deg)}}
@keyframes stretch-back{0%,100%{transform:translateY(0)}45%,65%{transform:translateY(1px)}}
@keyframes look-around{0%,25%,100%{transform:rotate(0)}40%,55%{transform:rotate(-5deg)}75%,85%{transform:rotate(4deg)}}
@keyframes chair-settle{0%,100%{transform:translateX(0)}35%{transform:translateX(-1px)}70%{transform:translateX(1px)}}
@keyframes notice-message{0%,100%{transform:rotate(0)}35%{transform:rotate(6deg) translateY(-1px)}65%{transform:rotate(2deg)}}
@keyframes sleep-breathe{0%,100%{transform:rotate(3deg) translateY(1px)}50%{transform:rotate(3deg) translateY(2px)}}
@keyframes walk-leg{0%,100%{transform:rotate(-4deg) translateY(1px)}50%{transform:rotate(4deg) translateY(-3px)}}
@keyframes walk-upper{0%,100%{transform:rotate(-1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-1px)}}
@keyframes walk-hip{0%,100%{transform:rotate(.7deg)}50%{transform:rotate(-.7deg)}}
.paused .person-art,.page-hidden .person-art{transition:none}
@media(prefers-reduced-motion:reduce){.person-part{animation:none!important}.person-art{transition:none!important}}