/* Trail scene + walking Balam with backpack (paired with balam-walk.js; part origins come from balam.css). */
.balam-trail { position: relative; height: 300px; margin: -6px 0 34px; overflow: hidden; border-radius: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trail-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
/* Wooden sign planted in the meadow */
.trail-wrap { padding-top: 28px; position: relative; }
.trail-wrap .balam-trail { margin-bottom: 0; }
/* The sign is the link to the books (store subdomain) */
.trail-sign { position: absolute; right: 9%; bottom: 26px; z-index: 2; display: grid; justify-items: center; text-decoration: none; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 4px 3px rgba(60, 40, 10, .25)); }
.trail-sign:hover, .trail-sign:focus-visible { transform: rotate(3deg) scale(1.06); }
.trail-sign:focus-visible { outline: 3px dashed #22665E; outline-offset: 4px; border-radius: 8px; }
.trail-sign b { position: relative; z-index: 1; padding: .4em 1em; border-radius: 6px; border: 3px solid #6B4320; color: #FFF6E0; font-weight: 900; white-space: nowrap; transform: rotate(-3deg);
  background: repeating-linear-gradient(176deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px), linear-gradient(#C2925A, #A8773F); text-shadow: 0 1px 0 #6B4320; }
.trail-sign i { width: 9px; height: 54px; margin-top: -4px; border-radius: 3px; background: linear-gradient(90deg, #5A3816, #7B5228, #5A3816); }
.balam-walker { position: absolute; left: var(--stop, 40%); bottom: 2px; width: 190px; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 20px; outline-offset: 4px; }
.balam-walker:focus-visible { outline: 3px dashed #22665E; }
.balam-walker:not(.is-walking):not(.is-here) { opacity: 0; }

/* Walking: slides in from the left; legs step in turns, body bobs, arm and tail swing, pack bounces */
.balam-walker.is-walking { animation: w-walk-in var(--walk, 3s) cubic-bezier(.25, .1, .45, 1) both; }
.is-walking .b-root { animation: w-bob .33s ease-in-out infinite alternate; }
.is-walking .b-leg-f { animation: w-step .66s ease-in-out infinite; }
.is-walking .b-leg-b { animation: w-step .66s ease-in-out -.33s infinite; }
.is-walking .b-arm { animation: w-swing .66s ease-in-out infinite; }
.is-walking .b-tail { animation: w-tail .66s ease-in-out infinite; }
.is-walking .b-head { animation: w-nod .33s ease-in-out .05s infinite alternate; }
.is-walking .b-pack { animation: w-pack .33s ease-in-out .08s infinite alternate; }

/* Dust puffs at the feet while walking */
.w-dust { position: absolute; bottom: 4px; left: 44%; width: 14px; height: 14px; border-radius: 50%; background: rgba(185, 132, 76, .35); opacity: 0; pointer-events: none; }
.w-dust + .w-dust { left: 58%; }
.is-walking .w-dust { animation: w-dust .66s ease-out infinite; }
.is-walking .w-dust + .w-dust { animation-delay: .33s; }

@keyframes w-walk-in { from { transform: translateX(calc(var(--dist, 400px) * -1)); } to { transform: none; } }
@keyframes w-bob { from { transform: translateY(1px); } to { transform: translateY(-5px); } }
@keyframes w-step { 0%, 100% { transform: rotate(-24deg); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(20deg); } 75% { transform: translateY(-7px) rotate(0); } }
@keyframes w-swing { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-18deg); } }
@keyframes w-tail { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes w-nod { from { transform: rotate(1.5deg); } to { transform: rotate(-2deg); } }
@keyframes w-pack { from { transform: rotate(3deg); } to { transform: translateY(-2px) rotate(-4deg); } } /* swings from the strap */
@keyframes w-dust { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-26px, -10px) scale(1.6); } }

@media (max-width: 600px) {
  .balam-trail { height: 240px; border-radius: 20px; }
  .balam-walker { width: 150px; left: var(--stop-sm, 22%); }
  .trail-sign { right: 4%; bottom: 18px; font-size: .78rem; }
  .balam-walker .balam-say { font-size: .78rem; padding: .4em .75em; }
}
@media (prefers-reduced-motion: reduce) {
  .balam-walker, .balam-walker *, .w-dust { animation: none !important; }
}