/*!
 * web/assets/css/index/09-anim-layer.css
 * WorkBuddy 动画增强层 / tab 选中态
 *
 * 本文件由 tools/split_spa.py 从单文件 SPA 机械拆出，请勿手工改动切分边界。
 * 加载顺序由入口 HTML 统一控制（经典 script 共享全局词法环境）。
 */

/* ===== WorkBuddy 交互动画增强层 ===== */
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }
.sidebar-nav li,.mobile-tab a{transition:background-color .2s ease,color .2s ease,transform .12s ease}
.sidebar-nav li:active,.mobile-tab a:active{transform:scale(.97)}
/* #507：tab 选中态统一（与 admin 一致）——主色高亮 + 加粗 + 未选中弱化 */
@keyframes wbFade{from{opacity:0}to{opacity:1}}
@keyframes wbPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
/* 2026-09-12 弹层交互动画统一：进出成对定义。
   旧实现只有 `wbFade`/`wbPop`（纯「进入」语义），关闭那一帧没有对应 keyframes，
   于是「打开有动画、关闭没有」——补上 Out/缩放成对关键帧后双向都有反馈。
   注意：成对的关键帧必须同时存在，只加一个方向等于没加。 */
@keyframes wbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wbFadeOut{from{opacity:1}to{opacity:0}}
@keyframes wbZoomIn{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes wbZoomOut{from{transform:scale(1)}to{transform:scale(.95)}}
@keyframes wbSlideDownIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes wbSlideDownOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}
.active,.is-active,[aria-selected="true"]{transition:background-color .2s ease,color .2s ease,border-color .2s ease}

/* #754/#756：按压/悬浮反馈原来是**按类名点名的清单**（见 01-animations.css 那条
   `.el-card,.ep-cell,.pick-card,.shiprec,.sret-row,.item`）—— 新页面自造的卡片/行/胶囊一个都
   不在这份名单里，于是"点了没反应"是**默认结局**而不是谁漏写。改成行为类：谁可点谁挂。
   时长一律引用 01-animations.css 的动效令牌，不再各写各的字面量。
   transform 只在 :active 那一瞬挂，常态不挂 —— 常态 transform 会让节点自成堆叠上下文，
   浮层 z-index 就会莫名其妙失效（#69/#70 实测过的那条）。 */
.gp-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),
    background-color var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std),
    box-shadow var(--dur-base) var(--ease-std)}
.gp-tap:active{transform:scale(.97)}
/* 键盘可达性也算交互反馈：只用 :focus-visible，鼠标点完不留蓝框 */
.gp-tap:focus-visible{outline:2px solid var(--pc);outline-offset:2px}
.gp-tap[disabled],.gp-tap.is-disabled{cursor:not-allowed;opacity:.5}
/* 容器抬升只在真有悬停指针的设备上给。触屏不给 hover，否则点完会留一块下不去的高亮
   （触屏上"按下有反馈"由 :active 负责，不靠 hover）。 */
@media (hover:hover){
  .gp-lift{transition:transform var(--dur-base) var(--ease-std),box-shadow var(--dur-base) var(--ease-std)}
  .gp-lift:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
}