/* piggy */
.piggy {
	position: absolute;
	width: 60vw;
	height: 60vw;
	user-select: none;
	pointer-events: none;
	right: 0vw;
  bottom: 0vh;
  translate: 0 100vh;
  transition: opacity 0.5s ease, visibility 0.5s;
  animation: entrancePiggy 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 100;
  max-width: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.piggy > * {
	position: absolute;
}

.piggy .eyes {
	will-change: left, top;
	transition: transform 0.12s ease-out;
}

.piggy .nose {
	cursor: grab;
}

.piggy .glasses {
	cursor: grab;
}

.piggy .glassesCracks {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.hitbox {
  position: absolute;
  pointer-events: auto;
  cursor: grab;

  /* debug */
  /* background: rgba(255, 0, 0, 0.3); */
}

.hitboxUnhittable {
  cursor: none;
  pointer-events: none;
}

.nose-hitbox {
  width: 34%;
  height: 25%;
  left: 33%;
  top: 45%;
  border-radius: 100% 100% 70% 70%; 
}

.glasses-hitbox {
  position: absolute;
  pointer-events: auto;
  cursor: crosshair;
  
  width: 35%;
  height: 35%;
  border-radius: 40% 40% 80% 80%;
}

.glasses-hitbox-1 {
  left: 12.5%;
  top: 22%;
}

.glasses-hitbox-2 {
  left: 52.5%;
  top: 22%;
}

.ears-hitbox {
  position: absolute;
  pointer-events: auto;

  width: 28%;
  height: 20%;
}

.ears-hitbox-1 {
  top: 10%;
  left: 5%;
  transform: rotate(-45deg);
  border-radius: 300% 200% 100% 200%;
}

.ears-hitbox-2 {
  top: 10%;
  left: 67.5%;
  transform: rotate(45deg);
  border-radius: 200% 300% 200% 100%;
}

/* Animations */
/* anim classes */
.hearteyes {
	animation: PulseHeartEyes 0.5s ease-out;
}

.snoutWiggle {
	animation: wobbleSnout 0.5s ease;
}

.wobbleEar {
  animation: wobbleEar 0.5s ease;
}

@media (max-aspect-ratio: 1500/1300) {
  .piggy {
    opacity: 0;
    width: 100vw;
    height: 45vw;
    right: 0vw;
    bottom: 10vh;
    translate: 0 100vh;
    transition: none;
  }
  .hitbox {
    pointer-events: none;
    cursor: none;
  }
}

/* animations */
@keyframes PulseHeartEyes{0%,100%{scale:1.0}50%{scale:1.1}}

/* ----------------------------------------------
 * Generated by Animista on 2026-4-8 12:41:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@keyframes wobbleSnout{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobbleEar{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-7.5px) rotate(-1.5deg);transform:translateX(-7.5px) rotate(-1.5deg)}30%{-webkit-transform:translateX(3.75px) rotate(1.5deg);transform:translateX(3.75px) rotate(1.5deg)}45%{-webkit-transform:translateX(-3.75px) rotate(-.9deg);transform:translateX(-3.75px) rotate(-.9deg)}60%{-webkit-transform:translateX(2.25px) rotate(.6deg);transform:translateX(2.25px) rotate(.6deg)}75%{-webkit-transform:translateX(-1.5px) rotate(-.3deg);transform:translateX(-1.5px) rotate(-.3deg)}}@keyframes entrancePiggy{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-100vh);transform:translateY(-100vh)}}