/* The room's movement (round 4, stage 8): the heroes and Laelaps on their feet (standing.js), moved
   through the building by walkers.js only when real data moved. Legs swing about the hip and bend
   at the knee, arms swing against them; a long garment shortens the step. Nothing here moves for
   a viewer who asks for less motion: the walkers are then placed, never walked. */
/* No stacking of its own (Chris, 18 Oct, late: "crew walking over desks"): each walker is stacked
   by his feet among the desks and furniture (walkers.js put, depth), what is said over the room
   above them all, and the stairs below. */
.walkway { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.walkway > .talk { z-index: 100000; }
.wing > svg.stairs { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.stairs .flight { fill: #4a3324; stroke: #24180f; stroke-width: 0.8px; }
.stairs .treads { fill: none; stroke: #8b6a48; stroke-width: 1.4px; stroke-linejoin: round; }
.stairs .rail { fill: none; stroke: #2b1d13; stroke-width: 1.6px; stroke-linecap: round; }
.walker {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  min-height: 0; pointer-events: auto; cursor: pointer; border-radius: 10px; will-change: transform;
}
.walker svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.walker:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.walker.fading { opacity: 0; }
.walker.gone { visibility: hidden; pointer-events: none; }

/* While his hero is out of the room, the desk keeps an empty chair; Laelaps's cushion waits empty. */
.o-chair-out { display: none; }
.is-out .o-chair-out { display: inline; }
.is-out .o-person, .is-out .o-dog { display: none; }

/* A wordless bubble: the dots of someone talking, or the mark of how his run went. */
.talk {
  position: absolute; left: 0; top: 0; width: 34px; height: 22px; pointer-events: none; opacity: 0;
  background: #fbf7ef; border: 1px solid rgba(43, 27, 18, 0.45); border-radius: 11px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.talk::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: #fbf7ef;
}
.talk.on { opacity: 1; }
.talk svg { display: block; width: 100%; height: 100%; }
.talk .t-dot { fill: #2b1b12; }
.talk .t-mark { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.talk .t-mark.ok { stroke: #2f8a55; } .talk .t-mark.warn { stroke: #c98a1a; } .talk .t-mark.stop { stroke: #b8432f; }
.talk .t-mark-dot { fill: #c98a1a; }
.talk .t-mark.letter { stroke: #8a5a2b; stroke-width: 1.8; }
.talk.caption { width: auto; height: auto; max-width: 220px; padding: 5px 9px; font-size: 12.5px; line-height: 1.3; color: #2b1b12; white-space: normal; }
/* A line of the crew's own talk (round 7, part H): a little wider, in their words. */
.talk.caption.line { max-width: 240px; font-size: 13px; z-index: 1; }
.talk.caption.line::after { left: var(--tail, 50%); }
/* Homer in his own Greek (crew-talks.js), in a face with its accents, its meaning small under it. */
.talk.caption.line.epic { max-width: 260px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", "Times New Roman", serif; font-size: 14px; }
.talk.caption.line .gloss { display: block; margin-top: 3px; font-family: var(--font); font-size: 11.5px; font-style: italic; opacity: 0.8; }

/* The lift: its car behind the doors, the doors drawing back, the floor's number lit while the car
   is there or passing. */
.o-lift-car { fill: #0b0c0e; }
.o-lift-art .o-lift-door { transform-box: fill-box; }
.o-lift-art .o-lift-door.l { transform-origin: 0 50%; }
.o-lift-art .o-lift-door.r { transform-origin: 100% 50%; }
.o-lift-art.open .o-lift-door { transform: scaleX(0.12); }
.o-lift-art.here .o-lift-n { fill: #fff8dc; }
.o-lift-art.here .o-lift-sign { stroke: #f2c94c; }

/* Standing still, his weight a little apart on both feet. */
.st-stand .st-thigh.near, .st-talk .st-thigh.near { transform: rotate(4deg); }
.st-stand .st-thigh.far, .st-talk .st-thigh.far { transform: rotate(-3deg); }

@media (prefers-reduced-motion: no-preference) {
  .walker { transition: opacity 0.35s ease; }
  .talk { transition: opacity 0.2s ease; }
  .talk .t-dot { animation: t-dot 1.2s ease-in-out infinite; }
  .talk .t-dot:nth-child(2) { animation-delay: 0.2s; }
  .talk .t-dot:nth-child(3) { animation-delay: 0.4s; }
  .o-lift-art .o-lift-door { transition: transform 0.5s ease; }

  /* One stride (two steps) takes --stride: a robe to the shins, or a chiton to the ankles, takes
     shorter, quicker ones. A walker who hurries sets --cadence on his button (walkers.js cadence):
     his stride keeps time with his pace, so he never skates. The far leg and arm are always half a
     stride behind the near ones, whatever the stride (round 7: a fixed delay equal to a quickened
     stride had put both legs in step, "both of them stuck together"). */
  .st-walk, .st-run { --stride: 1s; }
  .gait-robe.st-walk { --stride: 0.9s; }
  .gait-long.st-walk { --stride: 0.8s; }
  .st-run { --stride: 0.62s; }
  .st-walk .st-thigh, .st-walk .st-shin, .st-walk .st-arm, .st-walk .st-bob,
  .st-run .st-thigh, .st-run .st-shin, .st-run .st-arm, .st-run .st-bob {
    animation-duration: var(--cadence, var(--stride)); animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  }
  .st-walk .st-thigh { animation-name: st-thigh; }
  .st-walk .st-shin { animation-name: st-shin; animation-timing-function: linear; }
  .st-walk .st-arm { animation-name: st-arm; }
  .st-walk .st-bob { animation-name: st-bob; }
  .st-walk .st-bob, .st-run .st-bob { animation-duration: calc(var(--cadence, var(--stride)) / 2); }
  .st-walk .far, .st-run .far { animation-delay: calc(var(--cadence, var(--stride)) / -2); }
  .gait-robe.st-walk .st-thigh { animation-name: st-thigh-robe; }
  .gait-robe.st-walk .st-shin { animation-name: st-shin-robe; }
  .gait-robe.st-walk .st-arm { animation-name: st-arm-robe; }
  .gait-long.st-walk .st-thigh { animation-name: st-thigh-long; }
  .gait-long.st-walk .st-shin { animation-name: st-shin-long; }
  .gait-long.st-walk .st-arm { animation-name: st-arm-long; }
  /* A run (round 7: the visitor, and whoever hurries to open a door): the thigh drives well forward,
     the heel folds up behind, the bent arms pump against the legs, and he leans into it, in the air
     between steps. */
  .st-run .st-thigh { animation-name: st-thigh-run; }
  .st-run .st-shin { animation-name: st-shin-run; animation-timing-function: linear; }
  .st-run .st-arm { animation-name: st-arm-run; }
  .st-run .st-bob { animation-name: st-bob-run; }
  .st-talk .st-arm.gesture { animation: st-gesture 2.6s ease-in-out infinite; }

  /* A visitor's pet (round 7, part T; pets.js): its legs at a trot, the owl's wing lifting as it
     rides, a hop when tapped or greeted (the tortoise draws in instead). */
  .pt-walk .pt-leg { animation: hd-leg 0.36s ease-in-out infinite; }
  .pt-walk .pt-leg.fore.far, .pt-walk .pt-leg.hind.near { animation-delay: -0.18s; }
  .pk-tortoise .pt-walk .pt-leg { animation-duration: 0.5s; }
  .pt-walk .pt-body { animation: st-bob 0.36s ease-in-out infinite; }
  /* Catching up (pets.js follow): a trot, the same legs at a quicker beat. */
  .walker.pet.trot .pt-walk .pt-leg, .walker.pet.trot .pt-walk .pt-body { animation-duration: 0.22s; }
  .walker.pet.trot .pt-walk .pt-leg.fore.far, .walker.pet.trot .pt-walk .pt-leg.hind.near { animation-delay: -0.11s; }
  .walker.pet.pk-tortoise.trot .pt-walk .pt-leg { animation-duration: 0.32s; }
  .pt-body.riding .pt-wing { animation: pt-flap 0.5s ease-in-out infinite alternate; }
  .walker.pet.trick svg { animation: pt-hop 0.4s ease-in-out 2; }
  .walker.pet.pk-tortoise.trick svg { animation: pt-tuck 1.2s ease-in-out 1; }
  /* Laelaps on the move (round 7, part C: Chris, "the dog's walk"): each leg swings from its top
     joint and folds below (the wrist, the hock) as its paw lifts. Walking, one paw at a time: near
     hind, near fore, far hind, far fore, a quarter of the stride apart. At a trot, the diagonal pairs
     together. His head nods and his tail swings in step. */
  .hd-walk { --hd-stride: 0.6s; }
  .hd-trot { --hd-stride: 0.5s; }
  .hd-walk .hd-leg { --hd-at: 0s; animation: hd-walk-up-fore var(--hd-stride) linear infinite; animation-delay: var(--hd-at); }
  .hd-walk .hd-leg.hind { animation-name: hd-walk-up-hind; }
  .hd-walk .hd-leg.fore.near { --hd-at: -0.45s; }
  .hd-walk .hd-leg.hind.far { --hd-at: -0.3s; }
  .hd-walk .hd-leg.fore.far { --hd-at: -0.15s; }
  .hd-walk .hd-leg.fore .hd-low { animation: hd-walk-fore var(--hd-stride) ease-in-out infinite; animation-delay: var(--hd-at); }
  .hd-walk .hd-leg.hind .hd-low { animation: hd-walk-hind var(--hd-stride) ease-in-out infinite; animation-delay: var(--hd-at); }
  .hd-walk .hd-bob { animation: st-bob 0.3s ease-in-out infinite; }
  .hd-trot .hd-leg { --hd-at: 0s; animation: hd-trot-up-fore var(--hd-stride) linear infinite; animation-delay: var(--hd-at); }
  .hd-trot .hd-leg.hind { animation-name: hd-trot-up-hind; }
  .hd-trot .hd-leg.fore.far, .hd-trot .hd-leg.hind.near { --hd-at: -0.25s; }
  .hd-trot .hd-leg.fore .hd-low { animation: hd-trot-fore var(--hd-stride) ease-in-out infinite; animation-delay: var(--hd-at); }
  .hd-trot .hd-leg.hind .hd-low { animation: hd-trot-hind var(--hd-stride) ease-in-out infinite; animation-delay: var(--hd-at); }
  .hd-trot .hd-bob { animation: st-bob 0.25s ease-in-out infinite; }
  .hd-head { transform-box: fill-box; transform-origin: 85% 85%; }
  .hd-walk .hd-head { animation: hd-nod 0.3s ease-in-out infinite; }
  .hd-trot .hd-head { animation: hd-nod 0.25s ease-in-out infinite; }
  .hd-tail { transform-box: fill-box; transform-origin: 0 0; animation: hd-swing var(--hd-stride) ease-in-out infinite; }
  .walker.facing .v-dog-front .v-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: pant 0.5s ease-in-out infinite alternate; }
}
@keyframes st-thigh { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes st-shin {
  0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-6deg); } 45% { transform: rotate(-3deg); }
  60% { transform: rotate(-32deg); } 75% { transform: rotate(-40deg); } 92% { transform: rotate(-8deg); }
}
@keyframes st-arm { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } }
@keyframes st-thigh-robe { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes st-shin-robe {
  0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-4deg); } 45% { transform: rotate(-2deg); }
  60% { transform: rotate(-18deg); } 75% { transform: rotate(-24deg); } 92% { transform: rotate(-5deg); }
}
@keyframes st-arm-robe { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(8deg); } }
@keyframes st-thigh-long { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes st-shin-long {
  0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-3deg); } 45% { transform: rotate(-2deg); }
  60% { transform: rotate(-14deg); } 75% { transform: rotate(-18deg); } 92% { transform: rotate(-4deg); }
}
@keyframes st-arm-long { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } }
@keyframes st-thigh-run { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-26deg); } }
@keyframes st-shin-run {
  0%, 100% { transform: rotate(-10deg); } 20% { transform: rotate(-26deg); } 45% { transform: rotate(-12deg); }
  62% { transform: rotate(-100deg); } 80% { transform: rotate(-62deg); } 92% { transform: rotate(-18deg); }
}
@keyframes st-arm-run { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(30deg); } }
@keyframes st-bob-run { 0%, 100% { transform: rotate(-6deg) translateY(1.3px); } 50% { transform: rotate(-6deg) translateY(-2.2px); } }
@keyframes st-bob { 0%, 100% { transform: translateY(0.5px); } 50% { transform: translateY(-0.7px); } }
@keyframes st-gesture { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-7deg); } 70% { transform: rotate(3deg); } }
@keyframes hd-leg { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
/* Laelaps's legs: the stance from forward to back at an even pace, the leg a little longer along
   its own line by what keeps the middle of its sole on one floor line (generated per gait and leg:
   a foreleg's sole sits further ahead of its line than a hind one's), so the paw stays where it landed; then the quick swing forward, lifted, with the joint below folded (a foreleg's paw tucks
   back, a hind paw comes forward under). */
@keyframes hd-walk-up-fore {
  0%, 100% { transform: rotate(20deg) translateY(1.58px); }
  7.75% { transform: rotate(15deg) translateY(1.01px); }
  15.5% { transform: rotate(10deg) translateY(0.57px); }
  23.25% { transform: rotate(5deg) translateY(0.26px); }
  31% { transform: rotate(0deg) translateY(0.08px); }
  38.75% { transform: rotate(-5deg) translateY(0px); }
  46.5% { transform: rotate(-10deg) translateY(0.04px); }
  54.25% { transform: rotate(-15deg) translateY(0.2px); }
  62% { transform: rotate(-20deg) translateY(0.49px); }
  72% { transform: rotate(-12deg) translateY(-1.6px); }
  84% { transform: rotate(4deg) translateY(-1.4px); }
  94% { transform: rotate(16deg) translateY(-0.4px); }
}
@keyframes hd-walk-up-hind {
  0%, 100% { transform: rotate(20deg) translateY(1.06px); }
  7.75% { transform: rotate(15deg) translateY(0.61px); }
  15.5% { transform: rotate(10deg) translateY(0.28px); }
  23.25% { transform: rotate(5deg) translateY(0.09px); }
  31% { transform: rotate(0deg) translateY(0px); }
  38.75% { transform: rotate(-5deg) translateY(0.03px); }
  46.5% { transform: rotate(-10deg) translateY(0.18px); }
  54.25% { transform: rotate(-15deg) translateY(0.44px); }
  62% { transform: rotate(-20deg) translateY(0.84px); }
  72% { transform: rotate(-12deg) translateY(-1.6px); }
  84% { transform: rotate(4deg) translateY(-1.4px); }
  94% { transform: rotate(16deg) translateY(-0.4px); }
}
@keyframes hd-trot-up-fore {
  0%, 100% { transform: rotate(24deg) translateY(2.16px); }
  6.25% { transform: rotate(18deg) translateY(1.33px); }
  12.5% { transform: rotate(12deg) translateY(0.73px); }
  18.75% { transform: rotate(6deg) translateY(0.32px); }
  25% { transform: rotate(0deg) translateY(0.08px); }
  31.25% { transform: rotate(-6deg) translateY(0px); }
  37.5% { transform: rotate(-12deg) translateY(0.09px); }
  43.75% { transform: rotate(-18deg) translateY(0.36px); }
  50% { transform: rotate(-24deg) translateY(0.82px); }
  60% { transform: rotate(-16deg) translateY(-2px); }
  78% { transform: rotate(6deg) translateY(-1.8px); }
  92% { transform: rotate(20deg) translateY(-0.4px); }
}
@keyframes hd-trot-up-hind {
  0%, 100% { transform: rotate(24deg) translateY(1.54px); }
  6.25% { transform: rotate(18deg) translateY(0.86px); }
  12.5% { transform: rotate(12deg) translateY(0.4px); }
  18.75% { transform: rotate(6deg) translateY(0.12px); }
  25% { transform: rotate(0deg) translateY(0px); }
  31.25% { transform: rotate(-6deg) translateY(0.05px); }
  37.5% { transform: rotate(-12deg) translateY(0.27px); }
  43.75% { transform: rotate(-18deg) translateY(0.67px); }
  50% { transform: rotate(-24deg) translateY(1.27px); }
  60% { transform: rotate(-16deg) translateY(-2px); }
  78% { transform: rotate(6deg) translateY(-1.8px); }
  92% { transform: rotate(20deg) translateY(-0.4px); }
}
}
@keyframes hd-walk-fore { 0%, 60%, 100% { transform: rotate(0deg); } 72% { transform: rotate(-55deg); } 86% { transform: rotate(-20deg); } 96% { transform: rotate(-4deg); } }
@keyframes hd-walk-hind { 0%, 60%, 100% { transform: rotate(0deg); } 72% { transform: rotate(35deg); } 86% { transform: rotate(12deg); } 96% { transform: rotate(3deg); } }
}
@keyframes hd-trot-fore { 0%, 48%, 100% { transform: rotate(0deg); } 62% { transform: rotate(-75deg); } 80% { transform: rotate(-30deg); } 94% { transform: rotate(-6deg); } }
@keyframes hd-trot-hind { 0%, 48%, 100% { transform: rotate(0deg); } 62% { transform: rotate(45deg); } 80% { transform: rotate(16deg); } 94% { transform: rotate(4deg); } }
@keyframes hd-nod { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-2.5deg) translateY(0.3px); } }
@keyframes hd-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes pt-flap { 0% { transform: rotate(0deg); } 100% { transform: rotate(-28deg); } }
@keyframes pt-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22%); } }
@keyframes pt-tuck { 0%, 100% { transform: scale(1, 1); } 40%, 70% { transform: scale(0.92, 0.86); } }
@keyframes t-dot { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }

/* Laelaps settles and wakes in stages (Chris, 17 Oct evening): from sitting he lies down with his
   head still up, then lowers it onto his paws; waking, the head comes up first, then he sits. */
@media (prefers-reduced-motion: no-preference) {
  .v-hound.settling .v-dog-sit { display: inline; animation: dog-sit-out 1.8s ease both; }
  .v-hound.settling .v-dog-sphinx, .v-hound.waking .v-dog-sphinx { display: inline; animation: dog-mid 1.8s ease both; }
  .v-hound.settling .v-dog-lie { animation: dog-lie-in 1.8s ease both; }
  .v-hound.waking .v-dog-lie { display: inline; animation: dog-lie-out 1.8s ease both; }
  .v-hound.waking .v-dog-sit { animation: dog-sit-in 1.8s ease both; }
}
@keyframes dog-sit-out { 0%, 26% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(2px); } }
@keyframes dog-mid { 0%, 26% { opacity: 0; } 36%, 64% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes dog-lie-in { 0%, 64% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes dog-lie-out { 0%, 26% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes dog-sit-in { 0%, 64% { opacity: 0; transform: translateY(2px); } 74%, 100% { opacity: 1; transform: none; } }

/* What someone says over his head (round 7: a visitor's line in the lobby, part L; a pet's trick and
   Laelaps's hello, part T), on any page that draws the walkers. */
.walker .said {
  position: absolute; left: 50%; bottom: calc(100% + 24px); z-index: 3; width: max-content; max-width: 200px; padding: 5px 9px; border-radius: 12px;
  transform: translateX(-50%); background: #f6efe0; color: #2b1b12; font: 500 12.5px/1.3 var(--font); text-align: left; white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.walker .said::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #f6efe0; }
.walker.pet .said { bottom: calc(100% + 4px); font-size: 12px; }