/* Gestures for the inline cat SVGs. Parts pivot from their own boxes. */

.cat {
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.cat .cat-paw-left,
.cat .cat-paw-right {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.cat .cat-eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.cat .cat-mouth-excited { display: none; }

.cat.is-excited .cat-mouth-idle,
.cat.is-happy .cat-mouth-idle,
.cat.is-perky .cat-mouth-idle { display: none; }

.cat.is-excited .cat-mouth-excited,
.cat.is-happy .cat-mouth-excited,
.cat.is-perky .cat-mouth-excited { display: inline; }

.cat.is-blinking .cat-eyes { transform: scaleY(.12); }

.cat.is-typing .cat-pads { display: none; }
.cat.is-typing .cat-paw-left { animation: cat-tap 260ms ease-in-out 5; }
.cat.is-typing .cat-paw-right { animation: cat-tap 260ms ease-in-out 130ms 5; }

.cat.is-leaning { transform: rotate(-5deg) translateX(-6px); }

.cat.is-happy { animation: cat-hop 900ms cubic-bezier(.3, .7, .3, 1); }

/* Matches the app's tap pose: the paw compresses toward its base. */
@keyframes cat-tap {
  0%, 100% { transform: none; }
  50% { transform: scaleY(.66); }
}

@keyframes cat-hop {
  0%, 100% { transform: none; }
  30% { transform: translateY(-14px) scale(1.03, .98); }
  55% { transform: translateY(0) scale(1.02, .97); }
  75% { transform: translateY(-4px); }
}

.cat-heart {
  position: absolute;
  left: 50%;
  top: 8%;
  color: #ef6f95;
  font-size: 28px;
  pointer-events: none;
  animation: cat-heart 1000ms ease-out forwards;
}

@keyframes cat-heart {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -40px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .cat,
  .cat.is-leaning,
  .cat.is-happy { transform: none; animation: none; transition: none; }
  .cat.is-typing .cat-paw-left,
  .cat.is-typing .cat-paw-right { animation: none; }
  .cat-heart { animation-duration: 1ms; }
}
