.sloth-hover { position:relative; }
.sloth-hover > .nav-sloth {
  position:absolute;
  width:38px;
  height:38px;
  left:50%;
  top:100%;
  z-index:5;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-7px) scale(.7) rotate(-9deg);
  transform-origin:50% 20%;
  transition:opacity 160ms ease, transform 280ms cubic-bezier(.2,.8,.2,1.3);
}
:is(.wordmark,.brand).sloth-hover > .nav-sloth { left:87%; width:44px; height:44px; }
.nav-sloth .sloth-wave { transform-box:view-box; transform-origin:45px 44px; }
@media (hover:hover) {
  .sloth-hover:hover > .nav-sloth { opacity:1; transform:translate(-50%,0) scale(1) rotate(4deg); }
  .sloth-hover:hover .sloth-wave { animation:sloth-wave 650ms ease-in-out 2; }
}
.sloth-hover:focus-visible > .nav-sloth { opacity:1; transform:translate(-50%,0) scale(1); }
@keyframes sloth-wave { 0%,100% { transform:rotate(0); } 50% { transform:rotate(18deg); } }
@media (prefers-reduced-motion:reduce) {
  .sloth-hover > .nav-sloth { transition:none; }
  .sloth-hover:hover .sloth-wave { animation:none; }
}
@media print { .nav-sloth { display:none; } }