/* ============================================================
   polish.css — 全站「通用视觉与动效」提升覆盖层

   定位（2026-10-01 新增）：
     · 在 colors.css 之后加载（见 index.html），不改任何既有样式文件的一行，
       靠文档顺序 + 适度特异性覆盖，可整文件删除回退。
     · 只增强**质感与微动效**：玻璃拟态、柔化阴影、更顺的过渡曲线；
       ⚠️ 不改 --accent 等配色变量（那是 33 套主题皮肤与玩家强调色的职责），
       因此与主题系统零冲突、对所有皮肤一致生效。

   动效遵循全站既有约定：localStorage `sr_motion=0` 时一键关停（见 ui/theme.js
   motionOn()），不跟随系统 prefers-reduced-motion。
   ============================================================ */

/* ── 覆盖层微调变量（仅质感/光晕/动效，不动配色） ───────────── */
:root, [data-theme="light"] {
  --sr-glass: rgba(255, 255, 255, .72);
  --sr-glass-strong: rgba(255, 255, 255, .86);
  --sr-glass-border: rgba(255, 255, 255, .6);
  --sr-ease: cubic-bezier(.22, .61, .36, 1);
  --sr-t-fast: .15s;
  --sr-t-med: .26s;
}
[data-theme="dark"] {
  --sr-glass: rgba(23, 24, 28, .6);
  --sr-glass-strong: rgba(23, 24, 28, .82);
  --sr-glass-border: rgba(255, 255, 255, .08);
}

/* ── 动效总开关：sr_motion=0 时全站过渡/动画归零 ─────────────── */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}

/* ── 模态框：玻璃化 + 更弹的进入 ─────────────────────────── */
.modal-mask {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal {
  background: var(--sr-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  border-color: var(--sr-glass-border);
  border-radius: 18px;
  transition: transform var(--sr-t-med) var(--sr-ease);
}
.modal-mask.show .modal { animation: srPop .28s var(--sr-ease); }
@keyframes srPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── 帖子卡片：悬浮更有层次 ─────────────────────────────── */
.post { transition: box-shadow var(--sr-t-med) ease, border-color var(--sr-t-med) ease, transform var(--sr-t-fast) var(--sr-ease); }
.post:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .10); transform: translateY(-2px); }
[data-theme="dark"] .post:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }

/* ── 发帖框：聚焦时玻璃抬起 ─────────────────────────────── */
.composer { border-radius: 16px; transition: box-shadow var(--sr-t-med) ease, border-color var(--sr-t-med) ease; }
.composer:focus-within { box-shadow: 0 10px 30px rgba(0, 0, 0, .10); }

/* ── 输入框：聚焦环用统一曲线更顺 ─────────────────────────── */
.composer input[type="text"], .composer textarea, .comment-box textarea,
.modal textarea, .modal-input {
  transition: border-color var(--sr-t-fast) ease, box-shadow var(--sr-t-fast) ease, background var(--sr-t-fast) ease;
}

/* ── 灯箱：玻璃遮罩 + 图片进入缩放 ─────────────────────────── */
.lightbox-mask { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox-mask.show .lightbox-img { animation: srZoom .26s var(--sr-ease); }
@keyframes srZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ── Toast：玻璃拟态 + 弹入 ─────────────────────────────── */
.toast {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  transition: opacity .3s var(--sr-ease), transform .3s var(--sr-ease);
}

/* ── 上传缩略图：进入动效 + 圆角统一 ───────────────────────── */
.upload-thumb { border-radius: 10px; transition: transform var(--sr-t-fast) var(--sr-ease), box-shadow var(--sr-t-fast) ease; }
.upload-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ── 帖子图片：更顺的缩放曲线 ─────────────────────────────── */
.post-image { transition: transform var(--sr-t-med) var(--sr-ease), box-shadow var(--sr-t-med) ease; }

/* ── 徽章：圆角与过渡统一 ───────────────────────────────── */
.like-btn, .badge-hidden, .badge-admin, .badge-pinned, .post .post-id, .id-badge {
  transition: background var(--sr-t-fast) ease, border-color var(--sr-t-fast) ease, color var(--sr-t-fast) ease, transform .09s cubic-bezier(.2,.7,.3,1);
}
.like-btn:active { transform: scale(.92); }

/* ── 按钮曲线统一（沿用全站既有按下/悬浮逻辑，只统一节奏） ───── */
.btn, .btn-primary, .btn-xs, .icon-btn { transition-timing-function: ease, ease, cubic-bezier(.2,.7,.3,1), ease, ease; }

/* ============================================================
   移动端（≤640px）响应式精修：模态贴近底部抽屉观感、触控反馈
   ============================================================ */
@media (max-width: 640px) {
  .modal-mask { align-items: flex-end; padding: 0; }
  .modal { border-radius: 18px 18px 0 0; max-width: 100vw; }
  @keyframes srPop { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  .post:hover { transform: none; }                 /* 触屏无 hover，避免悬浮残留 */
  .upload-thumb:hover { transform: none; }
}
@media (hover: none) {
  .post:active { transform: scale(.995); }
  .post-image:hover { transform: none; }
}