.walking-cat {
  --cat-width: 140px;
  position: fixed;
  z-index: 42;
  bottom: max(.35rem, env(safe-area-inset-bottom));
  left: -150px;
  width: var(--cat-width);
  height: 86px;
  pointer-events: none;
  animation: cat-roam 32s linear infinite;
}

.walking-cat-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 4px 3px rgba(27, 18, 16, .28));
  animation: cat-bob .32s ease-in-out infinite alternate;
}

.cat-body,
.cat-head { fill: #77766f; stroke: #454641; stroke-width: 2.2; stroke-linejoin: round; }
.cat-belly,
.cat-chest,
.cat-muzzle { fill: #d0c6b3; }
.cat-chest { stroke: #777267; stroke-width: 1.2; }
.cat-leg-outline,
.cat-leg-fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cat-leg-outline { stroke: #454641; stroke-width: 12; }
.cat-leg-fill { stroke: #77766f; stroke-width: 8; }
.cat-leg-mark,
.cat-fur-mark { fill: none; stroke: #48483f; stroke-width: 2.4; stroke-linecap: round; }
.cat-tail-base { fill: none; stroke: #77766f; stroke-width: 10; stroke-linecap: round; }
.cat-stripe,
.cat-face-stripe { fill: none; stroke: #44443c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cat-tail-stripe { stroke-width: 3; }
.cat-ear-inner { fill: #c17f7a; }
.cat-eye { fill: #d2b35d; stroke: #343a3e; stroke-width: 1; }
.cat-nose { fill: #744f54; }
.cat-mouth,
.cat-whisker { fill: none; stroke: #555b60; stroke-width: 1.2; stroke-linecap: round; }

.cat-tail {
  transform-box: view-box;
  transform-origin: 42px 59px;
  animation: cat-tail-sway .9s ease-in-out infinite alternate;
}

.cat-leg {
  transform-box: view-box;
  animation: cat-step .6s ease-in-out infinite;
}

.cat-leg--back-a { transform-origin: 57px 70px; }
.cat-leg--back-b { transform-origin: 73px 70px; animation-delay: -.3s; }
.cat-leg--front-a { transform-origin: 116px 70px; animation-delay: -.3s; }
.cat-leg--front-b { transform-origin: 130px 70px; }

@keyframes cat-roam {
  0% { left: -150px; transform: scaleX(1); }
  5% { left: 0; transform: scaleX(1); }
  45% { left: calc(100vw - var(--cat-width)); transform: scaleX(1); }
  50%, 55% { left: calc(100vw - var(--cat-width)); transform: scaleX(-1); }
  95% { left: 0; transform: scaleX(-1); }
  100% { left: -150px; transform: scaleX(1); }
}

@keyframes cat-step {
  0%, 100% { transform: rotate(-18deg); }
  25% { transform: rotate(0) translateY(-3px); }
  50% { transform: rotate(18deg); }
  75% { transform: rotate(0) translateY(-3px); }
}

@keyframes cat-tail-sway {
  from { transform: rotate(-9deg); }
  to { transform: rotate(12deg); }
}

@keyframes cat-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@media (max-width: 560px) {
  .walking-cat { --cat-width: 112px; height: 69px; bottom: max(.25rem, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .walking-cat { left: 1rem; animation: none; }
  .walking-cat-svg,
  .cat-tail,
  .cat-leg { animation: none; }
}