/* 05 — Casey: paw cursor, falling spine and a small paper-dust impact. */
.book-cat,
.book-cat * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%231b1915'%3E%3Cellipse cx='15' cy='19' rx='6.8' ry='5.6' transform='rotate(-8 15 19)'/%3E%3Cellipse cx='7.7' cy='10' rx='3' ry='3.8' transform='rotate(-28 7.7 10)'/%3E%3Cellipse cx='13' cy='6.7' rx='3' ry='3.8' transform='rotate(-7 13 6.7)'/%3E%3Cellipse cx='18.7' cy='7.4' rx='3' ry='3.8' transform='rotate(12 18.7 7.4)'/%3E%3Cellipse cx='23.1' cy='11.5' rx='2.8' ry='3.6' transform='rotate(30 23.1 11.5)'/%3E%3C/g%3E%3C/svg%3E") 15 16, pointer;
}

.book-cat {
  isolation: isolate;
  overflow: visible;
  transform-origin: calc(100% - 2px) calc(100% - 2px);
  will-change: transform, filter;
}

.book-cat .cat-emoji {
  display: grid;
  width: 10px;
  height: 10px;
  place-items: center;
  color: rgba(42,29,13,.74);
  font-size: 9px;
  line-height: 1;
  opacity: .72;
  filter: grayscale(1) contrast(1.65) brightness(.62);
  text-shadow:
    -.7px -.7px 0 rgba(46,30,12,.48),
    .8px .8px 0 rgba(229,197,137,.5),
    0 1.5px 1px rgba(43,28,11,.16);
  transform: translateY(.5px) scale(.96);
}

.book-cat:hover:not(.is-falling),
.book-cat:focus-visible:not(.is-falling) {
  transform: translateY(-8px) rotate(-1.5deg);
}

.shelf-book.book-cat.is-falling {
  z-index: 150;
  pointer-events: none;
  animation: cat-book-fall 1.68s linear both;
}

@keyframes cat-book-fall {
  0% {
    filter: drop-shadow(5px 5px 2px rgba(56,43,27,.12));
    transform: translate(0, 0) rotate(0);
  }
  11% {
    transform: translate(-1px, -1px) rotate(-1deg);
  }
  24% {
    transform: translate(0, 0) rotate(5deg);
  }
  48% {
    filter: drop-shadow(12px 10px 6px rgba(56,43,27,.19));
    transform: translate(1px, 0) rotate(40deg);
  }
  66% {
    filter: drop-shadow(8px 6px 3px rgba(56,43,27,.17));
    transform: translate(3px, 0) rotate(81deg);
  }
  74% {
    filter: drop-shadow(3px 3px 1px rgba(56,43,27,.14));
    transform: translate(4px, 1px) rotate(90.8deg);
  }
  81% {
    transform: translate(4px, 1px) rotate(89.25deg);
  }
  88% {
    transform: translate(4px, 1px) rotate(90.25deg);
  }
  94% {
    transform: translate(4px, 1px) rotate(89.9deg);
  }
  100% {
    filter: drop-shadow(3px 3px 1px rgba(56,43,27,.14));
    transform: translate(4px, 1px) rotate(90deg);
  }
}

.cat-dust {
  position: absolute;
  z-index: 8;
  right: -8px;
  bottom: -5px;
  width: 32px;
  height: 24px;
  overflow: visible;
  pointer-events: none;
  transform-origin: right bottom;
}

.cat-dust i {
  --dust-x: -34px;
  --dust-y: -10px;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(128,119,103,.34) 0 28%, rgba(142,132,113,.2) 48%, transparent 74%);
  filter: blur(3px);
  mix-blend-mode: multiply;
  opacity: 0;
}

.cat-dust i:nth-child(2) { --dust-x: 30px; --dust-y: -8px; width: 31px; height: 17px; }
.cat-dust i:nth-child(3) { --dust-x: -18px; --dust-y: -27px; width: 22px; height: 14px; }
.cat-dust i:nth-child(4) { --dust-x: 48px; --dust-y: -19px; width: 29px; height: 16px; }
.cat-dust i:nth-child(5) { --dust-x: 7px; --dust-y: -34px; width: 25px; height: 18px; }
.cat-dust i:nth-child(6) { --dust-x: 61px; --dust-y: -4px; width: 20px; height: 12px; }

.book-cat.is-falling .cat-dust {
  animation: cat-dust-level 1.68s linear both;
}

.book-cat.is-falling .cat-dust i {
  animation: cat-dust-scatter .72s ease-out .82s both;
}

.book-cat.is-falling .cat-dust i:nth-child(2) { animation-delay: .86s; }
.book-cat.is-falling .cat-dust i:nth-child(3) { animation-delay: .8s; }
.book-cat.is-falling .cat-dust i:nth-child(4) { animation-delay: .88s; }
.book-cat.is-falling .cat-dust i:nth-child(5) { animation-delay: .84s; }
.book-cat.is-falling .cat-dust i:nth-child(6) { animation-delay: .9s; }

@keyframes cat-dust-level {
  0%, 64% { transform: rotate(0); }
  74%, 100% { transform: rotate(-90deg); }
}

@keyframes cat-dust-scatter {
  0% { opacity: 0; filter: blur(2px); transform: translate(0, 0) scale(.25); }
  16% { opacity: .48; }
  56% { opacity: .24; }
  100% { opacity: 0; filter: blur(7px); transform: translate(var(--dust-x), var(--dust-y)) scale(2.25); }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-book.book-cat.is-falling,
  .book-cat.is-falling .cat-dust,
  .book-cat.is-falling .cat-dust i {
    animation-duration: .01ms;
    animation-delay: 0s;
  }
}