/* Keep hit targets still; animate their content rather than shrinking the tap area. */
@media(prefers-reduced-motion:no-preference){
 .card>.photo,.card>.card-body,.related-item>img,.related-item>div{transition:transform 110ms ease-out}
 .card.st-press>.photo{transform:scale(.985)}
 .card.st-press>.card-body,.related-item.st-press>div{transform:scale(.985)}
 .related-item.st-press>img{transform:scale(.975)}
 :is(button,a.btn,a.header-action,a.pf-shortcut,a.pf-service,.bottom-nav>a)>svg{transition:transform 110ms ease-out}
 :is(button,a.btn,a.header-action,a.pf-shortcut,a.pf-service).st-press>svg{transform:scale(.9)}
 :is(button,a.btn,a.header-action,a.pf-shortcut,a.pf-service).st-press{filter:brightness(.93)}
 #app>.bottom-nav .bn-icon{transition:transform 110ms ease-out,background 150ms ease-out}
 #app>.bottom-nav>.st-press .bn-icon{transform:scale(.92)}
 #listingPage>:is(.listing-top,.listing-gallery,.gallery-mobile-thumbs,.listing-columns,.listing-dock){animation:st-detail-enter 180ms ease-out}
}
@keyframes st-detail-enter{from{opacity:.3}to{opacity:1}}
/* Touch scroll/hover must not move the card or create an extra hover-only tap. */
@media(hover:none){.card:hover,.btn:hover{transform:none}.card:hover .photo img,.gallery-photo:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){
 .card,.card>.photo,.card>.card-body,.card .photo img,.related-item>img,.related-item>div,
 #app>.bottom-nav .bn-icon,button,a.btn,a.header-action,a.pf-shortcut,a.pf-service{transition:none!important}
 #listingPage>:is(.listing-top,.listing-gallery,.gallery-mobile-thumbs,.listing-columns,.listing-dock){animation:none}
 .card:hover,.btn:hover,.card:hover .photo img,.gallery-photo:hover img{transform:none}
}