/* Press-shrink card: the card's content shrinks to .96 under the pointer and back, on a .6s curve that barely
   moves for its first third. Measured from the Moka Framer template's merch card (Card 2: the hover variant sets the
   inner "Content" layer to scale .96 on a .6s tween, ease cubic-bezier(.69,.07,.25,1.03)).
   Markup: <a class="psc" href="#"><div class="psc__body"> ...card... </div></a>
   The outer .psc is the hover target and never scales, so the hit area stays put while the content pulls in
   (no edge flicker with the pointer parked near a border). Touch: part.js adds .is-pressed while a finger is down. */
.psc {
  --psc-scale: .96;
  --psc-dur: .6s;
  --psc-ease: cubic-bezier(.69, .07, .25, 1.03);
  --psc-touch-dur: .3s;                       /* the press on touch (ours: a tap is too short for the .6s wind-up) */
  --psc-origin: 50% 50%;
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.psc__body {
  transform-origin: var(--psc-origin);
  transition: scale var(--psc-dur) var(--psc-ease);
}
@media (hover: hover) {
  .psc:hover .psc__body { scale: var(--psc-scale); }
}
.psc:focus-visible { outline: none; }
.psc:focus-visible .psc__body { scale: var(--psc-scale); outline: 3px solid currentColor; outline-offset: 4px; }
.psc.is-pressed .psc__body { scale: var(--psc-scale); transition-duration: var(--psc-touch-dur); }