/* The room's quiet life and its changes of position (F1, Chris's list of 17 Oct, evening): what
   life.js and walkers.js mark on a desk or a walker, drawn here. Every turn is about a joint of the
   figure (heroes.js pivot and leanGroup, attributes.js held): o-body at the hip, o-head at the
   neck's foot (1, 8.2 in the head's own frame; its centre for a look round), o-hand-near and
   o-hand-far at the wrist, o-turn at his grip on his thing. Nothing here moves for a viewer who
   asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Working: bursts of typing, a look up at the screen, leaning back to think. */
  .life-type .o-hand-near { animation: life-tap 0.42s ease-in-out infinite; }
  .life-type .o-hand-far { animation: life-tap 0.42s ease-in-out -0.21s infinite; }
  .life-glance .o-head, .life-up .o-head { transform-origin: 1px 8.2px; animation: life-look-up 2.6s ease-in-out both; }
  .life-think .o-body { animation: life-lean-back 4.6s ease-in-out both; }
  .life-think .o-head { transform-origin: 1px 8.2px; animation: life-chin-up 4.6s ease-in-out both; }
  /* Stuck: a slump with a sigh; his hand rubbing his head. */
  .life-sigh .o-body { animation: life-slump 3.2s ease-in-out both; }
  .life-rub .o-hand-near { animation: life-rub 0.8s ease-in-out 3 both; }
  /* Waiting on you: a look round to the door; fingers drumming on the desk. */
  .life-door .o-head { animation: life-look-round 3s ease-in-out both; }
  .life-drum .o-hand-far { animation: life-tap 0.2s ease-in-out infinite; }
  /* Done: his thing turned in his hand; leaning back. */
  .life-turn .o-turn { animation: life-turn 4.4s ease-in-out both; }
  .life-content .o-body { animation: life-lean-back 4.2s ease-in-out both; }
  /* Between runs: reading along the lines, looking up, a stretch. On a call: nodding along. The big
     moves (reaching up, a sip, talking with his hands, hands behind his head) go through his joints
     (life.js playPose), not here. */
  .life-read .o-head { transform-origin: 1px 8.2px; animation: life-read 3.6s ease-in-out both; }
  .life-stretch .o-body { animation: life-stretch 4.2s ease-in-out both; }
  .life-stretch .o-head { transform-origin: 1px 8.2px; animation: life-chin-up 4.2s ease-in-out both; }
  .life-nod .o-head { transform-origin: 1px 8.2px; animation: life-nod 2.4s ease-in-out both; }
  /* Wondering (round 7, part H): he sits back, chin up, a thought over his head (life.js thought). */
  .life-wonder .o-body { animation: life-lean-back 5.2s ease-in-out both; }
  .life-wonder .o-head { transform-origin: 1px 8.2px; animation: life-chin-up 5.2s ease-in-out both; }
  .thought { animation: thought-in 5.2s ease-in-out both; }
  .thought i { animation: t-dot 1.2s ease-in-out infinite; }
  .thought i:nth-child(2) { animation-delay: 0.2s; }
  .thought i:nth-child(3) { animation-delay: 0.4s; }
  /* Asleep: only his breathing, slower. */
  .st-late .pose-asleep .o-torso, .st-failed .pose-asleep .o-torso { animation-duration: 5.6s; }

  /* Getting up (walkers.js rise): at his desk he leans forward and pushes his chair back (pushing);
     then, as he rises, his seated figure gives way to the standing one (leaving, rising). Sitting
     down (settle), the same in reverse: the standing figure gives way to the seated one, leaning
     forward in the pushed-back chair (sitting, nearing), which he then draws in (seating). The
     standing figure grows from his feet (97% of its box) as he rises. */
  .desk-unit.pushing .o-person { animation: life-push 0.45s ease-in-out both; }
  .desk-unit.pushing .o-body { animation: life-rise-lean 0.45s ease-in both; }
  .desk-unit.leaving .o-person, .desk-unit.nearing .o-person { display: inline; transform: translateX(5px); }
  .desk-unit.leaving .o-person { animation: life-fade-out 0.32s ease-in both; }
  .desk-unit.nearing .o-person { animation: life-fade-in 0.38s ease-out both; }
  .desk-unit.nearing .o-body { transform: rotate(-14deg); }
  .desk-unit.seating .o-person { animation: life-draw-in 0.52s ease-out both; }
  .desk-unit.seating .o-body { animation: life-sit-back 0.52s ease-out both; }
  .walker.rising svg { transform-origin: 50% 97%; animation: life-stand-up 0.42s ease-out both; }
  .walker.sitting svg { transform-origin: 50% 97%; animation: life-sit-down 0.38s ease-in both; }
  /* While he is out, his chair stays pushed back from the desk. */
  .is-out .o-chair-out { transform: translateX(5px); }
}
/* Chris, 18 Oct: far enough to see from across the room. */
@keyframes life-tap { 0%, 100% { transform: none; } 50% { transform: rotate(18deg); } }
@keyframes life-look-up { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(12deg); } }
@keyframes life-chin-up { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(14deg); } }
@keyframes life-lean-back { 0%, 100% { transform: none; } 25%, 78% { transform: rotate(10deg); } }
@keyframes life-slump { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-9deg); } }
@keyframes life-rub { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 75% { transform: rotate(12deg); } }
@keyframes life-look-round { 0%, 100% { transform: none; } 12%, 82% { transform: scaleX(-1); } }
@keyframes life-turn { 0%, 100% { transform: none; } 30% { transform: rotate(-24deg); } 66% { transform: rotate(18deg); } }
@keyframes life-read { 0%, 45%, 85%, 100% { transform: none; } 20%, 65% { transform: rotate(-6deg); } }
@keyframes life-stretch { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(14deg); } }
@keyframes life-nod { 0%, 40%, 80%, 100% { transform: none; } 20%, 60% { transform: rotate(-10deg); } }
@keyframes life-push { from { transform: none; } to { transform: translateX(5px); } }
@keyframes life-rise-lean { from { transform: none; } to { transform: rotate(-14deg); } }
@keyframes life-draw-in { from { transform: translateX(5px); } to { transform: none; } }
@keyframes life-sit-back { from { transform: rotate(-14deg); } to { transform: none; } }
@keyframes life-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes life-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes life-stand-up { from { opacity: 0; transform: scaleY(0.9); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes life-sit-down { from { opacity: 1; transform: none; } 45% { opacity: 1; } to { opacity: 0; transform: scaleY(0.9); } }

/* A thought over a wondering head (round 7, part H): a small cloud, two puffs trailing down to him. */
.desk-unit.life-wonder { position: relative; }
.thought {
  position: absolute; z-index: 2; width: 30px; height: 18px; margin-top: -4px; display: flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: 10px; background: #fbf7ef; border: 1px solid rgba(43, 27, 18, 0.45); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.thought::before, .thought::after { content: ''; position: absolute; border-radius: 50%; background: #fbf7ef; border: 1px solid rgba(43, 27, 18, 0.45); }
.thought::before { width: 7px; height: 7px; left: 1px; bottom: -8px; }
.thought::after { width: 4px; height: 4px; left: -4px; bottom: -13px; }
.thought i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #2b1b12; opacity: 0.35; }
@keyframes thought-in { 0%, 100% { opacity: 0; transform: translateY(4px); } 14%, 86% { opacity: 1; transform: none; } }