.actor {
  position: absolute;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 34);
  transform-origin: 50% 100%;
  will-change: transform, left;
}
.actor svg { width: 100%; height: 100%; display: block; overflow: visible; animation: idle 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.leg, .arm { transform-box: fill-box; }
.leg { transform-origin: 50% 5%; }
.arm { transform-origin: 50% 8%; }

@keyframes idle { 50% { transform: scaleY(1.012); } }

/* soft contact shadow under everyone */
.actor::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 5%; z-index: -1;
  background: radial-gradient(closest-side, rgba(30, 15, 35, .32), rgba(30, 15, 35, 0)); border-radius: 50%;
}
.actor { filter: drop-shadow(0 1px 1px rgba(40, 20, 40, .12)); }

/* play animations (set with actor.set({ play: 'hop' | 'sway' | 'clap', delay })) */
.actor.play-hop svg { animation: hop .62s cubic-bezier(.3, 0, .4, 1) infinite; animation-delay: var(--delay, 0s); }
.actor.play-hop .arm.l { animation: armUp .62s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.actor.play-hop .arm.r { animation: armUpR .62s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.actor.play-sway svg { animation: sway 3.4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.actor.play-clap svg { animation: bob .7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.actor.play-clap .arm.l { animation: clapL .35s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.actor.play-clap .arm.r { animation: clapR .35s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
@keyframes hop { 0%, 100% { transform: translateY(0) scaleY(1); } 12% { transform: translateY(0) scaleY(.94); } 45% { transform: translateY(-9%) scaleY(1.03); } 80% { transform: translateY(0) scaleY(.97); } }
@keyframes armUp { 0%, 100% { transform: rotate(10deg); } 45% { transform: rotate(150deg); } }
@keyframes armUpR { 0%, 100% { transform: rotate(-10deg); } 45% { transform: rotate(-150deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes clapL { from { transform: rotate(-20deg); } to { transform: rotate(-70deg); } }
@keyframes clapR { from { transform: rotate(20deg); } to { transform: rotate(70deg); } }
@keyframes swingA { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes swingB { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5%); } }

.actor.walking svg { animation: bob .5s ease-in-out infinite; }
.actor.walking .leg.l, .actor.walking .arm.r { animation: swingA .5s ease-in-out infinite; }
.actor.walking .leg.r, .actor.walking .arm.l { animation: swingB .5s ease-in-out infinite; }

/* the little brother with the very long neck (js/family.js) */
.bro { position: absolute; left: 0; bottom: var(--feet); width: 0; height: 0; transform-origin: 0 100%; pointer-events: none; }
.bro-body { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); }
.bro-body svg, .bro-head svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bro-neck { position: absolute; left: 0; transform: translateX(-50%); background: linear-gradient(90deg, #d9a37a, #e9b78d 40%, #d9a37a); border-radius: 99px; }
.bro-head { position: absolute; left: 0; transform: translateX(-50%); }
.bro.walking .leg.l, .bro.walking .arm.r { animation: swingA .5s ease-in-out infinite; }
.bro.walking .leg.r, .bro.walking .arm.l { animation: swingB .5s ease-in-out infinite; }

/* an arm reaching out to hold hands keeps still while walking */
.actor .arm.hold { animation: none !important; }

/* little moments on the trips: a film-hero pose, shivering, laughing so hard she bends */
.actor.play-pose svg { animation: bob 1.4s ease-in-out infinite; }
.actor.play-pose .arm.l { transform: rotate(140deg); }
.actor.play-pose .arm.r { transform: rotate(-140deg); }
.actor.play-shiver svg { animation: shiver .09s linear infinite alternate; }
@keyframes shiver { from { transform: translateX(-1.2%); } to { transform: translateX(1.2%); } }
.actor.play-giggle svg { animation: giggle .32s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes giggle { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2.5deg) translateY(-1.2%); } }
.actor.play-crab svg { animation: crab .3s ease-in-out infinite alternate; }
.actor.play-crab .arm.l { transform: rotate(120deg); animation: crabL .3s ease-in-out infinite alternate; }
.actor.play-crab .arm.r { transform: rotate(-120deg); animation: crabR .3s ease-in-out infinite alternate; }
@keyframes crab { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-2%) rotate(3deg); } }
@keyframes crabL { from { transform: rotate(110deg); } to { transform: rotate(140deg); } }
@keyframes crabR { from { transform: rotate(-110deg); } to { transform: rotate(-140deg); } }