/* Default State */
chelseaandkat {
  display: flex;
  flex-direction: row;
  position: relative;
}

chelsea, kat {
  display: block;
  position: relative;
}

chelseaandkat img {
  object-fit: none;
  position: absolute;
  z-index: 10;
}

chelsea {
  margin-left: 20px;
  margin-bottom: -16px;
  margin-top: 6px;
  width: 189px;
  height: 163px;
  cursor: pointer;
}

kat {
  bottom: -30px;
  margin-right: 20px;
  width: 149px;
  height: 149px;
  z-index: 9999;
  cursor: pointer;
}

kat.run-anim {
  animation: katSquish 0.2s;
}

chelsea.run-anim {
  animation: chelseaReact 0.2s;
}

filler {
  display: block;
  flex-grow: 1;
  transition: flex-grow 0.6s ease-out;
}

chelseaandkat img:not(:first-child) {
  opacity: 0;
}

/* Hover */

kat:hover img:first-child {
  opacity: 0;
}

kat:hover img:nth-child(2) {
  opacity: 1;
}

/* Clicked */
chelseaandkat[data-close="true"] img {
  opacity: 0;
}
chelseaandkat[data-close="true"] kat>img:last-child {
  opacity: 1;
}
chelseaandkat[data-close="true"] filler {
  flex-grow: 0;
}
chelseaandkat[data-close="true"] chelsea>img:last-child {
  opacity: 1;
}

@keyframes katSquish {
  0%, 100% {
    transform: scale(1, 1)translate(0, 0);
  }

  30% {
    transform: scale(1.3, 0.5) translate(0, 45px);
  }

  90% {
    transform: scale(0.9 1.1) translate(0, -5px);
  }
}

@keyframes chelseaReact {
  0%, 100% {
    transform: rotate3d(0, 1, 0, 0deg)
  }

  50% {
    transform: rotate3d(0, 1, 0, 180deg)
  }
}