/* 软仓 SOFTVAULT · 生机层
 * 在 style.css 之后加载，只做三件事：
 *   1) 放大图标、拉开信息层级，解决「图标太小 + 凌乱」
 *   2) 加克制的微交互：光斑跟随、涟漪、入场、数字滚动、进度流光
 *   3) 不改变原有布局骨架与配色体系（黑白 + 大留白）
 */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ============ 1. 图标：整体放大一档 ============ */
.app-icon {
  width: 58px; height: 58px; border-radius: 17px; font-size: 19px;
  transition: transform .38s var(--ease-spring), box-shadow .38s var(--ease-out);
}
.app-icon.md { width: 56px; height: 56px; border-radius: 17px; font-size: 18px; }
.app-icon.sm { width: 44px; height: 44px; border-radius: 13px; font-size: 14px; }
.app-icon.xl { width: 96px; height: 96px; border-radius: 27px; font-size: 33px; }
.app-icon .logo-inner { width: 74%; height: 74%; }
.app-icon .logo-inner.logo-full { width: 100%; height: 100%; }

/* ============ 2. 大图标磁贴：克制 hover ============ */
.app-grid { gap: 20px; }
.app-tile {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s ease;
}
.app-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 18, 24, .08); }
.app-tile:hover .app-icon { transform: scale(1.04); }
.app-tile:active { transform: translateY(-1px) scale(.995); }

/* 精选 / 合集头部的图标提一档 */
.coll-app-head .app-icon { width: 44px; height: 44px; border-radius: 14px; }

/* ============ 3. 排版微调：减少凌乱感 ============ */
.cell { padding: 28px; }
.cell-head { margin-bottom: 22px; }
.cat-row { padding: 9px 10px; border-radius: 13px; transition: background .2s ease, transform .25s var(--ease-out); }
.cat-row:hover { transform: translateX(2px); }
.featured-item { border-radius: 20px; }
.chip { transition: transform .28s var(--ease-spring), background .2s ease, border-color .2s ease, color .2s ease; }
.chip:active { transform: scale(.95); }
.chip.is-active { animation: chipPop .4s var(--ease-spring); }
@keyframes chipPop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ============ 4. 入场 ============ */
/* 仅当 JS 就绪（html.reveal-on）才把元素初始设为透明，避免 JS 未执行时内容隐形 */
html.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* 首次渲染的软件磁贴，错峰浮现；后续筛选不再重播 */
.app-tile.row-in {
  animation: rowIn .52s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 16ms);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to   { opacity: 1; transform: none; }
}

/* ============ 6. 安装过程：进度流光 + 图标脉冲 ============ */
.track i, .preview-track i { position: relative; overflow: hidden; transition: width .4s var(--ease-out); }
.track i::after, .preview-track i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.modal.is-open #modalIcon { animation: iconPulse 2.2s ease-in-out infinite; }
@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17, 18, 20, .16); }
  50%      { box-shadow: 0 0 0 12px rgba(17, 18, 20, 0); }
}
.step.active .dot { animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17, 18, 20, .18); }
  50%      { box-shadow: 0 0 0 7px rgba(17, 18, 20, 0); }
}
.modal-done-state .big { animation: popIn .55s var(--ease-spring) both; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============ 8. 按钮与搜索 ============ */
.btn { transition: transform .22s var(--ease-out), background .2s ease, color .2s ease, box-shadow .25s ease; }
.btn:active { transform: scale(.96); }
.btn:hover svg { transform: translateX(2px); }
.btn svg { transition: transform .25s var(--ease-out); }
.search-mini { transition: box-shadow .3s ease, background .3s ease; }
.search-mini:focus-within { box-shadow: 0 0 0 4px rgba(17, 18, 20, .07); }
[data-href] { cursor: pointer; }

/* 滚到底部时，页脚品牌标轻微上浮 */
.footer-mini { transition: transform .5s var(--ease-out); }

/* ============ 9. 减少动画偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============ 10. 小屏 ============ */
@media (max-width: 860px) {
  .app-icon { width: 52px; height: 52px; border-radius: 15px; }
  .app-icon.md { width: 50px; height: 50px; border-radius: 15px; }
  .app-tile { padding: 18px 12px 16px; }
  .cell { padding: 22px; }
}

/* ============ 11. 助手启动指引浮层 ============ */
.helper-sheet {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: min(430px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 24px; box-shadow: 0 32px 80px rgba(16, 18, 24, .24);
  animation: sheetIn .45s var(--ease-out) both;
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.helper-sheet h4 { margin: 0 0 10px; font-size: 16.5px; letter-spacing: -.35px; }
.helper-sheet p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.helper-sheet ol { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.95; color: var(--ink-2); }
.helper-sheet code {
  display: block; padding: 13px 15px; border-radius: 13px;
  background: var(--dark); color: #fff; font-size: 12.5px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.helper-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.helper-note { font-size: 11px; color: var(--muted-2); }
.helper-x {
  position: absolute; right: 12px; top: 12px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--card); color: var(--ink-2); cursor: pointer;
}
.helper-x:hover { background: var(--line); }
@media (max-width: 560px) {
  .helper-sheet { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 20px; }
}