/* ============================================================================
 * public/tapfx.css —— 图标「浮起」触摸特效（2026-09-17 · 开发员17号）
 *
 * 独立文件、排在 style.css 与各功能样式之后加载（铁律：改别人的样式别动 style.css）。
 *
 * 只做一件事：让图标在「手指滑过 / 按下 / 鼠标悬停」时顶起来。
 *   · 基础态只加 transition（这三个类在 style.css 里**没有** transition，不会覆盖别人的）
 *   · 变形**只发生在 .tapfx-up 这个类上**（由 tapfx.js 加/删），绝不改常态样式
 *   · 用 filter: drop-shadow 而非 box-shadow —— 图标自带 box-shadow，用后者会把它覆盖掉
 * ========================================================================== */

.func-ico,
.af-ico,
.tab-ico {
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.3), filter 0.15s ease;
  transform-origin: 50% 60%;          /* 从偏下起，像被手指顶起来 */
}

.func-ico.tapfx-up,
.af-ico.tapfx-up,
.tab-ico.tapfx-up {
  transform: translateY(-3px) scale(1.14);
  filter: drop-shadow(0 7px 9px rgba(249, 89, 1, 0.34)) brightness(1.06);
}

/* 列表里的小图标别顶太狠（40px 的小图标放大 1.14 会显得跳） */
.af-ico.tapfx-up,
.tab-ico.tapfx-up {
  transform: translateY(-3px) scale(1.1);
}

/* ---- 桌面：鼠标悬停同样浮起（触摸设备上 :hover 会粘住，所以限定 hover 能力）---- */
@media (hover: hover) {
  .func-ico:hover,
  .af-ico:hover,
  .tab-ico:hover {
    transform: translateY(-3px) scale(1.12);
    filter: drop-shadow(0 7px 9px rgba(249, 89, 1, 0.3)) brightness(1.05);
  }
}

/* ---- 尊重系统的「减少动态效果」 ---- */
@media (prefers-reduced-motion: reduce) {
  .func-ico, .af-ico, .tab-ico { transition: none; }
  .func-ico.tapfx-up, .af-ico.tapfx-up, .tab-ico.tapfx-up,
  .func-ico:hover, .af-ico:hover, .tab-ico:hover {
    transform: none;
    filter: none;
  }
}