/* Wander painterly hiker — shared stylesheet.
 *
 * Paired with assets/hiker.js. Include on any page that renders the hiker
 * (trail walker, fleeing hiker, peeker, static decorative). The class names
 * are prefixed `hiker-` so they are safe to load alongside other page CSS.
 *
 * Notes
 * - #lostHiker is the default container id used by the trail walker.
 * - `.hiker-body / -arm-front / -arm-back / -leg-front / -leg-back / -pack`
 *   match the groups inside the SVG returned by Wander.Hiker.makeSVG().
 * - Stride cycle is .52s; arms + legs are paired so opposites swing together.
 */

#lostHiker { position: absolute; pointer-events: all; cursor: pointer; z-index: 2; }
#lostHiker svg,
.wander-hiker-wrap svg { display: block; overflow: visible; }

/* Whole body: subtle walking bob. */
@keyframes hikerBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}

/* Limb stride — synchronized so arms swing opposite legs. */
@keyframes hikerLimbA { 0%, 100% { transform: rotate( 22deg); } 50% { transform: rotate(-18deg); } }
@keyframes hikerLimbB { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate( 22deg); } }
@keyframes hikerLegA  { 0%, 100% { transform: rotate( 16deg); } 50% { transform: rotate(-14deg); } }
@keyframes hikerLegB  { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate( 16deg); } }

@keyframes hikerPackJiggle {
  0%, 100% { transform: translateY(0)    rotate(0); }
  50%      { transform: translateY(-.6px) rotate(-1deg); }
}

.hiker-body      { animation: hikerBob        .52s ease-in-out infinite; }
.hiker-arm-front { transform-box: fill-box; transform-origin: 50%   0;   animation: hikerLimbA      .52s ease-in-out infinite; }
.hiker-arm-back  { transform-box: fill-box; transform-origin: 50%   0;   animation: hikerLimbB      .52s ease-in-out infinite; }
.hiker-leg-front { transform-box: fill-box; transform-origin: 50%   0;   animation: hikerLegA       .52s ease-in-out infinite; }
.hiker-leg-back  { transform-box: fill-box; transform-origin: 50%   0;   animation: hikerLegB       .52s ease-in-out infinite; }
.hiker-pack      { transform-box: fill-box; transform-origin: 50% 100%;  animation: hikerPackJiggle .52s ease-in-out infinite; }

/* Respect the user's motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hiker-body,
  .hiker-arm-front, .hiker-arm-back,
  .hiker-leg-front, .hiker-leg-back,
  .hiker-pack { animation: none !important; }
}