/*
  The cursor is positioned through left/top instead of transform.
  This is intentional: scaling a translated parent made right-clicks pull the
  old paw toward the top-left corner of the viewport.
*/
.cursor-paw {
  position: fixed;
  left: -100px;
  top: -100px;
  width: 52px;
  height: 58px;
  display: block;
  z-index: 9999;
  pointer-events: none;
  transform: none !important;
  scale: 1 !important;
  filter: none;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: left, top;
}

.cursor-paw.is-visible { opacity: .82; }

.paw-art {
  position: relative;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(2px 0 0 rgba(44, 15, 58, .95))
    drop-shadow(-2px 0 0 rgba(44, 15, 58, .95))
    drop-shadow(0 2px 0 rgba(44, 15, 58, .95))
    drop-shadow(3px 4px 0 rgba(255, 126, 0, .68));
  transform-origin: 8px 7px;
  transition: filter 90ms ease, opacity 90ms ease;
}

.paw-toe,
.paw-pad {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, #fff6da 0 14%, #ffb5ce 15% 45%, #ff6d9f 46% 74%, #d63f86 75% 100%);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.56), inset -3px -3px 0 rgba(111,25,100,.42);
}

.paw-toe::after,
.paw-pad::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,.92);
  box-shadow: 4px 0 rgba(255,255,255,.35);
}

.paw-toe {
  width: 13px;
  height: 16px;
  clip-path: polygon(25% 0,75% 0,75% 12.5%,100% 12.5%,100% 75%,75% 75%,75% 100%,25% 100%,25% 87.5%,0 87.5%,0 25%,25% 25%);
}

.paw-toe::after { left: 3px; top: 3px; }
.paw-toe--one { left: 2px; top: 16px; transform: rotate(-24deg); }
.paw-toe--two { left: 12px; top: 3px; transform: rotate(-8deg); }
.paw-toe--three { left: 27px; top: 2px; transform: rotate(9deg); }
.paw-toe--four { left: 39px; top: 14px; transform: rotate(25deg); }

.paw-pad {
  left: 11px;
  top: 23px;
  width: 32px;
  height: 31px;
  clip-path: polygon(25% 0,75% 0,75% 10%,88% 10%,88% 20%,100% 20%,100% 65%,88% 65%,88% 80%,75% 80%,75% 90%,62% 90%,62% 100%,38% 100%,38% 90%,25% 90%,25% 80%,12% 80%,12% 65%,0 65%,0 25%,12% 25%,12% 10%,25% 10%);
}

.paw-pad::after { left: 8px; top: 7px; }

.paw-spark {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  background: #fff7b2;
  box-shadow: 0 -4px #fff7b2, 0 4px #fff7b2, -4px 0 #fff7b2, 4px 0 #fff7b2;
  opacity: .9;
  animation: pawTwinkle 900ms steps(2, end) infinite;
}

.paw-spark--one { right: 1px; top: 3px; }
.paw-spark--two { left: 2px; bottom: 5px; animation-delay: -450ms; scale: .65; }

.cursor-paw.tap .paw-art {
  transform: translateY(2px);
  filter:
    drop-shadow(1px 0 0 rgba(44, 15, 58, .95))
    drop-shadow(-1px 0 0 rgba(44, 15, 58, .95))
    drop-shadow(0 1px 0 rgba(44, 15, 58, .95))
    drop-shadow(2px 2px 0 rgba(255, 126, 0, .62));
}

.cursor-paw.over-action .paw-art { filter: drop-shadow(0 0 6px #fff7b2) drop-shadow(3px 4px 0 rgba(72, 32, 95, .82)); }

@keyframes pawTwinkle { 50% { opacity: .2; } }

@media (pointer: coarse), (max-width: 800px) {
  .cursor-paw { display: none; }
}