/* site-button-wave-20260830
 * 参考 Uiverse 圆弧上涌按钮动效，颜色与中国书画石现有米白、棕金、朱红视觉统一。
 * 保留各页面既有尺寸、圆角和布局，只统一交互层。
 */
:root{
  --site-button-wave:#8b5e38;
  --site-button-wave-deep:#684328;
  --site-button-wave-soft:rgba(139,94,56,.10);
  --site-button-wave-text:#fffaf2;
  --site-button-focus:rgba(139,94,56,.18)
}

:where(
  button,
  a[class*="button"],
  label[class*="button"],
  a.member-primary,
  a.member-secondary,
  label.member-primary,
  label.member-secondary,
  .membership-hero>a,
  .orders-heading>a,
  .portal-empty>a,
  .order-help a,
  .order-card a,
  .order-detail-heading>a,
  .favorites-heading-actions a,
  .favorites-empty a,
  .history-item-actions a,
  .table-actions a,
  .dialog-actions a
):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)){
  --button-wave-fill:var(--site-button-wave);
  --button-wave-fill-deep:var(--site-button-wave-deep);
  --button-wave-soft:var(--site-button-wave-soft);
  --button-wave-hover-text:var(--site-button-wave-text);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:color .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease,background-color .24s ease
}

:where(
  button,
  a[class*="button"],
  label[class*="button"],
  a.member-primary,
  a.member-secondary,
  label.member-primary,
  label.member-secondary,
  .membership-hero>a,
  .orders-heading>a,
  .portal-empty>a,
  .order-help a,
  .order-card a,
  .order-detail-heading>a,
  .favorites-heading-actions a,
  .favorites-empty a,
  .history-item-actions a,
  .table-actions a,
  .dialog-actions a
):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog))::before,
:where(
  button,
  a[class*="button"],
  label[class*="button"],
  a.member-primary,
  a.member-secondary,
  label.member-primary,
  label.member-secondary,
  .membership-hero>a,
  .orders-heading>a,
  .portal-empty>a,
  .order-help a,
  .order-card a,
  .order-detail-heading>a,
  .favorites-heading-actions a,
  .favorites-empty a,
  .history-item-actions a,
  .table-actions a,
  .dialog-actions a
):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog))::after{
  content:"";
  position:absolute;
  left:50%;
  display:block;
  border-radius:50%;
  pointer-events:none;
  transform:translateX(-50%) scaleY(1) scaleX(1.25);
  transform-origin:center;
  z-index:-1
}

:where(
  button,
  a[class*="button"],
  label[class*="button"],
  a.member-primary,
  a.member-secondary,
  label.member-primary,
  label.member-secondary,
  .membership-hero>a,
  .orders-heading>a,
  .portal-empty>a,
  .order-help a,
  .order-card a,
  .order-detail-heading>a,
  .favorites-heading-actions a,
  .favorites-empty a,
  .history-item-actions a,
  .table-actions a,
  .dialog-actions a
):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog))::before{
  top:100%;
  width:142%;
  height:190%;
  background:var(--button-wave-soft);
  transition:top .5s .08s cubic-bezier(.55,0,.1,1),transform .5s .08s cubic-bezier(.55,0,.1,1),background-color .5s .08s cubic-bezier(.55,0,.1,1)
}

:where(
  button,
  a[class*="button"],
  label[class*="button"],
  a.member-primary,
  a.member-secondary,
  label.member-primary,
  label.member-secondary,
  .membership-hero>a,
  .orders-heading>a,
  .portal-empty>a,
  .order-help a,
  .order-card a,
  .order-detail-heading>a,
  .favorites-heading-actions a,
  .favorites-empty a,
  .history-item-actions a,
  .table-actions a,
  .dialog-actions a
):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog))::after{
  top:180%;
  width:165%;
  height:205%;
  background:var(--button-wave-fill);
  transform:translateX(-50%) scaleY(1) scaleX(1.45);
  transition:top .5s .08s cubic-bezier(.55,0,.1,1),transform .5s .08s cubic-bezier(.55,0,.1,1),background-color .5s .08s cubic-bezier(.55,0,.1,1)
}

@media(hover:hover){
  :where(
    button,
    a[class*="button"],
    label[class*="button"],
    a.member-primary,
    a.member-secondary,
    label.member-primary,
    label.member-secondary,
    .membership-hero>a,
    .orders-heading>a,
    .portal-empty>a,
    .order-help a,
    .order-card a,
    .order-detail-heading>a,
    .favorites-heading-actions a,
    .favorites-empty a,
    .history-item-actions a,
    .table-actions a,
    .dialog-actions a
  ):not(:disabled):not([aria-disabled="true"]):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)):hover{
    color:var(--button-wave-hover-text)!important;
    border-color:var(--button-wave-fill)!important
  }

  :where(
    button,
    a[class*="button"],
    label[class*="button"],
    a.member-primary,
    a.member-secondary,
    label.member-primary,
    label.member-secondary,
    .membership-hero>a,
    .orders-heading>a,
    .portal-empty>a,
    .order-help a,
    .order-card a,
    .order-detail-heading>a,
    .favorites-heading-actions a,
    .favorites-empty a,
    .history-item-actions a,
    .table-actions a,
    .dialog-actions a
  ):not(:disabled):not([aria-disabled="true"]):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)):hover::before{
    top:-35%;
    background:var(--button-wave-fill);
    transform:translateX(-50%) scaleY(1.3) scaleX(.8)
  }

  :where(
    button,
    a[class*="button"],
    label[class*="button"],
    a.member-primary,
    a.member-secondary,
    label.member-primary,
    label.member-secondary,
    .membership-hero>a,
    .orders-heading>a,
    .portal-empty>a,
    .order-help a,
    .order-card a,
    .order-detail-heading>a,
    .favorites-heading-actions a,
    .favorites-empty a,
    .history-item-actions a,
    .table-actions a,
    .dialog-actions a
  ):not(:disabled):not([aria-disabled="true"]):not(:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)):hover::after{
    top:-45%;
    background:var(--button-wave-fill-deep);
    transform:translateX(-50%) scaleY(1.3) scaleX(.8)
  }
}

:where(button,a[class*="button"],label[class*="button"],a.member-primary,a.member-secondary,label.member-primary,label.member-secondary):not(:disabled):not([aria-disabled="true"]):focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--site-button-focus)
}

/* 朱红语义：删除、退出和危险操作。 */
:where(.danger,[data-action="delete"],#logoutButton,.media-card button,.member-portal-logout){
  --button-wave-fill:#a3483c;
  --button-wave-fill-deep:#7f3029;
  --button-wave-soft:rgba(163,72,60,.10);
  --button-wave-hover-text:#fff9f5
}

/* 深色阅读器与后台深色侧栏使用米白反色。 */
:where(.reader-actions button,.sidebar nav button,.side-actions button){
  --button-wave-fill:#f0e5d6;
  --button-wave-fill-deep:#d8c1a5;
  --button-wave-soft:rgba(255,250,242,.10);
  --button-wave-hover-text:#30271f
}

/* 纯图标、封面卡片及头像菜单保留原交互，不叠加圆弧层。 */
:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)::before,
:where(.nav-toggle,.bookshelf-nav-toggle,.menu-button,.member-account-trigger,.member-account-menu-close,.member-account-backdrop,.member-account-logout,.icon-button,.detail-thumb,.magazine-card,.page-arrow,.consult-sheet-close,.stone-3d-close,.favorite-remove,#zoomButton,#closeDialog)::after{
  content:none!important
}

@media(prefers-reduced-motion:reduce){
  :where(button,a[class*="button"],label[class*="button"]){transition:none!important}
  :where(button,a[class*="button"],label[class*="button"])::before,
  :where(button,a[class*="button"],label[class*="button"])::after{transition:none!important}
}