/* Cat Animation CSS */
.cat-animation {
  width: 100%;
  height: 200px; /* Fixed height for the cat animation area */
  background-color: #132328;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.cat-animation .wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
}

.cat-animation .ground {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20px; /* Reduced height to fit within 200px container */
  background-color: rgb(1, 143, 96);
  z-index: 1; /* Ensure ground is below the cat */
}

.cat-animation .cat {
  position: absolute;
  bottom: 20px; /* Distance from the bottom of the container */
  left: 100px;
  height: 30px;
  width: 60px;
  transition: left 0.3s ease; /* Smooth left property transition */
  transform-origin: center;
  background-color: transparent;
  z-index: 2; /* Ensure cat is above the ground */
}

/* Body */
.cat-animation .body {
  position: absolute;
  height: 35px;
  width: 60px;
}

.cat-animation .face_left .body { 
  animation: turn_body_left forwards 0.5s;
}

@keyframes turn_body_left {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.5, 1); }
}

.cat-animation .face_right .body {
  animation: turn_body_right forwards 0.5s;
}

@keyframes turn_body_right {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.5, 1); }
}

/* Head */
.cat-animation .cat_head {
  position: absolute;
  height: 40px;
  width: 48px;
  right: -10px;
  top: -30px;
  transition: 0.5s;
  z-index: 50;
}

.cat-animation .first_pose .cat_head,
.cat-animation .face_left .cat_head { 
  right: 22px;
}

/* Tail */
.cat-animation .tail {
  position: absolute;
  top: -25px;
  height: 36px;
  width: 15px;
  animation: tail_motion forwards 2s;
  transform-origin: bottom right;
}

@keyframes tail_motion {
  0%, 100% { 
    left: -5px;
    transform: rotate(0deg) scale(1); 
  }
  50% { 
    left: -10px;
    transform: rotate(-50deg) scale(-1,1); 
  }
}

.cat-animation .first_pose .tail,
.cat-animation .face_left .tail {
  left: 45px;
  animation: tail_motion_alt forwards 2s;
}

@keyframes tail_motion_alt {
  0%, 100% { 
    left: 45px;
    transform: rotate(0deg) scale(1); 
  }
  50% { 
    left: 40px;
    transform: rotate(50deg) scale(-1,1); 
  }
}

/* Legs */
.cat-animation .leg {
  position: absolute;
  height: 40px;
  width: 10px;
  transform-origin: top center;
}

.cat-animation .front_legs,
.cat-animation .back_legs {
  position: absolute;
  height: 40px;
  transition: 0.7s;
}

.cat-animation .front_legs {
  width: 30px;
  right: 0;
}

.cat-animation .back_legs {
  width: 25px;
  left: 0; 
}

.cat-animation .face_left .leg svg {
  transform: scale(-1,1);
}

.cat-animation .face_right .front_legs { 
  right: 0; 
}

.cat-animation .first_pose .front_legs,
.cat-animation .face_left .front_legs { 
  right: 30px; 
}

.cat-animation .face_right .back_legs { 
  left: 0; 
}

.cat-animation .first_pose .back_legs,
.cat-animation .face_left .back_legs { 
  left: 35px; 
}

.cat-animation .one,
.cat-animation .three  {
  bottom: -15px;
  right: 0;
}

.cat-animation .two, 
.cat-animation .four {
  bottom: -15px;
  left: 0px;
}

.cat-animation .one.walk, 
.cat-animation .three.walk {
  animation: infinite 0.3s walk;
}

.cat-animation .two.walk, 
.cat-animation .four.walk {
  animation: infinite 0.3s walk_alt;
}

@keyframes walk {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

@keyframes walk_alt {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
}

/* Jump */
.cat-animation .cat_wrapper {
  position: absolute;
  bottom: 10px;
  z-index: 2; /* Ensure cat wrapper is above the ground */
}

.cat-animation .cat_wrapper.jump .one { 
  animation: infinite 0.3s walk;
}

.cat-animation .cat_wrapper.jump .two { 
  animation: infinite 0.3s walk_alt;
}

.cat-animation .cat_wrapper.jump .three,
.cat-animation .cat_wrapper.jump .four {
  animation: none;
}

.cat-animation .cat_wrapper.jump .cat.face_right .back_legs {
  transform-origin: center;
  transform: rotate(50deg);
}

.cat-animation .cat_wrapper.jump .cat.face_left .back_legs {
  transform-origin: center;
  transform: rotate(-50deg);
}

.cat-animation .cat_wrapper.jump .cat.face_right .front_legs {
  transform-origin: center;
  transform: rotate(-60deg);
}

.cat-animation .cat_wrapper.jump .cat.face_left .front_legs {
  transform-origin: center;
  transform: rotate(60deg);
}

.cat-animation .cat_wrapper.jump {
  animation: jump forwards 1s;
}

@keyframes jump {
  0%, 100%  { bottom: 0px; }
  50% { bottom: 100px; }
}

.cat-animation .jump .face_left { 
  animation: forwards 0.5s body_stand_left;
  transform-origin: right bottom;
}

.cat-animation .jump .face_right { 
  animation: forwards 0.5s body_stand_right;
  transform-origin: left bottom;
}

@keyframes body_stand_right {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-45deg); }
}

@keyframes body_stand_left {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

.cat-animation svg {
  height: 100%;
  width: 100%;
}

.cat-animation polygon.eyes {
  fill: rgb(1, 143, 96);
}

.cat-animation polygon,
.cat-animation path {
  fill: white;
}

.cat-animation .sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

.cat-animation a {
  color: white;
  text-decoration: none;
}

.cat-animation a:hover {
  text-decoration: underline;
}