/* Homepage cat (cat.js). Everything is prefixed m2cat- so nothing leaks into the page. */
.m2cat-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.m2cat,
.m2cat-treat,
.m2cat-fx {
  position: absolute;
  left: 0;
  top: 0;
}

.m2cat {
  width: clamp(100px, 13vw, 150px);
  aspect-ratio: 4 / 3;
  /* Paws sit at y=140 of the 150-unit viewBox */
  transform-origin: 50% 93.333%;
  will-change: transform;
}

.m2cat svg,
.m2cat-treat svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Only the painted cat is clickable; the empty corners of its box still drop treats */
.m2cat svg {
  pointer-events: none;
}

.m2cat svg * {
  pointer-events: visiblePainted;
  cursor: pointer;
}

.m2cat svg .m2cat-shadow {
  pointer-events: none;
}

.m2cat-treat {
  width: 22px;
  height: 13px;
  margin: -12px 0 0 -11px;
}

.m2cat-treat svg {
  filter: drop-shadow(0 2px 1.5px rgb(0 0 0 / 0.45));
  animation: m2cat-drop 0.6s ease-in both;
}

.m2cat-treat.is-eaten svg {
  animation: m2cat-eaten 0.6s ease-in forwards;
}

.m2cat-fx {
  z-index: 100000;
  font: 700 15px/1 system-ui, sans-serif;
  color: #ff86b0;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  animation: m2cat-float 1.5s ease-out forwards;
}

.m2cat-fx.is-z {
  color: #c3d0dd;
  font-size: 13px;
  font-style: italic;
  animation-duration: 2.4s;
}

.m2cat-fx.is-alert {
  color: #ffd166;
  font-size: 20px;
  animation: m2cat-pop 0.8s ease-out forwards;
}

@keyframes m2cat-drop {
  0% { transform: translateY(calc(-1 * var(--drop, 50px))) rotate(-30deg); opacity: 0; }
  15% { opacity: 1; }
  65% { transform: translateY(0) rotate(10deg); }
  80% { transform: translateY(-6px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes m2cat-eaten {
  to { transform: translateY(-4px) scale(0.2); opacity: 0; }
}

@keyframes m2cat-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -46px) scale(1.15); }
}

@keyframes m2cat-pop {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.4); }
  25% { opacity: 1; transform: translate(-50%, -6px) scale(1.2); }
  70% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}

@media print {
  .m2cat-layer {
    display: none;
  }
}