/* ============================================================
 * 红豆商城 · 全局交互反馈层（v46）
 * 入口页 + 商城的每一页都加载，且放在全部样式表最后。
 *
 * 1. 关掉移动端浏览器「点哪儿哪儿亮一块」的蓝色/灰色高亮（tap-highlight）
 *    —— 入口页 / 商城 / 后台统一，不再出现难看的蓝块
 * 2. 键盘可达性保留：只有鼠标/触摸点出来的焦点才不画外框（:focus-visible）
 * 3. Material 风格点击波纹 .hd-ripple（由 shop/assets/js/ui.js 生成元素）
 * 4. 全部可点元素统一的按压反馈：缩放 + 底色/亮度变化，一眼能看见
 * ============================================================ */

/* ---- 1. 点击高亮：全站关掉（入口页原来漏了这条，导致点按钮还冒蓝块） ---- */
html, body { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-touch-callout: none; }
:focus:not(:focus-visible) { outline: none; }

/* ---- 2. 点击波纹：从手指/鼠标按下的那个点扩散 ----
 * 颜色与强度按场景分：浅底元素用「深色低透明度」，深底/主色元素用白色高一点的透明度。
 * 不透明度用「先保持、后衰减」——整段线性淡出的话，等圆圈长大时已经快透明了。
 * 通过 CSS 变量出参，宿主元素只需要覆盖 --rip-* 三个值。 */
.hd-ripple {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: var(--rip-bg, currentColor);
    transform: scale(0);
    animation: hd-ripple-out .6s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes hd-ripple-out {
    0%   { transform: scale(0);   opacity: var(--rip-op, .18); }
    55%  { transform: scale(.82); opacity: var(--rip-mid, .15); }
    100% { transform: scale(1);   opacity: 0; }
}
/* 深底元素（填充按钮 / 主色胶囊 / hero 按钮）上换白色波纹，亮一点才看得见。
 * 注意 nav-pill-accent 是「浅底主色字」，用默认深色波纹即可。 */
.btn-primary, .btn-gradient, .chip.is-primary, .isekai-hero-link {
    --rip-bg: #fff; --rip-op: .42; --rip-mid: .34;
}

/* ---- 3. 按压反馈：所有可点元素 ----
 * v47：品牌 logo、汉堡菜单、规格选择、数量加减、分享、支付方式、展开全文、
 * 登录/注册页签、会员中心快捷入口、hero 按钮 全部补齐（对应 ui.js 的选择器）。 */
.btn, .chip, .subcat, .nav-pill, .nav-icon-btn, .nav-toggle, .navbar-brand,
.hd-skin-fab, .hd-skin-item, .skin-menu__item, .layout-menu__item, .drawer-link,
.account-tabs button, .auth-tabs button, .amt-chip, .pay, .pay-method, .variant-item,
.change-num-sub, .change-num-add, .desc-more, .shared-button, .acc-quick__item,
.theme-seg__btn, .msg-item, [data-tab], .isekai-hero-link, .item-card, .link-card, .promo-banner {
    transition: transform .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                background-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                border-color .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                box-shadow .14s var(--ease, cubic-bezier(.22, .61, .36, 1)),
                opacity .14s var(--ease, cubic-bezier(.22, .61, .36, 1));
}
.btn:active { transform: scale(.95); }
.chip:active, .subcat:active, .nav-pill:active { transform: scale(.92); }
.nav-icon-btn:active, .nav-toggle:active, .hd-skin-fab:active, .hd-skin-item:active,
.drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
.account-tabs button:active, .auth-tabs button:active, .amt-chip:active, .pay:active,
.pay-method:active, .variant-item:active, .acc-quick__item:active { transform: scale(.94); }
.change-num-sub:active, .change-num-add:active, .shared-button:active { transform: scale(.9); }
.theme-seg__btn:active { transform: scale(.9); }
.desc-more:active { transform: scale(.97); }
.msg-item:active { transform: scale(.992); }
[data-tab]:active { transform: scale(.97); }
.navbar-brand:active, .isekai-hero-link:active { transform: scale(.96); }
.item-card:active, .link-card:active, .promo-banner:active { transform: scale(.97); }
.item-card:active { background: var(--surface-2); border-color: var(--line-2); }
.chip:active, .subcat:active { background: var(--accent-soft); }
.link-card:active { border-color: var(--card-color, var(--accent)); }
.promo-banner:active { border-color: var(--promo-color, var(--accent)); }
/* 填充按钮按下去压暗，描边/文字按钮按下去出底色 —— 每种都有明确反馈 */
.btn-primary:active, .btn-gradient:active { filter: brightness(.9); }
.btn-outline:active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.btn-text:active, .btn-ghost:active { background: var(--accent-soft); }
/* 图片类（不能装波纹子元素）：用透明度做按压反馈 */
.item-cover:active { opacity: .85; }
/* 行内文字链接（装不下波纹）：用变淡做反馈 */
.auth-guest a:active, .desc-scroll a:active, .footer a:active { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .hd-ripple { display: none; }
    .btn:active, .chip:active, .subcat:active, .nav-pill:active, .nav-icon-btn:active,
    .nav-toggle:active, .navbar-brand:active, .hd-skin-fab:active, .hd-skin-item:active,
    .drawer-link:active, .skin-menu__item:active, .layout-menu__item:active,
    .account-tabs button:active, .auth-tabs button:active, .item-card:active, .link-card:active,
    .promo-banner:active, .amt-chip:active, .pay:active, .pay-method:active, .variant-item:active,
    .change-num-sub:active, .change-num-add:active, .desc-more:active, .shared-button:active,
    .acc-quick__item:active, .isekai-hero-link:active, .theme-seg__btn:active { transform: none; }
}