/* ============================================================
 * anim-views.css —— 五个视图级交互动效
 * 设计约定：
 *   · 类名统一 anim- / view- 前缀，绝不覆盖 app.css 的既有选择器
 *   · 所有动效都做 prefers-reduced-motion 降级
 *   · 形状/位置变化尽量走 transform（合成层），不触发布局
 * 本文件由视图 JS 动态兜底挂接（index.html 可能尚未 link）。
 * ============================================================ */

/* ---------- 1. chip / 选择标签协同 ----------
 * 选中态：放大 1.05 + 加粗 + 背景加深。
 * transition 只挂 transform/color/background —— 不挂 font-weight 动画（开销大）。
 */
.chip {
  transition: transform 0.2s ease-out, background-color 0.2s ease-out,
              color 0.2s ease-out, box-shadow 0.2s ease-out;
  will-change: transform;
}
.chip.is-selected {
  transform: scale(1.05);
  font-weight: 600;
  background-color: var(--pine, #2f4f47);
  color: var(--paper, #f6f2e9);
}

/* 分段选择器（图书馆 tab / 校准题）选中放大 */
.seg-item { transition: transform 0.2s ease-out; will-change: transform; }
.seg-item.is-anim-selected { transform: scale(1.05); }

/* 卡组选择（校准多选卡）选中放大 */
.tile { transition: transform 0.2s ease-out; will-change: transform; }
.tile.is-anim-selected { transform: scale(1.04); }

/* 心情图标占位 */
.anim-mood-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; line-height: 1;
  color: var(--vermillion, #c8543a);
}
.anim-mood-svg { display: block; }

/* ---------- 2. 文本展开 / 收起（grid-template-rows 方案） ----------
 * 现代浏览器用 0fr → 1fr 做高度过渡；不支持的退回 max-height。
 * 内部 .anim-expandable-inner 必须 overflow:hidden + min-height:0。
 */
.anim-expandable {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.anim-expandable.is-open { grid-template-rows: 1fr; }
.anim-expandable-inner { overflow: hidden; min-height: 0; }
.anim-expandable-inner > .anim-expand-body {
  opacity: 0;
  transition: opacity 0.25s ease-out 0.1s;
}
.anim-expandable.is-open .anim-expand-body { opacity: 1; }

/* 不支持 grid-template-rows: 0fr 的浏览器：max-height 兜底 */
@supports not (grid-template-rows: 0fr) {
  .anim-expandable { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
  .anim-expandable.is-open { max-height: 600px; }
}

/* 展开箭头：180° 旋转过渡 */
.anim-arrow {
  display: inline-block;
  transition: transform 0.3s ease-out;
}
.anim-arrow.is-open { transform: rotate(180deg); }

/* ---------- 3. 卡片删除曲线 ----------
 * 真正从 DOM 移除的那张卡片先淡出到半透明；克隆体 fixed 定位沿贝塞尔飞向右下角。
 */
.anim-card-deleting { opacity: 0.25; pointer-events: none; transition: opacity 0.2s ease-out; }
.anim-delete-clone {
  position: fixed;
  left: 0; top: 0;
  z-index: 999;
  pointer-events: none;
  margin: 0;
  will-change: transform, opacity;
}

/* ---------- 4. 进度条过冲 ----------
 * 0% → 70% 冲到目标 +5% → 100% 回弹到目标。
 * 由 JS 写入 --anim-from / --anim-to 两个 CSS 变量。
 */
.anim-progress-overshoot {
  animation: anim-overshoot 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes anim-overshoot {
  0%   { width: var(--anim-from, 0%); }
  70%  { width: calc(var(--anim-to, 100%) + 5%); }
  100% { width: var(--anim-to, 100%); }
}

/* ---------- 5. 开关联动震动 ----------
 * 操作组内一个开关时，同组其他开关左右震 1-2px。纯视觉反馈，不改状态。
 */
@keyframes anim-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}
.anim-switch-group.is-shaking > * { animation: anim-shake 0.25s ease-out; }

/* ---------- 6. 文字交叉淡入（兜底类，crossFadeText 内部也会用） ---------- */
.anim-crossfade { transition: opacity 0.15s ease-out; }

/* ---------- 7. 减少动态：全部降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .chip, .seg-item, .tile, .anim-arrow,
  .anim-expandable, .anim-expandable-inner > .anim-expand-body,
  .anim-card-deleting, .anim-crossfade {
    transition: none !important;
  }
  .anim-progress-overshoot { animation: none !important; }
  .anim-switch-group.is-shaking > * { animation: none !important; }
  .anim-delete-clone { transition: none !important; }
}

/* ---------- specs/017 #2 长线计划进度条 ---------- */
/* fill 宽度由 JS 写 inline（静态兜底），勾选变化时叠 anim-progress-overshoot 做过冲动画。 */
.plan-bar { height: 6px; border-radius: 3px; background: var(--line, #e6dfcd); overflow: hidden; margin: 6px 0 10px; }
.plan-bar__fill { display: block; height: 100%; width: 0; background: var(--pine, #2f4f47); border-radius: 3px; }

/* ---------- specs/017 #5 票根视图圆形扩散入场（clip-path，合成层友好） ---------- */
#view-ticket.anim-ticket-reveal { animation: ticket-reveal 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes ticket-reveal {
  from { clip-path: circle(0% at 50% 42%); }
  to   { clip-path: circle(150% at 50% 42%); }
}
@media (prefers-reduced-motion: reduce) {
  #view-ticket.anim-ticket-reveal { animation: none; }
}