/* HFC default press feedback. Every button and button-like link gets it:
   a quick squeeze on press plus a ripple from the touch point.
   Opt an element in with .tap if it isn't a .btn or <button>. */
.btn, button, .tap {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .14s cubic-bezier(.2, .8, .2, 1), background-color .15s ease, color .15s ease;
}
.is-pressed { transform: scale(.95); }
.tap.is-pressed { transform: scale(.92); }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  transform: scale(0);
  pointer-events: none;
  animation: hfc-ripple .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes hfc-ripple {
  to { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
  .is-pressed { transform: scale(.98); }
}