/* The walkers (shared/js/walkers.js): small clerks along the bottom edge, and the one with the ladder. */
.walkers { position: fixed; z-index: 43; left: 0; right: 0; bottom: 0; height: 6.4rem; pointer-events: none; overflow: hidden; }
.walker { position: absolute; bottom: 0.2rem; left: 0; height: 5.8rem; width: 4.4rem; will-change: transform; }
.walker img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0; opacity: 0; }
.walker img.is-frame { opacity: 1; }
.walker.is-posing .walker__frame { opacity: 0; }
.walker.is-posing .walker__pose { opacity: 1; }
.walker.is-left img { transform: scaleX(-1); }
.walker--pair { width: 9rem; height: 6rem; }
.walker--pair img { opacity: 1; }

/* the ladder: carried in over the shoulder (the resting pose, so it never appears any other way first), set up at the end
   of the page, climbed step by step; the clerk steps off the top through the side and the ladder is pulled out after them */
.walkers { overflow: visible; height: 6.4rem; }
.walker--ladder { width: 4.4rem; height: 9rem; overflow: visible; }
.walker--ladder img { opacity: 1; }
.walker--ladder .walker__frame, .walker--ladder .walker__climber { height: 5.8rem; z-index: 1; }
.walker--ladder .walker__ladder { left: 50%; bottom: 0; height: 5.6rem; z-index: 0; translate: calc(-50% - 1.7rem) -2.1rem; rotate: -24deg; }
.walker--ladder.is-left .walker__ladder { translate: calc(-50% + 1.7rem) -2.1rem; rotate: 24deg; }
.walker--ladder .walker__climber { left: 50%; bottom: 0; translate: -50% 0; opacity: 0 !important; transition: translate 1.5s steps(7, end), opacity 0.2s; }
.walker--ladder .walker__frame { opacity: 0 !important; } .walker--ladder.is-carrying .walker__frame.is-frame { opacity: 1 !important; }
.walker--ladder.is-setting .walker__ladder, .walker--ladder.is-climbing-up .walker__ladder, .walker--ladder.is-out .walker__ladder { translate: -50% 0; rotate: 0deg; height: 7.6rem; transition: rotate 0.6s var(--settle), height 0.6s var(--settle), translate 0.6s var(--settle); }
.walker--ladder.is-setting .walker__climber { opacity: 1 !important; translate: -50% 0; transition: none; }
.walker--ladder.is-climbing-up .walker__climber { opacity: 1 !important; translate: -50% -8.2rem; }
.walker--ladder.is-out .walker__climber { opacity: 0 !important; translate: calc(-50% + var(--side, 1) * 8rem) -8.2rem; transition: translate 0.65s var(--settle), opacity 0.3s ease 0.35s; }
.walker--ladder.is-gone .walker__climber { opacity: 0 !important; translate: calc(-50% + var(--side, 1) * 8rem) -8.2rem; transition: none; }
.walker--ladder.is-gone .walker__ladder { height: 7.6rem; translate: calc(-50% + var(--side, 1) * 9rem) 0; rotate: calc(var(--side, 1) * 10deg); transition: translate 0.7s cubic-bezier(0.5, 0, 0.8, 0.4), rotate 0.7s ease; }
.walker.is-left .walker__ladder, .walker.is-left .walker__climber, .walker.is-left .walker__frame { transform: scaleX(-1); }
html[data-lights="off"] .walker--ladder img { filter: invert(1) hue-rotate(180deg); }


@media (max-width: 880px) { .walkers:not(.is-phones) { display: none; } }
@media (prefers-reduced-motion: reduce) { .walkers { display: none; } }