/* Shared Bean performances for the homepage and the motion study. */
.bean-actor{--roam-distance:46px;--travel-time:12s;--stride-time:1.2s;--step-time:.6s;width:200px;height:184px;flex:none;cursor:pointer;border-radius:12px;outline-offset:5px}
.bean-actor:focus-visible{outline:2px dashed #232323}
.bean-direction,.bean-direction>svg{display:block;width:100%;height:100%}
.bean-direction>svg{overflow:visible}
.bean-actor .club-body{animation:none;transform-origin:200px 350px}
.bean-actor .club-eyes{animation:bean-blink 7s infinite;transform-box:fill-box;transform-origin:center}
.bean-actor[data-mood="calm"]{animation:bean-travel var(--travel-time) linear infinite}
.bean-actor[data-mood="calm"] .bean-direction{animation:bean-facing var(--travel-time) linear infinite}
.bean-actor[data-mood="calm"] .bean-walker{animation:bean-footfall var(--step-time) ease-in-out infinite}
.bean-actor[data-mood="calm"] .bean-leg{animation:bean-stride var(--stride-time) linear infinite}
.bean-actor[data-mood="calm"] .step-b{animation-delay:calc(var(--stride-time) / -2)}
.bean-actor[data-mood="calm"] .bean-walk-head{animation:bean-head-bob var(--step-time) ease-in-out infinite;transform-origin:265px 245px}
.bean-actor[data-mood="calm"] .bean-walk-ears{animation:bean-ear-swing var(--stride-time) ease-in-out infinite;transform-origin:200px 128px}
.bean-actor[data-mood="calm"] .bean-walk-tail{animation:bean-tail-swing .8s ease-in-out infinite;transform-origin:119px 270px}
.bean-actor[data-mood="fresh"] .club-body{animation:bean-joy 3s ease-in-out infinite}
.bean-actor[data-mood="fresh"] .bean-idle-tail{animation:bean-wag .24s ease-in-out infinite;transform-origin:260px 304px}
.bean-actor[data-mood="fresh"] .bean-idle-paws{animation:bean-cheer .6s ease-in-out infinite;transform-origin:200px 260px}
.bean-actor[data-mood="fresh"] .bean-idle-head{animation:bean-happy-head .6s ease-in-out infinite;transform-origin:200px 237px}
.bean-actor[data-mood="restless"]{animation:bean-pace 8s linear infinite}
.bean-actor[data-mood="restless"] .bean-direction{animation:bean-pace-facing 8s linear infinite}
.bean-actor[data-mood="restless"] .step-a{animation:bean-anxious-a 4s linear infinite}
.bean-actor[data-mood="restless"] .step-b{animation:bean-anxious-b 4s linear infinite}
.bean-actor[data-mood="restless"] .bean-walk-head{animation:bean-look 4s ease-in-out infinite;transform-origin:265px 245px}
.bean-actor[data-mood="restless"] .bean-walk-tail{animation:bean-tail-check 4s ease-in-out infinite;transform-origin:119px 270px}
.bean-actor[data-mood="dramatic"] .bean-rest-body{animation:bean-sigh 7s ease-in-out infinite;transform-origin:225px 342px}
.bean-actor[data-mood="dramatic"] .bean-rest-head{animation:bean-head-lift 7s ease-in-out infinite;transform-origin:190px 330px}
.bean-actor[data-mood="zen"] .club-body{animation:bean-prayer-breathe 5s ease-in-out infinite;transform-origin:200px 365px}
.bean-actor[data-mood="zen"] .bean-idle-head{animation:bean-prayer-nod 5s ease-in-out infinite;transform-origin:200px 237px}
.bean-actor[data-mood="unknown"] .club-body{animation:bean-sleep 6s ease-in-out infinite}
.bean-actor.is-paused,.bean-actor.is-paused *,.motion-paused .bean-actor,.motion-paused .bean-actor *{animation-play-state:paused!important}
@keyframes bean-travel{0%,100%{transform:translateX(calc(-1 * var(--roam-distance)))}50%{transform:translateX(var(--roam-distance))}}
@keyframes bean-facing{0%,48%{transform:scaleX(1)}49.9%{transform:scaleX(.15)}50%,98%{transform:scaleX(-1)}99.9%{transform:scaleX(-.15)}100%{transform:scaleX(1)}}
@keyframes bean-stride{0%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}65%{transform:translateY(-9px) rotate(5deg)}85%{transform:translateY(-9px) rotate(-9deg)}100%{transform:rotate(-14deg)}}
@keyframes bean-footfall{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes bean-head-bob{0%,100%{transform:rotate(-1deg)}50%{transform:translateY(2px) rotate(1deg)}}
@keyframes bean-ear-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes bean-tail-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes bean-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}
@keyframes bean-joy{0%,8%,48%,100%{transform:translateY(0) scale(1)}12%,32%{transform:translateY(3px) scale(1.03,.97)}21%{transform:translateY(-27px) rotate(-3deg)}40%{transform:translateY(-17px) rotate(3deg)}}
@keyframes bean-wag{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(18deg)}}
@keyframes bean-cheer{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes bean-happy-head{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bean-pace{0%,85%,100%{transform:translateX(calc(-1 * var(--roam-distance)))}35%,50%{transform:translateX(var(--roam-distance))}}
@keyframes bean-look{0%,65%,100%{transform:rotate(0)}76%,83%{transform:translateY(-5px) rotate(-9deg)}90%,95%{transform:rotate(7deg)}}
@keyframes bean-tail-check{0%,65%,100%{transform:rotate(-5deg)}75%,85%{transform:rotate(12deg)}90%{transform:rotate(-9deg)}}
@keyframes bean-sigh{0%,20%,65%,100%{transform:scale(1)}35%{transform:scale(1.025,1.05)}48%,56%{transform:scale(1.01,.96)}}
@keyframes bean-head-lift{0%,12%,65%,100%{transform:translateY(0) rotate(0)}23%,33%{transform:translateY(-13px) rotate(-4deg)}47%,54%{transform:translateY(3px) rotate(2deg)}}
@keyframes bean-sleep{0%,100%{transform:scale(1)}50%{transform:scale(1.015,1.035)}}
@keyframes bean-prayer-breathe{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-2px) scale(1,1.012) rotate(.7deg)}}
@keyframes bean-prayer-nod{0%,100%{transform:rotate(-1deg)}50%{transform:translateY(2px) rotate(1deg)}}
@media(max-width:760px){.bean-actor{--roam-distance:28px;--travel-time:8s;--stride-time:1.2s}}
@media(prefers-reduced-motion:reduce){.bean-actor,.bean-actor *{animation:none!important;transition:none!important}}
@keyframes bean-anxious-a{0%{transform:translateY(0px) rotate(-14deg)}
4%{transform:translateY(0px) rotate(0deg)}
8%{transform:translateY(0px) rotate(14deg)}
12%{transform:translateY(-9px) rotate(0deg)}
16%{transform:translateY(0px) rotate(-14deg)}
20%{transform:translateY(0px) rotate(0deg)}
24%{transform:translateY(0px) rotate(14deg)}
28%{transform:translateY(-9px) rotate(0deg)}
32%{transform:translateY(0px) rotate(-14deg)}
36%{transform:translateY(0px) rotate(0deg)}
40%{transform:translateY(0px) rotate(14deg)}
44%{transform:translateY(-9px) rotate(0deg)}
48%{transform:translateY(0px) rotate(-14deg)}
52%{transform:translateY(0px) rotate(0deg)}
56%{transform:translateY(0px) rotate(14deg)}
60%{transform:translateY(-9px) rotate(0deg)}
64%{transform:translateY(0px) rotate(-14deg)}
70%,100%{transform:translateY(0) rotate(0)}}
@keyframes bean-anxious-b{0%{transform:translateY(0px) rotate(14deg)}
4%{transform:translateY(-9px) rotate(0deg)}
8%{transform:translateY(0px) rotate(-14deg)}
12%{transform:translateY(0px) rotate(0deg)}
16%{transform:translateY(0px) rotate(14deg)}
20%{transform:translateY(-9px) rotate(0deg)}
24%{transform:translateY(0px) rotate(-14deg)}
28%{transform:translateY(0px) rotate(0deg)}
32%{transform:translateY(0px) rotate(14deg)}
36%{transform:translateY(-9px) rotate(0deg)}
40%{transform:translateY(0px) rotate(-14deg)}
44%{transform:translateY(0px) rotate(0deg)}
48%{transform:translateY(0px) rotate(14deg)}
52%{transform:translateY(-9px) rotate(0deg)}
56%{transform:translateY(0px) rotate(-14deg)}
60%{transform:translateY(0px) rotate(0deg)}
64%{transform:translateY(0px) rotate(14deg)}
70%,100%{transform:translateY(0) rotate(0)}}

/* Restless has its own clock: switch direction only during the endpoint pauses. */
@keyframes bean-pace-facing{
 0%,42%{transform:scaleX(1)}
 46%{transform:scaleX(.15)}
 49%,92%{transform:scaleX(-1)}
 96%{transform:scaleX(-.15)}
 99%,100%{transform:scaleX(1)}
}