:where(a, button, summary.panel-button) {
  transition: transform 240ms ease-out, filter 240ms ease-out;
}
svg a { transform-box: fill-box; transform-origin: center; }
svg a .icon-wobble {
  transform-box: fill-box;
  transform-origin: center;
}
@media (hover: hover) {
  :where(a, button, summary.panel-button):not(:disabled, .skip-link, .runaway-button):hover {
    transform: translateY(-4px) rotate(-1deg);
    filter: drop-shadow(0 5px 2px #26243c30);
  }
  svg a:hover [data-icon=arrow] { translate: 4px 0; }
  svg a:hover .icon-wobble {
    animation: contact-wobble 1600ms ease-in-out 1;
  }
  .runaway-button:hover { filter: drop-shadow(0 3px 1px #26243c40); }
}
@keyframes contact-wobble {
  0%, 100% { translate: 0 0; }
  25% { translate: -1.5px 0; }
  60% { translate: 1.5px 0; }
  82% { translate: -0.6px 0; }
}
:where(a, button, summary.panel-button):not(:disabled, .skip-link, .runaway-button):active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  :where(a, button, summary.panel-button) { transition: none; }
  :where(a, button, summary.panel-button):not(:disabled, .skip-link, .runaway-button):is(:hover, :active) { transform: none !important; }
  svg a:hover [data-icon=arrow] { translate: none; }
  svg a .icon-wobble { animation: none !important; }
}