/* Prueba de huellitas continuas. Se puede apagar en config.js:
   movimiento.huellitas_andando = false.
   Velocidad: --walking-pace. Intensidad: --walking-opacity. */
.walking-paws {
  --walking-size: 14px;
  --walking-inset: 2px;
  --walking-stride: 7px;
  --walking-pace: 800ms;
  --walking-cycle: 6400ms;
  --walking-opacity: .48;
  position: fixed;
  inset: calc(84px + env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom));
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.walking-paws__lane { position: absolute; inset: 0; pointer-events: none; }
.walking-paw {
  position: absolute;
  display: block;
  width: var(--walking-size);
  aspect-ratio: 1;
  background: var(--color-secundario, #ef6259);
  -webkit-mask: url('../assets/paw.svg') center / contain no-repeat;
  mask: url('../assets/paw.svg') center / contain no-repeat;
  opacity: 0;
  transform: rotate(var(--walking-angle)) scale(.65);
  animation: walking-paw-step var(--walking-cycle) linear infinite;
  animation-delay: calc(var(--step) * var(--walking-pace));
  pointer-events: none;
}
.walking-paws__lane--up .walking-paw {
  --walking-angle: -16deg;
  top: calc(88% - var(--step) * 11%);
  left: var(--walking-inset);
}
.walking-paws__lane--up .walking-paw:nth-child(even) {
  --walking-angle: 16deg;
  left: calc(var(--walking-inset) + var(--walking-stride));
}
.walking-paws__lane--down .walking-paw {
  --walking-angle: 164deg;
  top: calc(9% + var(--step) * 11%);
  right: var(--walking-inset);
  animation-delay: calc(var(--step) * var(--walking-pace) + var(--walking-cycle) / 2);
}
.walking-paws__lane--down .walking-paw:nth-child(even) {
  --walking-angle: 196deg;
  right: calc(var(--walking-inset) + var(--walking-stride));
}
@keyframes walking-paw-step {
  0% { opacity: 0; transform: rotate(var(--walking-angle)) scale(.65); }
  3% { opacity: var(--walking-opacity); transform: rotate(var(--walking-angle)) scale(1.1); }
  7% { opacity: var(--walking-opacity); transform: rotate(var(--walking-angle)) scale(1); }
  24% { opacity: calc(var(--walking-opacity) * .55); }
  32%, 100% { opacity: 0; transform: rotate(var(--walking-angle)) scale(1); }
}
body.intro-active .walking-paws { visibility: hidden; }
body.intro-active .walking-paw { animation-play-state: paused; }
@media (min-width: 960px) {
  .walking-paws { --walking-size: 22px; --walking-inset: 16px; --walking-stride: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .walking-paws { display: none; }
  .walking-paw { animation: none; }
}