/* First-pass SHED Woodchuck motion.
 * Keep the character movement deliberately small so the illustrated room
 * still feels like artwork rather than a looping cartoon.
 */

.woodshed-character-layer.ww-motion-ready {
  display: block;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 4;
  width: min(38%, 380px);
  max-width: 380px;
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.woodshed-character-layer.ww-motion-ready .woodshed-character-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  transform-origin: 50% 88%;
  animation: ww-woodchuck-idle 4.2s ease-in-out infinite;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.woodshed-character-layer.ww-motion-ready:focus-visible {
  outline: 3px solid #fff4d4;
  outline-offset: 4px;
  border-radius: 1rem;
}

.woodshed-scene.is-decorating .woodshed-character-layer.ww-motion-ready {
  pointer-events: none;
}

.woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-practice-sway {
  animation: ww-woodchuck-practice-sway 4.2s ease-in-out infinite;
}

.woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-tap-wiggle {
  animation: ww-woodchuck-tap-wiggle 420ms ease-out 1;
}

.woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-achievement-hop {
  animation: ww-woodchuck-achievement-hop 720ms cubic-bezier(0.2, 0.78, 0.24, 1) 1;
}

@keyframes ww-woodchuck-idle {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.016, 1);
  }
}

@keyframes ww-woodchuck-practice-sway {
  0%, 100% {
    transform: translateX(-8px) rotate(-1deg) scale(1, 1);
  }
  50% {
    transform: translateX(8px) rotate(1deg) scale(1, 1);
  }
}

@keyframes ww-woodchuck-tap-wiggle {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  24% {
    transform: translate(-3px, -1px) rotate(-1.4deg);
  }
  48% {
    transform: translate(3px, -2px) rotate(1.4deg);
  }
  72% {
    transform: translate(-2px, -1px) rotate(-0.7deg);
  }
}

@keyframes ww-woodchuck-achievement-hop {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  18% {
    transform: translateY(2px) scale(0.995, 1.006);
  }
  48% {
    transform: translateY(-14px) scale(1.008, 0.994);
  }
  68% {
    transform: translateY(0) scale(0.997, 1.004);
  }
  82% {
    transform: translateY(-4px) scale(1.003, 0.998);
  }
}

@media (max-width: 640px) {
  .woodshed-character-layer.ww-motion-ready {
    bottom: 1rem;
    width: min(44%, 17rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woodshed-character-layer.ww-motion-ready .woodshed-character-art,
  .woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-practice-sway,
  .woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-tap-wiggle,
  .woodshed-character-layer.ww-motion-ready .woodshed-character-art.is-achievement-hop {
    animation: none;
    transform: none;
    will-change: auto;
  }
}