/* Press: every click is felt.
 *
 * A control sinks while it is pressed and eases back to rest when released. It uses `scale`, a property of its own, so it stacks with any
 * transform or translate a control already has (hover lifts, centring). The
 * page script (base.html) holds .is-pressed for at least a beat, so even a
 * quick tap shows. This file loads last: the transition list below repeats
 * the properties these controls already animate, so nothing is lost.
 */

:root {
  --press-spring: var(--ease-out);  /* a soft stop on release, no overshoot */
}

html :is(
  .btn, .icon-btn, .header-link, .lang-switch a,
  .chip, .pager a, .subpage-tabs a, .issue-tile,
  .citation-tab, .citation-copy, .buy-cta, .search-filters button,
  .hero-search button, .pill-link, .crumbs a, .screen__next, .screens-nav a, .article-pager a,
  .door, .book-card, .jstand__link, .jpop__go, .jpop__close, .bshelf__link, .bpage__rail a, .bpage__order a, .bpager a, .bsearch__go, .jdp__tabs a, .jdp__subscribe, .jdp__latest, .pform__go, .acc-btn, .acc__tabs a, .acc__out, .acc-auth__alt, .cart__stepper button, .cart__remove button, .psearch__scope span, .about-copy, details.more > summary, details.doc > summary,
  .preader__back, .preader__close, .preader__toc button, .preader__turn a, .pscheme__part
) {
  -webkit-tap-highlight-color: transparent;
  transition:
    scale 0.3s var(--press-spring),
    filter 0.2s ease,
    transform var(--dur-short, 0.22s) var(--ease-out, ease-out),
    translate var(--dur-micro, 0.12s) var(--ease-out, ease-out),
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

/* how far each kind sinks: big surfaces barely, small round buttons the most */
html :is(.door, .book-card, .jstand__link, .bshelf__link, details.more > summary, details.doc > summary, .preader__turn a, .pscheme__part) { --press: 0.97; }
html :is(.icon-btn, .lang-switch a, .screen__next, .screens-nav a, .jpop__close) { --press: 0.88; }

html :is(
  .btn, .icon-btn, .header-link, .lang-switch a,
  .chip, .pager a, .subpage-tabs a, .issue-tile,
  .citation-tab, .citation-copy, .buy-cta, .search-filters button,
  .hero-search button, .pill-link, .screen__next, .screens-nav a, .article-pager a,
  .door, .book-card, .jstand__link, .jpop__go, .jpop__close, .bshelf__link, .bpage__rail a, .bpage__order a, .bpager a, .bsearch__go, .jdp__tabs a, .jdp__subscribe, .jdp__latest, .pform__go, .acc-btn, .acc__tabs a, .acc__out, .acc-auth__alt, .cart__stepper button, .cart__remove button, .psearch__scope span, .about-copy, details.more > summary, details.doc > summary, .preader__back, .preader__close, .preader__toc button, .preader__turn a, .pscheme__part
):is(:active, .is-pressed) {
  scale: var(--press, 0.94);
  filter: brightness(0.93);
  transition-duration: 0.08s, 0.08s, var(--dur-short, 0.22s), var(--dur-micro, 0.12s), 0.15s, 0.15s, 0.15s, 0.2s, 0.2s;
  transition-timing-function: ease-out;
}

/* without motion: no sinking, only a darker flash */
@media (prefers-reduced-motion: reduce) {
  html :is(
    .btn, .icon-btn, .header-link, .lang-switch a,
    .chip, .pager a, .subpage-tabs a, .issue-tile,
    .citation-tab, .citation-copy, .buy-cta, .search-filters button,
    .hero-search button, .pill-link, .screen__next, .screens-nav a, .article-pager a,
    .door, .book-card, .jstand__link, .jpop__go, .jpop__close, .bshelf__link, .bpage__rail a, .bpage__order a, .bpager a, .bsearch__go, .jdp__tabs a, .jdp__subscribe, .jdp__latest, .pform__go, .acc-btn, .acc__tabs a, .acc__out, .acc-auth__alt, .cart__stepper button, .cart__remove button, .psearch__scope span, .about-copy, details.more > summary, details.doc > summary, .preader__back, .preader__close, .preader__toc button, .preader__turn a, .pscheme__part
  ):is(:active, .is-pressed) { scale: none; filter: brightness(0.88); }
}