/* ============================================================
   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; }
}