/* Rara Pixel Office v0.9 — single-body sit / stand / tiny walk motion */
/* Fixed office artwork: background never moves. */
.v3-art-stage,.v3-art-stage.v7-tilting{perspective:none!important;transform:none!important;transform-style:flat!important;box-shadow:none!important}
.v3-art-image,.v3-art-stage.v7-tilting .v3-art-image{transform:none!important;transition:none!important}
.v7-motion-root,.v7-motion-toggle{display:none!important}

/* Real transparent staff sprites. */
.v8-staff-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.v8-person{--walkDur:10s;--delay:0s;--seatBg:rgba(253,220,232,.92);position:absolute;width:6.8%;aspect-ratio:1;transform:translateX(-50%);border:0;background:transparent;padding:0;pointer-events:auto;cursor:pointer;z-index:2;filter:drop-shadow(0 3px 3px rgba(130,66,95,.16));outline:none}
.v8-person[data-v8-id='planner'],.v8-person[data-v8-id='planning_support']{--seatBg:rgba(252,216,229,.93)}
.v8-person[data-v8-id='design'],.v8-person[data-v8-id='design_support']{--seatBg:rgba(250,213,227,.93)}
.v8-person[data-v8-id='dev'],.v8-person[data-v8-id='dev_support']{--seatBg:rgba(248,216,229,.93)}
.v8-person[data-v8-id='marketing'],.v8-person[data-v8-id='content_support'],.v8-person[data-v8-id='secretary']{--seatBg:rgba(251,218,224,.93)}

/* IMPORTANT: while the real sprite is standing, cover the seated figure painted into the background.
   This prevents the old 'two bodies / astral projection' effect. */
.v8-person::before{content:'';position:absolute;left:14%;top:11%;width:72%;height:78%;border-radius:44% 44% 28% 28%;background:var(--seatBg);backdrop-filter:blur(5px) saturate(.82);-webkit-backdrop-filter:blur(5px) saturate(.82);box-shadow:inset 0 -10px 0 rgba(105,78,102,.10);opacity:0;z-index:0;pointer-events:none;animation:v9SeatCover var(--walkDur) steps(1,end) infinite;animation-delay:var(--delay)}
.v8-person::after{content:'';position:absolute;left:25%;right:25%;bottom:5%;height:7%;border-radius:50%;background:rgba(87,53,71,.18);filter:blur(2px);opacity:0;z-index:0;animation:v9Shadow var(--walkDur) steps(2,end) infinite;animation-delay:var(--delay)}
.v8-sprite{position:absolute;inset:0;z-index:1;background-image:url('rpo-staff-sheet.webp?v=23');background-repeat:no-repeat;background-size:300% 300%;opacity:0;transform-origin:50% 94%;will-change:transform,opacity;animation:v9TinyWalk var(--walkDur) steps(2,end) infinite;animation-delay:var(--delay);image-rendering:auto}

/* Actual sheet order: toto, nana, lili / sasha, momo, dodo / loro, mimi, coco */
.v8-person[data-sprite='toto'] .v8-sprite{background-position:0% 0%}
.v8-person[data-sprite='nana'] .v8-sprite{background-position:50% 0%}
.v8-person[data-sprite='lili'] .v8-sprite{background-position:100% 0%}
.v8-person[data-sprite='sasha'] .v8-sprite{background-position:0% 50%}
.v8-person[data-sprite='momo'] .v8-sprite{background-position:50% 50%}
.v8-person[data-sprite='dodo'] .v8-sprite{background-position:100% 50%}
.v8-person[data-sprite='loro'] .v8-sprite{background-position:0% 100%}
.v8-person[data-sprite='mimi'] .v8-sprite{background-position:50% 100%}
.v8-person[data-sprite='coco'] .v8-sprite{background-position:100% 100%}
.v8-fallback{display:none;position:absolute;inset:25%;align-items:center;justify-content:center;border-radius:50%;background:#fff2f8;border:1px solid #ef9abd;color:#b54e7d;font-weight:900;font-size:10px;box-shadow:0 3px 8px rgba(125,65,92,.15);z-index:2}
.v8-sheet-missing .v8-sprite{display:none}.v8-sheet-missing .v8-fallback{display:flex}

/* Sit in the painted chair -> stand -> take 1–2 tiny steps -> return -> sit.
   No vertical floating and no body scaling. */
@keyframes v9TinyWalk{
  0%,52%{opacity:0;transform:translate(0,4px)}
  53%{opacity:1;transform:translate(0,4px)}
  57%{opacity:1;transform:translate(0,-3px)}
  63%{opacity:1;transform:translate(-6px,-3px)}
  68%{opacity:1;transform:translate(-10px,-3px)}
  73%{opacity:1;transform:translate(-4px,-3px)}
  78%{opacity:1;transform:translate(4px,-3px)}
  83%{opacity:1;transform:translate(9px,-3px)}
  87%{opacity:1;transform:translate(0,-3px)}
  88%{opacity:1;transform:translate(0,3px)}
  89%,100%{opacity:0;transform:translate(0,4px)}
}
@keyframes v9SeatCover{0%,52%,89%,100%{opacity:0}53%,88%{opacity:1}}
@keyframes v9Shadow{0%,52%,89%,100%{opacity:0;transform:translateX(0) scale(.8)}57%{opacity:.55;transform:translateX(0) scale(.92)}68%{opacity:.62;transform:translateX(-6px) scale(.96)}78%{opacity:.58;transform:translateX(3px) scale(.94)}83%{opacity:.62;transform:translateX(6px) scale(.96)}88%{opacity:.45;transform:translateX(0) scale(.88)}}

/* Busy staff gets up more often; review staff has a soft glow, but movement stays the same. */
.v8-person.working{--walkDur:7.4s}
.v8-person.review{--walkDur:6.6s}
.v8-person.review .v8-sprite{filter:drop-shadow(0 0 7px rgba(255,201,93,.55))}
.v8-person.done{--walkDur:8.2s}

.v8-person:focus-visible,.v8-person:hover{filter:drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 5px 6px rgba(170,76,119,.3))}
.v8-person:hover::before{animation-play-state:paused;opacity:1!important}
.v8-person:hover .v8-sprite{animation-play-state:paused;opacity:1;transform:translate(0,-3px)}
.v8-person:hover::after{animation-play-state:paused;opacity:.58!important;transform:scale(.94)!important}
/* Names are now fixed desk/chair labels from v10-seat-labels, never attached to the moving body. */
.v8-name{display:none!important}

/* Complete employee list/detail overlay. */
.v8-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.v8-staff-card{border:1px solid #f1b2cf;background:linear-gradient(180deg,#fffafd,#fff3f8);border-radius:18px;padding:12px;text-align:left;color:#5d3447;cursor:pointer;box-shadow:0 6px 16px rgba(139,68,101,.07);transition:.15s}
.v8-staff-card:hover{transform:translateY(-2px);border-color:#e67dab;box-shadow:0 9px 20px rgba(139,68,101,.12)}
.v8-card-top{display:flex;gap:10px;align-items:center}
.v8-mini-avatar,.v8-detail-avatar{background-image:url('rpo-staff-sheet.webp?v=23');background-repeat:no-repeat;background-size:300% 300%;flex:0 0 auto;background-color:#ffeaf3;border:1px solid #f0b4cf}
.v8-mini-avatar{width:58px;height:58px;border-radius:15px}.v8-detail-avatar{width:150px;height:150px;border-radius:24px;box-shadow:0 8px 20px rgba(147,69,106,.12)}
[data-v8-avatar='toto']{background-position:0% 0%}[data-v8-avatar='nana']{background-position:50% 0%}[data-v8-avatar='lili']{background-position:100% 0%}[data-v8-avatar='sasha']{background-position:0% 50%}[data-v8-avatar='momo']{background-position:50% 50%}[data-v8-avatar='dodo']{background-position:100% 50%}[data-v8-avatar='loro']{background-position:0% 100%}[data-v8-avatar='mimi']{background-position:50% 100%}[data-v8-avatar='coco']{background-position:100% 100%}
.v8-staff-card h3{margin:0 0 3px;font-size:16px;color:#8e3f66}.v8-staff-card p{margin:2px 0;font-size:11px;color:#8d6b79}
.v8-status-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:10px}.v8-status-pill{border-radius:999px;padding:3px 7px;background:#f8e8f1;color:#9c5072;font-weight:800}
.v8-detail{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start}.v8-detail-main h2{margin:0;color:#8c3f64}.v8-detail-main>p{margin:5px 0 12px;color:#8a6877}
.v8-detail-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.v8-detail-kpi{background:#fff7fb;border:1px solid #f0bfd4;border-radius:13px;padding:9px;text-align:center;font-size:10px;color:#8f6075}.v8-detail-kpi b{display:block;font-size:14px;color:#9b476d;margin-bottom:2px}
.v8-detail-section{margin-top:12px;border-top:1px dashed #ecc0d4;padding-top:11px}.v8-detail-section h4{margin:0 0 8px;color:#7d3a59}.v8-current-task{padding:9px 10px;border-radius:12px;background:#fff5fa;border:1px solid #f1c4d7;margin-bottom:6px;font-size:11px}.v8-current-task b{color:#8c4263}.v8-empty{font-size:11px;color:#a47d8e;padding:8px 0}
.v8-quick-actions{display:flex;flex-wrap:wrap;gap:6px}.v8-quick-actions button{border:1px solid #ecabc8;background:#fff7fb;color:#9b4b70;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;cursor:pointer}.v8-detail-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.v8-back{border:0;background:transparent;color:#9a5273;font-weight:900;cursor:pointer;padding:5px 0;margin-bottom:8px}
.v8-provider-select{border:1px solid #eeb6cf;background:#fff9fc;color:#8d4668;border-radius:10px;padding:6px 9px;font-size:11px;font-weight:800}

@media(max-width:900px){.v8-person{width:8.2%}.v8-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v8-detail{grid-template-columns:1fr}.v8-detail-avatar{width:110px;height:110px}.v8-detail-kpis{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.v8-sprite,.v8-person::before,.v8-person::after{animation:none!important}.v8-sprite,.v8-person::before{opacity:0!important}}