.menu-motion-icon {
  transition: transform 160ms ease-out;
}

.menu-motion-icon path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 280ms cubic-bezier(.2, .75, .25, 1), opacity 150ms ease-out;
}

[aria-expanded="true"] > .menu-motion-icon path:nth-child(1) {
  transform: rotate(45deg) translateY(6px);
}

[aria-expanded="true"] > .menu-motion-icon path:nth-child(2) {
  opacity: 0;
  transform: scaleX(.25);
}

[aria-expanded="true"] > .menu-motion-icon path:nth-child(3) {
  transform: rotate(-45deg) translateY(-6px);
}

:is(.menu-toggle, .mobile-menu):active > .menu-motion-icon {
  transform: scale(.9);
}

@media (prefers-reduced-motion: reduce) {
  .menu-motion-icon,
  .menu-motion-icon path {
    transition: none;
  }

  :is(.menu-toggle, .mobile-menu):active > .menu-motion-icon {
    transform: none;
  }
}