/* static/css/cat_yen_coin_nimation.css */
.cat-yen-stage{
  width:min(64vw,532px);
  margin:0 auto;
}

.cat-yen-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

.cat-body{
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.16));
}

.yen-coin{
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.16));
}

.cat-paw{
  transform-box:fill-box;
  transform-origin:18% 72%;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.12));
}

.cat-paw-front{
  animation:cat-paw-front-roll 1s ease-in-out infinite;
}

.cat-paw-back{
  opacity:.72;
  animation:cat-paw-back-roll 1s ease-in-out infinite;
}

.column-title-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

.column-title-wrap h1{
  margin:0 6rem 0 0;
}

.column-title-wrap .cat-yen-stage{
  width:9rem;
  margin:2rem 0 0 0;
  flex-shrink:0;
}

@keyframes cat-paw-front-roll{
  0%{
    transform:rotate(-22deg) translate(-8px,18px);
  }

  25%{
    transform:rotate(-4deg) translate(10px,4px);
  }

  50%{
    transform:rotate(18deg) translate(22px,-8px);
  }

  75%{
    transform:rotate(4deg) translate(8px,5px);
  }

  100%{
    transform:rotate(-22deg) translate(-8px,18px);
  }
}

@keyframes cat-paw-back-roll{
  0%{
    transform:rotate(12deg) translate(14px,-4px);
  }

  50%{
    transform:rotate(-18deg) translate(-10px,16px);
  }

  100%{
    transform:rotate(12deg) translate(14px,-4px);
  }
}

@media (prefers-reduced-motion:reduce){
  .cat-paw-front,
  .cat-paw-back{
    animation:none;
  }
}