/* ============================================================
   动效层（只负责 motion，不改布局与配色）
   原则：只动 transform / opacity；高频操作几乎无感，低频时刻才给“惊喜”；
   出场原路返回；系统开启“减少动态效果”时退化为淡入淡出。
   ============================================================ */
: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);
}

/* ---------- 页面切换：内容轻轻浮起（每天几十次 → 快且轻） ---------- */
@keyframes m-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-rise-intro { from { opacity: 0; transform: translateY(16px); } }
@keyframes m-fade { from { opacity: 0; } }
.m-enter { animation: m-rise 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
/* 首次打开：全站唯一一次编排好的入场 */
.m-intro { animation: m-rise-intro 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ---------- 顶栏：滚动后才出现分隔线（滚动边缘效果） ---------- */
.topbar { border-bottom-color: transparent; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.topbar.is-scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }

/* ---------- 导航：一条黄铜下划线在标签之间滑动 ---------- */
@media (min-width: 681px) { .tabs.has-ink { position: relative; } }
.tabs.has-ink a.active::after { opacity: 0; }
.tab-ink {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--gold);
  transform-origin: 0 0; pointer-events: none; opacity: 0;
  transition: transform 340ms var(--ease-in-out), opacity 150ms ease;
}
@media (max-width: 680px) { .tab-ink { bottom: 8px; border-radius: 2px; } }

/* ---------- 按压反馈：按下即响应 ---------- */
.btn, .icon-btn, .tabs a, .seg button, .subtabs button, .pnl-switch button, .history-date, .bubble-row {
  transition-property: background-color, border-color, color, transform, padding;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
.btn:active:not([disabled]), .icon-btn:active { transform: scale(0.97); }
.tabs a:active, .subtabs button:active, .seg button:active, .pnl-switch button:active { transform: scale(0.96); }
.history-date:active, .bubble-row:active { transform: scale(0.985); }

/* 主线 / 持仓条目：悬停时内容向右让一步（仅限有鼠标的设备） */
.mainline-item > * { transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mainline-item:hover > * { transform: translateX(6px); }
}

/* ---------- 弹窗：从中心浮现；抽屉：从右侧滑入 ---------- */
@keyframes m-backdrop-in { from { opacity: 0; } }
@keyframes m-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes m-drawer-in { from { transform: translateX(100%); } }
.modal-backdrop { animation: m-backdrop-in 220ms var(--ease-out) both; }
.drawer-backdrop { animation: m-backdrop-in 320ms var(--ease-out) both; }
.modal { animation: m-modal-in 260ms var(--ease-out) both; }
.drawer { animation: m-drawer-in 460ms var(--ease-drawer) both; }
/* 抽屉内容（骨架 → 数据）替换时淡入，不跳 */
.drawer > .drawer-head, .drawer > .drawer-body { animation: m-fade 220ms var(--ease-out) both; }
.drawer > .drawer-body { animation-delay: 40ms; }
/* 退场“残影”：由 motion.js 用 WAAPI 播放，原 CSS 入场动画不重播 */
.motion-ghost, .motion-ghost * { pointer-events: none !important; }
.motion-ghost, .motion-ghost * { animation: none !important; }

/* ---------- 下拉搜索：从输入框下沿展开 ---------- */
@keyframes m-pop { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.search-drop { transform-origin: top center; animation: m-pop 170ms var(--ease-out) both; }

/* ---------- 持仓明细展开 ---------- */
@keyframes m-unfold { from { opacity: 0; transform: translateY(-6px); } }
.pos-detail:not([hidden]) > td > * { animation: m-unfold 240ms var(--ease-out) both; }
.pos-detail:not([hidden]) > td > .intraday-panel { animation-delay: 50ms; }

/* ---------- Toast：Sonner 式，稍慢、优雅；用 transition 便于连续触发时重定向 ---------- */
.toast {
  transform: translate(-50%, 24px) scale(0.98);
  transition: opacity 400ms ease, transform 400ms ease;
}
.toast.show { transform: translate(-50%, 0) scale(1); }

/* ---------- 勾选 / 开关 ---------- */
@keyframes m-check { from { opacity: 0; transform: rotate(45deg) scale(0.6); } }
.check-item input:checked::after { animation: m-check 200ms var(--ease-out); }
.check-item input { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.check-item input:active { transform: scale(0.9); }
.check-item input + span { transition: color 200ms ease; }
.switch input { transition: background-color 220ms ease, border-color 220ms ease; }
.switch input::after {
  left: 2px; transform-origin: left center;
  transition: transform 280ms var(--ease-in-out), background-color 220ms ease;
}
.switch input:checked::after { left: 2px; transform: translateX(18px); transform-origin: right center; }
/* iOS 式：按住时拇指被“拉长” */
.switch input:active::after { transform: scaleX(1.22); }
.switch input:checked:active::after { transform: translateX(18px) scaleX(1.22); }

/* ---------- 数字：计数动画期间宽度不跳 ---------- */
.breadth-num b, .temp-copy .score { font-variant-numeric: tabular-nums; }

/* ---------- 登录：材质“凝结”入场（30 天一次，惊喜预算花在这里） ---------- */
@keyframes m-materialize { from { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(10px); } }
@keyframes m-login-backdrop { from { opacity: 0; } }
#login-overlay { animation: m-login-backdrop 400ms ease both; }
.login-card { animation: m-materialize 700ms var(--ease-out) both; animation-delay: 80ms; }
.login-card > * { animation: m-rise-intro 600ms var(--ease-out) both; }
.login-card > :nth-child(1) { animation-delay: 220ms; }
.login-card > :nth-child(2) { animation-delay: 280ms; }
.login-card > :nth-child(3) { animation-delay: 330ms; }
.login-card > :nth-child(4) { animation-delay: 380ms; }
.login-card > :nth-child(5) { animation-delay: 420ms; }
.login-card > :nth-child(n+6) { animation-delay: 460ms; }

/* ---------- 无障碍：减少动态 = 更少、更轻，而不是全无 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m-enter, .m-intro, .modal, .drawer, .search-drop, .login-card, .login-card > *,
  .pos-detail:not([hidden]) > td > * { animation: m-fade 200ms ease both !important; animation-delay: 0ms !important; filter: none; }
  .modal-backdrop, .drawer-backdrop, #login-overlay { animation: m-fade 200ms ease both; }
  .tab-ink { transition: opacity 150ms ease; }
  .toast, .toast.show { transform: translate(-50%, 0); transition: opacity 200ms ease; }
  .btn:active:not([disabled]), .icon-btn:active, .tabs a:active, .subtabs button:active, .seg button:active,
  .pnl-switch button:active, .history-date:active, .bubble-row:active, .check-item input:active { transform: none; }
  @media (hover: hover) and (pointer: fine) { .mainline-item:hover > * { transform: none; } }
  .switch input::after { transition: background-color 150ms ease; }
  .switch input:active::after { transform: none; }
  .switch input:checked:active::after { transform: translateX(18px); }
  .check-item input:checked::after { animation: none; }
  .skeleton, .status-pill.live::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-backdrop, .drawer-backdrop, #login-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}