/* Пиксельный кот-талисман: общие правила. Позы — спрайт /assets/img/cats.svg (tools/make_cats.py). */
.pxcat { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.cat-lane { position: relative; height: 68px; overflow: hidden; max-width: 1120px; margin-inline: auto; }
.cat-walker { position: absolute; bottom: 4px; left: -120px; width: 108px; height: 60px; animation: cat-cross 26s linear infinite; }
.cat-walker .pxcat { position: absolute; inset: 0; }
.cat-walker .f2 { visibility: hidden; }
.cat-walker .f1 { animation: cat-frame .5s steps(1) infinite; }
.cat-walker .f2 { animation: cat-frame .5s steps(1) infinite reverse; }
.cat-lane.back .cat-walker { animation-name: cat-cross-back; animation-duration: 32s; }
.cat-lane.back .cat-walker .pxcat { transform: scaleX(-1); }
@keyframes cat-cross { from { left: -120px; } to { left: 100%; } }
@keyframes cat-cross-back { from { left: 100%; } to { left: -120px; } }
@keyframes cat-frame { 0% { visibility: visible; } 50% { visibility: hidden; } }
.cat-zzz { position: absolute; font: 500 .8rem var(--mono); color: var(--fog); animation: cat-zzz 3s ease-in-out infinite; }
@keyframes cat-zzz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px); } }
@media (prefers-reduced-motion: reduce) {
  .cat-walker { animation: none; left: 12%; }
  .cat-walker .f1, .cat-walker .f2, .cat-zzz { animation: none; }
}