/* The character is raster artwork; CSS only plays its four animation frames. */
.yoga-cat[hidden] { display: none !important; }
.cat-preference[hidden] { display: none; }
.yoga-cat {
  --cat-size: 180px;
  --cat-cycle: 3200ms;
  position: fixed;
  z-index: 4;
  width: var(--cat-size);
  pointer-events: none;
  opacity: 0;
  transform: translateY(48px) scale(.94);
  transition: opacity .5s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
  isolation: isolate;
}
.yoga-cat[data-side="left"] { transform: translateX(-70px) rotate(-9deg); }
.yoga-cat[data-side="right"] { transform: translateX(70px) rotate(9deg); }
.yoga-cat[data-side="top"] { transform: translateY(-65px) scale(.9); }
.yoga-cat.is-visible { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
.yoga-cat-sprite {
  width: var(--cat-size);
  height: var(--cat-size);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: drop-shadow(0 5px 4px #2d352c18);
}
.yoga-cat.is-visible .yoga-cat-sprite { animation: cat-frames var(--cat-cycle) steps(1, end) infinite; }
.yoga-cat-caption { text-align: center; padding: 0 4px; }
.yoga-cat-label {
  display: inline-block;
  max-width: 100%;
  padding: 4px 9px;
  background: #f6f3ecf5;
  border: 1px solid #d8d9cb;
  border-radius: 12px;
  color: #2d352c;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 2px 8px #28392e12;
}
.yoga-cat-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #d8d9cb;
  border-radius: 50%;
  background: #f6f3ec;
  color: #2d352c;
  font-size: 21px;
  line-height: 1;
  pointer-events: auto;
  box-shadow: 0 2px 8px #28392e12;
}
.cat-preference { display: block; margin-top: 10px; border: 0; border-bottom: 1px dotted currentColor; padding: 0 0 2px; background: none; font-size: 12px; }
@keyframes cat-frames {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  75% { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .yoga-cat, .yoga-cat[data-side] { transition: none; transform: none; }
  .yoga-cat.is-visible .yoga-cat-sprite { animation: none; }
}