* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.cursorpet-stage {
  width: 256px;
  height: 256px;
  position: relative;
}

.cursorpet-widget {
  width: 256px;
  height: 256px;
  position: relative;
  overflow: hidden;
  transform-origin: top left;

  --head-x: 0deg;
  --head-y: 0deg;
  --eye-x: 0px;
  --eye-y: 0px;
}

.cursorpet-widget .ear,
.cursorpet-widget .eye,
.cursorpet-widget .nose,
.cursorpet-widget .mouth,
.cursorpet-widget .muzzle,
.cursorpet-widget .beak,
.cursorpet-widget .body,
.cursorpet-widget .belly,
.cursorpet-widget .chest,
.cursorpet-widget .paw,
.cursorpet-widget .foot,
.cursorpet-widget .talon,
.cursorpet-widget .leg,
.cursorpet-widget .toe {
  transition:
    translate .14s ease,
    rotate .14s ease,
    scale .14s ease,
    filter .14s ease,
    opacity .14s ease;
}

.cursorpet-widget.region-ears .ear {
  translate: 0 -3px;
  scale: 1.025;
  filter:
    brightness(1.06)
    saturate(1.04)
    drop-shadow(0 0 4px rgba(255, 255, 255, .18));
}

.cursorpet-widget.region-ears .ear.left {
  rotate: -3deg;
}

.cursorpet-widget.region-ears .ear.right {
  rotate: 3deg;
}

.cursorpet-widget.region-face .eye,
.cursorpet-widget.region-face .nose,
.cursorpet-widget.region-face .mouth,
.cursorpet-widget.region-face .muzzle,
.cursorpet-widget.region-face .beak {
  translate: 0 -1px;
  filter:
    brightness(1.07)
    saturate(1.05)
    drop-shadow(0 0 4px rgba(255, 255, 255, .16));
}

.cursorpet-widget.region-face .nose,
.cursorpet-widget.region-face .beak {
  animation: cursorpet-boop .32s ease-out;
}

.cursorpet-widget.region-face .eye {
  scale: 1.04;
}

.cursorpet-widget.region-torso .body,
.cursorpet-widget.region-torso .belly,
.cursorpet-widget.region-torso .chest {
  scale: 1.012 .985;
  translate: 0 2px;
  filter:
    brightness(1.04)
    saturate(1.03)
    drop-shadow(0 0 5px rgba(255, 255, 255, .13));
}

.cursorpet-widget.region-feet .paw,
.cursorpet-widget.region-feet .foot,
.cursorpet-widget.region-feet .talon,
.cursorpet-widget.region-feet .leg,
.cursorpet-widget.region-feet .toe {
  animation: cursorpet-foot-wiggle .34s ease-out;
  filter:
    brightness(1.05)
    saturate(1.04)
    drop-shadow(0 0 4px rgba(255, 255, 255, .14));
}

.cursorpet-widget.region-feet .paw.left,
.cursorpet-widget.region-feet .foot.left,
.cursorpet-widget.region-feet .talon.left,
.cursorpet-widget.region-feet .leg.left {
  translate: -2px -2px;
}

.cursorpet-widget.region-feet .paw.right,
.cursorpet-widget.region-feet .foot.right,
.cursorpet-widget.region-feet .talon.right,
.cursorpet-widget.region-feet .leg.right {
  translate: 2px -2px;
}

@keyframes cursorpet-boop {
  0%,
  100% {
    scale: 1;
  }

  45% {
    scale: 1.16;
  }
}

@keyframes cursorpet-foot-wiggle {
  0%,
  100% {
    rotate: 0deg;
  }

  35% {
    rotate: -4deg;
  }

  70% {
    rotate: 3deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursorpet-widget .ear,
  .cursorpet-widget .eye,
  .cursorpet-widget .nose,
  .cursorpet-widget .mouth,
  .cursorpet-widget .muzzle,
  .cursorpet-widget .beak,
  .cursorpet-widget .body,
  .cursorpet-widget .belly,
  .cursorpet-widget .chest,
  .cursorpet-widget .paw,
  .cursorpet-widget .foot,
  .cursorpet-widget .talon,
  .cursorpet-widget .leg,
  .cursorpet-widget .toe {
    animation: none;
    transition: filter .14s ease, opacity .14s ease;
  }

  .cursorpet-widget.region-ears .ear,
  .cursorpet-widget.region-face .eye,
  .cursorpet-widget.region-face .nose,
  .cursorpet-widget.region-face .mouth,
  .cursorpet-widget.region-face .muzzle,
  .cursorpet-widget.region-face .beak,
  .cursorpet-widget.region-torso .body,
  .cursorpet-widget.region-torso .belly,
  .cursorpet-widget.region-torso .chest,
  .cursorpet-widget.region-feet .paw,
  .cursorpet-widget.region-feet .foot,
  .cursorpet-widget.region-feet .talon,
  .cursorpet-widget.region-feet .leg,
  .cursorpet-widget.region-feet .toe {
    translate: none;
    rotate: none;
    scale: none;
  }
}