/* One quiet sideways stroll. Footprints stay on the sand, not on the crab. */
.beach-crab-slot{--crab-distance:-144px;--crab-cycle:27s;isolation:isolate}
.crab-walker{position:relative;z-index:1;display:block}
.crab-footprints{position:absolute;inset:0;z-index:0;pointer-events:none}
.crab-footprint{position:absolute;top:94%;left:calc(var(--foot-side) + var(--crab-distance)*var(--foot-position));width:3px;height:2px;background:#491f3f;box-shadow:4px 3px 0 #491f3f;transform:rotate(var(--foot-angle));opacity:0}
.crab-walk-started .crab-walker{animation:crab-sideways var(--crab-cycle) linear infinite paused}
.crab-walk-started .crab-walker img{animation:crab-step .75s ease-in-out infinite paused;transform-origin:50% 90%}
.crab-walk-started .crab-footprint{animation:crab-track var(--crab-cycle) linear calc(var(--crab-cycle)*var(--foot-time)) infinite paused}
body.ufo-motion:not(.paused) .crab-walk-started.crab-walk-visible :is(.crab-walker,.crab-walker img,.crab-footprint){animation-play-state:running}
body:not(.ufo-motion) .crab-footprints,.paused .crab-footprints,.beach-crab-slot:not(.crab-walk-visible) .crab-footprints{visibility:hidden}
@keyframes crab-sideways{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--crab-distance))}}
@keyframes crab-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1.5px) rotate(1deg)}}
/* A trace lingers softly, then dissolves over about three seconds. */
@keyframes crab-track{0%{opacity:0}0.2%{opacity:.2}3%{opacity:.18}11.1%,100%{opacity:0}}
@media(max-width:760px){.beach-crab-slot{--crab-distance:-42px}}
@media(prefers-reduced-motion:reduce){
 .crab-walk-started :is(.crab-walker,.crab-walker img,.crab-footprint){animation:none!important;transform:none}
 .crab-footprints{display:none}
}