/* ============================================================
   Motion 层 —— 按 Emil Kowalski 的 animate 技能实现
   原则（skills/animate/SKILL.md）：
   1) 频率门控：100+/天不动画；几十次/天仅近乎不可察觉；偶尔（弹窗/抽屉）标准动画
   2) 只用 transform + opacity（GPU 合成层，不触发布局/重绘）
   3) 绝不用 scale(0)；入场从 scale(0.95–0.97) + opacity 0 开始
   4) 入/出用强 ease-out：cubic-bezier(0.23, 1, 0.32, 1)
   5) 时长：按压 100–160ms，弹层 150–250ms，弹窗 200–500ms，UI 全部 <300ms
   6) transition 不写 all；hover 必须门控；prefers-reduced-motion 必带
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-press: 0.16s;
  --duration-pop: 0.18s;
  --duration-modal: 0.26s;
}

/* ---------- 按压反馈：所有可点元素 100–160ms ---------- */
button,
.filter-btn,
.sort-btn,
.copy-btn,
.btn-ghost,
#modal-fav-btn,
.about-btn,
.fav-btn,
.folder-btn,
.folder-item,
.map-cat-btn,
.filter-option-tag,
.clear-filters-btn,
.suggest-item,
.pagination button,
nav a,
.card,
.rank-item {
  transition-property: transform, background-color, border-color, box-shadow, color, opacity, filter;
  transition-duration: var(--duration-press);
  transition-timing-function: var(--ease-out);
}

button:active,
.filter-btn:active,
.sort-btn:active,
.copy-btn:active,
.btn-ghost:active,
#modal-fav-btn:active,
.about-btn:active,
.fav-btn:active,
.folder-btn:active,
.folder-item:active,
.map-cat-btn:active,
.filter-option-tag:active,
.clear-filters-btn:active,
.pagination button:active:not(:disabled),
nav a:active {
  transform: scale(0.97);
}

/* 卡片按压更轻（大面积元素） */
.card:active { transform: scale(0.985); }

/* ---------- 悬停：仅精确指针设备（触屏不触发假 hover） ---------- */
@media (hover: none) {
  .card:hover { transform: none !important; }
  .rank-item:hover { transform: none !important; }
  .fav-btn:hover, .folder-btn:hover { transform: none !important; }
  .filter-btn:hover, .sort-btn:hover { transform: none !important; }
  .about-btn:hover, .auth-area button:hover { transform: none !important; }
  .copy-btn:hover, .btn-ghost:hover, #modal-fav-btn:hover { transform: none !important; }
  .pagination button:hover:not(:disabled) { transform: none !important; }
}

/* ---------- 弹窗：入场 scale(0.96)+fade，退场对称（250ms） ---------- */
.modal-overlay,
.filter-modal-overlay {
  opacity: 0;
  transition: opacity var(--duration-modal) var(--ease-out);
}
.modal-overlay.is-open,
.filter-modal-overlay.is-open {
  opacity: 1;
}

.modal-content,
.filter-modal-content {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--duration-modal) var(--ease-out),
    transform var(--duration-modal) var(--ease-out);
  transform-origin: center; /* 弹窗豁免：不锚定触发元素 */
}
.modal-overlay.is-open .modal-content,
.filter-modal-overlay.is-open .filter-modal-content {
  opacity: 1;
  transform: scale(1);
}

/* 弹窗内图片换图时轻微淡入（防止硬切） */
#modal-img {
  transition: opacity 0.2s var(--ease-out);
}
#modal-img[data-loading] { opacity: 0.35; }

/* ---------- 搜索建议下拉：从顶部锚点展开（150ms） ---------- */
@starting-style {
  #search-suggest,
  .search-suggest { opacity: 0; }
}
#search-suggest,
.search-suggest {
  transition: opacity 0.12s var(--ease-out);
}

/* ---------- 卡片入场：极其轻微（90ms 淡入，列表导航级） ---------- */
@starting-style {
  .card {
    opacity: 0;
    transform: translateY(3px);
  }
}
.card {
  transition:
    opacity 0.12s var(--ease-out),
    transform 0.45s var(--ease-out),
    border-color 0.3s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

/* ---------- 排行榜条目入场 ---------- */
@starting-style {
  .rank-item {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- 卡片收藏心形：点击轻微回弹（160ms） ---------- */
.fav-btn:active svg,
.fav-btn:active { transform: scale(0.85); }

/* ---------- 减少动态偏好：保留颜色/不透明度，移除位移 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none !important; }
  .rank-item:hover { transform: none !important; }
  #search-suggest,
  .search-suggest { transform: none !important; }
  .modal-content,
  .filter-modal-content { transform: none !important; }
}

/* ===================== 详情面板 v4 动效 ===================== */

/* ---------- 打开 / 关闭详情面板 ---------- */
/* 说明：motion.css 里已有的 .modal-content opacity/scale 规则被下面这段接管 */
.modal-content,
.detail-stage .data-panel-window {
  transition:
    opacity 240ms var(--ease-out),
    transform 320ms var(--ease-out);
  transform-origin: center;
}
.modal-content { transform: translateY(14px) scale(0.965); }
.modal-overlay.is-open .modal-content { transform: translateY(0) scale(1); }

/* 关闭时：向下微沉 + 淡出，比打开更快（160ms，退场用 ease-in 更利落） */
.modal-overlay:not(.is-open) .modal-content { transition-duration: 160ms, 200ms; }

/* 竖条切换按钮：随详情面板一起入场（左右错开） */
.detail-nav { transition-delay: 0ms; }
.modal-overlay.is-open #detail-prev { transition-delay: 60ms; }
.modal-overlay.is-open #detail-next { transition-delay: 90ms; }

/* ---------- 打开 / 关闭数据面板：从「数据面板」按键向右上弹出 ---------- */
@keyframes detailPanelIn {
  from { opacity: 0; transform: translate3d(18px, 26px, 0) scale(0.94); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes detailPanelOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(12px, 18px, 0) scale(0.96); }
}
.detail-stage .data-panel-window.detail-panel-in {
  animation: detailPanelIn 320ms var(--ease-out) both;
  transform-origin: 0% 100%;      /* 锚定「数据面板」按键方向 */
}
.detail-stage .data-panel-window.detail-panel-out {
  animation: detailPanelOut 200ms var(--ease-out) both;
  transform-origin: 0% 100%;
}

/* ---------- 切换详情：向左切 = 从左向右滑入；向右切 = 从右向左滑入 ---------- */
@keyframes detailFromLeft {           /* 上一条：新卡片从左边进入 */
  from { opacity: 0; transform: translate3d(-42px, 0, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes detailToRight {            /* 上一条：旧卡片向右退出 */
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(42px, 0, 0) scale(0.985); }
}
@keyframes detailFromRight {          /* 下一条：新卡片从右边进入 */
  from { opacity: 0; transform: translate3d(42px, 0, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes detailToLeft {             /* 下一条：旧卡片向左退出 */
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(-42px, 0, 0) scale(0.985); }
}

.modal-content.detail-out-prev { animation: detailToRight 140ms var(--ease-out) both; }
.modal-content.detail-in-prev  { animation: detailFromLeft 260ms var(--ease-out) both; }
.modal-content.detail-out-next { animation: detailToLeft 140ms var(--ease-out) both; }
.modal-content.detail-in-next  { animation: detailFromRight 260ms var(--ease-out) both; }

/* 数据面板跟随（位移更小、略延迟，形成层次） */
@keyframes panelToRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(20px, 0, 0) scale(0.99); } }
@keyframes panelFromLeft { from { opacity: 0; transform: translate3d(-20px, 0, 0) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes panelToLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(-20px, 0, 0) scale(0.99); } }
@keyframes panelFromRight { from { opacity: 0; transform: translate3d(20px, 0, 0) scale(0.99); } to { opacity: 1; transform: none; } }

.detail-stage .data-panel-window.detail-out-prev { animation: panelToRight 140ms var(--ease-out) both; }
.detail-stage .data-panel-window.detail-in-prev  { animation: panelFromLeft 260ms var(--ease-out) both 50ms; }
.detail-stage .data-panel-window.detail-out-next { animation: panelToLeft 140ms var(--ease-out) both; }
.detail-stage .data-panel-window.detail-in-next  { animation: panelFromRight 260ms var(--ease-out) both 50ms; }

/* ---------- 竖条按钮的指向性回弹 ---------- */
@keyframes navNudgePrev { 0% { transform: translateY(-50%) scale(0.94); } 55% { transform: translateY(-50%) translateX(-8px) scale(0.98); } 100% { transform: translateY(-50%) translateX(0) scale(1); } }
@keyframes navNudgeNext { 0% { transform: translateY(-50%) scale(0.94); } 55% { transform: translateY(-50%) translateX(8px) scale(0.98); } 100% { transform: translateY(-50%) translateX(0) scale(1); } }
#detail-prev.nav-nudge { animation: navNudgePrev 340ms var(--ease-out) both; }
#detail-next.nav-nudge { animation: navNudgeNext 340ms var(--ease-out) both; }

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .modal-content,
  .detail-stage .data-panel-window,
  .detail-nav { transition-duration: 1ms !important; }
  .detail-stage .data-panel-window.detail-panel-in,
  .detail-stage .data-panel-window.detail-panel-out,
  .modal-content.detail-out-prev, .modal-content.detail-in-prev,
  .modal-content.detail-out-next, .modal-content.detail-in-next,
  .detail-stage .data-panel-window.detail-out-prev, .detail-stage .data-panel-window.detail-in-prev,
  .detail-stage .data-panel-window.detail-out-next, .detail-stage .data-panel-window.detail-in-next,
  #detail-prev.nav-nudge, #detail-next.nav-nudge {
    animation: none !important;
  }
}

/* ---------- 统一退场：所有弹窗 = 退出详情面板的同一套（下沉+缩放+淡出） ---------- */
/* 进场：上浮 + 微放大（缓出，稍慢）；退场：下沉 + 微缩 + 淡出（缓入，更快）*/
.modal-content,
.filter-modal-content,
.auth-modal-box,
.detail-stage .data-panel-window {
  opacity: 0;
  transform: translateY(14px) scale(0.965);
  transform-origin: center;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}
.modal-overlay.is-open .modal-content,
.filter-modal-overlay.is-open .filter-modal-content,
#auth-modal.show .auth-modal-box,
.detail-stage .data-panel-window:not([style*="display: none"]) {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 240ms var(--ease-out),
    transform 320ms var(--ease-out);
}

/* 数据面板的退场也改成同一套（不再往按钮方向弹回），进场保留「从按钮向右上弹出」 */
@keyframes detailPanelOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(14px) scale(0.965); }
}
.detail-stage .data-panel-window.detail-panel-out {
  animation: detailPanelOut 200ms var(--ease-out) both !important;
  transform-origin: center !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal-content,
  .filter-modal-content,
  .auth-modal-box,
  .detail-stage .data-panel-window { transition-duration: 1ms !important; }
}

/* ---------- 图片「晕开」入场 ---------- */
/* 列表小图：加载完成后 180ms 内淡入 + 从 1.04 倍缩回原位（只动 opacity/transform，走合成层不重绘） */
.card img,
.rank-item img {
  opacity: 0;
  transform: scale(1.045);
  transition:
    opacity 180ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.card img.is-img-loaded,
.rank-item img.is-img-loaded {
  opacity: 1;
  transform: scale(1);
}

/* 详情大图：多一层 blur 散开 → 清晰，像"晕开"（单张图，成本可接受） */
#modal-img {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.03);
  transition:
    opacity 220ms var(--ease-out),
    filter 300ms var(--ease-out),
    transform 360ms var(--ease-out);
}
#modal-img.is-img-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .card img,
  .rank-item img,
  #modal-img {
    transition: opacity 120ms linear !important;
    transform: none !important;
    filter: none !important;
  }
}