/*!
 * web/assets/css/index/01-animations.css
 * 全局交互动画 / 列表项进入 / 空状态
 *
 * 本文件由 tools/split_spa.py 从单文件 SPA 机械拆出，请勿手工改动切分边界。
 * 加载顺序由入口 HTML 统一控制（经典 script 共享全局词法环境）。
 */

/* 品牌色（--pc/--sc/--wc/--dc）是**大色块**用的：实心底、图标、选中条。
 * --p*ci 这一组是同色相的「墨色」，专给 12–14px 的文字和描边按钮用 ——
 * iOS 蓝 #007AFF 白底只有 4.02:1、EP 默认蓝 3.0:1，都不够 WCAG AA 的 4.5，
 * 所以文字必须走墨色。算法与实测见 14-ui-unify.css 第 6) 段和 tools/check_button_contrast.js。
 * --seg-on-bg / --seg-on-fg 是**反过来的那半**：不是「彩色的墨」而是「承住白字的彩色底」。
 * #304 之所以要单列一对：--pci 在暗色里被提亮成 #3596FF（为了让它是「深色页面上的蓝字」），
 * 但同一个值拿来当选中块底色时白字只剩 3.02:1（实测，不过 AA）——
 * 底和字必须成对定义，不能各自引用，否则换主题时其中一半必然失配。 */
:root{--pc:#007AFF;--sc:#34C759;--wc:#FF9500;--dc:#FF3B30;--tc:#1C1C1E;--ts:#636366;--bg:#F2F2F7;--cd:#FFF;--br:#E5E5EA;--cb:#F2F2F7;--rl:12px;--rm:8px;--rs:6px;--sh:0 2px 8px rgba(0,0,0,.06);--bd:#E5E5EA;--seg:#E5E5EA;--seg-active:#FFFFFF;--seg-on-bg:#0069DC;--seg-on-fg:#FFFFFF;--pci:#0069DC;--sci:#217D38;--wci:#9F5D00;--dci:#DB0C00;--ifi:#6A6D73;--dur-fast:.15s;--dur-base:.2s;--dur-slow:.3s;--ease-std:ease;--ease-out:ease-out;--sh-2:0 4px 16px rgba(0,0,0,.08)}
:root.dark{--tc:#F5F5F7;--ts:#8E8E93;--bg:#000;--cd:#1C1C1E;--sh:0 2px 8px rgba(0,0,0,.3);--bd:#38383A;--br:#38383A;--cb:#2C2C2E;--seg:#2C2C2E;--seg-active:#636366;--seg-on-bg:#3596FF;--seg-on-fg:#08203C;--pci:#3596FF;--sci:#34C759;--wci:#FF9500;--dci:#FF5E55;--ifi:#92959B}
:root.light{--tc:#1C1C1E;--ts:#636366;--bg:#F2F2F7;--cd:#FFF;--sh:0 2px 8px rgba(0,0,0,.06);--bd:#E5E5EA;--br:#E5E5EA;--cb:#F2F2F7;--seg-on-bg:#0069DC;--seg-on-fg:#FFFFFF;--pci:#0069DC;--sci:#217D38;--wci:#9F5D00;--dci:#DB0C00;--ifi:#6A6D73}
/* ===== 全局交互动画 ===== */
/* #754/#756：动效时长与缓动原来是**逐条写字面量**的（全库交互档 249 条声明散在 24 种取值上，
   0.12s/0.15s/0.18s/0.2s/0.22s/0.25s/0.28s/0.3s/0.32s/0.34s/0.35s/0.45s/0.5s/0.8s…），
   同一个"轻反馈"在不同页差出 6 倍时长，读起来就是"风格不一致"。这里立三档令牌 + 两条曲线，
   取值直接取现有**众数**（fast=.15s / base=.2s / slow=.3s），所以本文件换成引用令牌后
   计算值逐字未变 —— 令牌是先立规矩，不是顺手改观感。新写的交互档时长一律引用，不再写字面量。 */
*{transition:background-color var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std),
  color var(--dur-fast) var(--ease-std),opacity var(--dur-base) var(--ease-std),box-shadow var(--dur-base) var(--ease-std)}
.el-dialog,.el-drawer,.el-message-box,.el-popover,.ep-popup{animation:dialogFadeIn var(--dur-slow) var(--ease-out)}
.el-dialog__wrapper,.el-drawer__wrapper{animation:fadeIn var(--dur-base) var(--ease-std)}
@keyframes dialogFadeIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.el-button{transition:all var(--dur-base) var(--ease-std)}
.el-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,122,255,.2)}
.el-button:active{transform:translateY(0)}
.el-card,.ep-cell,.pick-card,.shiprec,.sret-row,.item{transition:all var(--dur-base) var(--ease-std)}
.el-card:hover,.pick-card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.ep-cell:active{background:var(--cb)}
.el-table tr{transition:background-color var(--dur-fast) var(--ease-std)}
.el-table tbody tr:hover{background:var(--cb)!important}
.el-tag{transition:all var(--dur-base) var(--ease-std)}
.el-tag:hover{transform:scale(1.05)}
/* 列表项进入动画 */
.list-enter-active,.list-leave-active{transition:all var(--dur-slow) var(--ease-std)}
.list-enter-from,.list-leave-to{opacity:0;transform:translateX(-20px)}
/* 空状态优化 */
.el-empty{padding:30px 0}
.el-empty__image{opacity:.7}