/* loadout.css —— 01 装配的交互样式（装上 / 卸下的逐帧动画、悬停 / 聚焦态、说明窗过渡等）。
   负责人：loadout 负责人。静态 / 无 JS 终态与几何在 tether.css「01 装配」，这里不改坐标。
   动画一律 steps(1,end)：每个关键帧就是一帧，帧与帧之间不插值（像素不糊）。
   .lo-eq = 正在装上（JS 在开始时加、480ms 后摘）；.lo-un = 正在卸下（160ms）；.is-lit = 亮结。
   减弱动效：tether.css §14 全局关掉 animation，JS 也不再加这些 class（直接画终态）。 */

/* ── 装上一件（槽 i，约 320ms） ───────────────────────────────────────────
   0–80ms 结 3 帧收紧 → 80ms 亮结（400ms）→ 80–200ms 横绳从结向槽位 4 帧伸出（每帧 24px）
   → 240ms 物品 scale(2) 一帧 → 280ms scale(1) 下沉 1px 一帧 → 320ms 静止；标签、凹槽同在 240ms 出现。 */
.rig-knot.lo-eq { animation: lo-tie 80ms steps(1, end) both; }
@keyframes lo-tie { 0% { clip-path: inset(3px); } 50% { clip-path: inset(1px); } 100% { clip-path: inset(0); } }

.rig-hrope.L.lo-eq { animation: lo-reach-l 200ms steps(1, end) both; }   /* 左槽：结在右端，从右往左伸 */
.rig-hrope.R.lo-eq { animation: lo-reach-r 200ms steps(1, end) both; }   /* 右槽：结在左端，从左往右伸 */
@keyframes lo-reach-l {
  0% { clip-path: inset(0 0 0 96px); } 40% { clip-path: inset(0 0 0 72px); } 60% { clip-path: inset(0 0 0 48px); }
  80% { clip-path: inset(0 0 0 24px); } 100% { clip-path: inset(0); }
}
@keyframes lo-reach-r {
  0% { clip-path: inset(0 96px 0 0); } 40% { clip-path: inset(0 72px 0 0); } 60% { clip-path: inset(0 48px 0 0); }
  80% { clip-path: inset(0 24px 0 0); } 100% { clip-path: inset(0); }
}

.rig-label.lo-eq { animation: lo-appear 240ms steps(1, end) both; }
@keyframes lo-appear { 0% { visibility: hidden; } 100% { visibility: visible; } }
.rig-slot.lo-eq { animation: lo-slot-on 240ms steps(1, end) both; }
@keyframes lo-slot-on { 0% { opacity: .6; } 100% { opacity: 1; } }
/* 16px 物品图标按 (8,8) 放大一倍 = 32px 帧（槽内 8–40），整数倍、中心不动；只这一帧放大，静止时 1× */
.rig-slot.lo-eq .item { transform-origin: 8px 8px; animation: lo-pop 320ms steps(1, end) both; }
@keyframes lo-pop {
  0% { visibility: hidden; transform: none; }
  75% { visibility: visible; transform: scale(2); }
  87.5% { visibility: visible; transform: translateY(1px); }
  100% { visibility: visible; transform: none; }
}

/* 亮结 + 6px 柔光：光画在结外的圆上（外阴影只画在圆外），不对像素图用 filter */
.rig-knot.is-lit::before {
  content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(var(--glow), .6); pointer-events: none;
}

/* ── 卸下一件（约 160ms，装上的倒放） ─────────────────────────────────────
   0ms 物品、标签消失 → 0–72ms 横绳 4 帧收回 → 72–152ms 结 3 帧松开后隐藏；宝石灯、卷轴行在 160ms 由 JS 收掉。 */
.rig-slot.lo-un { opacity: .6; }
.rig-slot.lo-un .item, .rig-label.lo-un { visibility: hidden; }
.rig-hrope.L.lo-un { animation: lo-retract-l 72ms steps(1, end) both; }
.rig-hrope.R.lo-un { animation: lo-retract-r 72ms steps(1, end) both; }
@keyframes lo-retract-l { 0% { clip-path: inset(0 0 0 24px); } 33.333% { clip-path: inset(0 0 0 48px); } 66.667% { clip-path: inset(0 0 0 72px); } 100% { clip-path: inset(0 0 0 96px); } }
@keyframes lo-retract-r { 0% { clip-path: inset(0 24px 0 0); } 33.333% { clip-path: inset(0 48px 0 0); } 66.667% { clip-path: inset(0 72px 0 0); } 100% { clip-path: inset(0 96px 0 0); } }
.rig-knot.lo-un { animation: lo-untie 160ms steps(1, end) both; }
@keyframes lo-untie { 0% { clip-path: inset(0); } 45% { clip-path: inset(1px); } 70% { clip-path: inset(3px); } 95%, 100% { clip-path: inset(50%); } }

/* ── 装备架上的槽：已装备的是按钮（点击 / Enter / Space / Delete 卸下） ──────────── */
.lo-live .rig-slot.is-on:not(:disabled) { cursor: pointer; }
.lo-live .rig-slot.is-on:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--brass), var(--slot-shadow), 0 0 6px rgba(var(--glow), .3); }

/* ── 卷轴：新插入的装备行带 .hilite，600ms 内 steps(4) 淡到 0（光条画在行后面，不盖字） ── */
#lo-gear .ln.lo-new { position: relative; z-index: 0; }
#lo-gear .ln.lo-new::before {
  content: ""; position: absolute; inset: 0 -12px; z-index: -1; pointer-events: none;
  background: var(--hilite-bg);   /* .hilite 的三层渐变（tether.css 令牌） */
  animation: lo-hl 600ms steps(4, end) both;
}
@keyframes lo-hl { from { opacity: 1; } to { opacity: 0; } }

/* ── 背包：每格右上角一颗宝石灯，已装备（aria-pressed=true）时点亮（tether.css 的 [aria-pressed=true] > .gem）。
   白天的选中描边（日金 1px）和普通槽沿太接近，靠这颗灯区分；无 JS 时 No.1 的 6 件也亮。 ── */
.bag-cell > .bag-gem { position: absolute; right: 3px; top: 3px; }

/* ── 背包：当前格（悬停 / 聚焦 / 点过的）左侧画小手；满槽时小手左右各抖 1px 两次 ──────── */
.lo-live .bag-cell:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--brass), var(--slot-shadow); }
.lo-live .bag-cell.is-cur::before {
  content: ""; position: absolute; left: -7px; top: 19px; z-index: 1; width: 13px; height: 10px; pointer-events: none;
  background: url("/assets/ui/hand.svg") 0 0 / 13px 10px no-repeat; image-rendering: pixelated;
  animation: hd-cursor-bob 1.2s steps(1, end) infinite;
}
.lo-live .bag-cell.is-cur.is-shake::before { animation: lo-shake 200ms steps(1, end) both; }
@keyframes lo-shake { 0% { translate: -1px 0; } 25% { translate: 1px 0; } 50% { translate: -1px 0; } 75% { translate: 1px 0; } 100% { translate: 0 0; } }

/* ── 说明窗：内容切换 100ms 淡入（≤ 120ms）；克隆来的 .bag-info 改名 .desc-info ──────── */
.desc-win.lo-fade > * { animation: lo-fade 100ms linear both; }
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }
.desc-info dt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.desc-info .it-desc { margin-top: 4px; }
.desc-text { font-size: 15px; line-height: 24px; color: var(--c-text2); }

/* ── 触屏：起名输入框的点击目标不小于 44px（输入框只在有 JS 时出现） ─────────────── */
@media (pointer: coarse) { .lo-name-in { height: 44px; line-height: 42px; } }