/* HOVER ANIMATION */

@keyframes hover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* LOOK TOWARD THE OPEN CORNER
   animation.js puts an animate-<corner> class on #hero__animation__img when a
   corner opens and a reverse-animate-<corner> class while it closes. The
   avatar's head, face and pupils move toward that corner; the transitions
   below play the movement both ways, so the reverse classes need no rules. */

.avatar__head,
.avatar__look,
.avatar__pupils {
  transform-box: view-box;
  transform-origin: 100px 110px;
  transition: transform 0.25s ease-in-out;
}

.animate-top-left .avatar__head {
  transform: translate(-4px, -3px) rotate(-6deg);
}
.animate-top-left .avatar__look {
  transform: translate(-6px, -5px);
}
.animate-top-left .avatar__pupils {
  transform: translate(-3px, -3px);
}

.animate-top-right .avatar__head {
  transform: translate(4px, -3px) rotate(6deg);
}
.animate-top-right .avatar__look {
  transform: translate(6px, -5px);
}
.animate-top-right .avatar__pupils {
  transform: translate(3px, -3px);
}

.animate-bottom-left .avatar__head {
  transform: translate(-4px, 3px) rotate(5deg);
}
.animate-bottom-left .avatar__look {
  transform: translate(-6px, 5px);
}
.animate-bottom-left .avatar__pupils {
  transform: translate(-3px, 3px);
}

.animate-bottom-right .avatar__head {
  transform: translate(4px, 3px) rotate(-5deg);
}
.animate-bottom-right .avatar__look {
  transform: translate(6px, 5px);
}
.animate-bottom-right .avatar__pupils {
  transform: translate(3px, 3px);
}

@media (prefers-reduced-motion: reduce) {
  #hero__animation {
    animation: none;
  }

  .avatar__head,
  .avatar__look,
  .avatar__pupils {
    transition: none;
  }
}