/* 拾色志 v11 · 档案馆动效层
   层级：tokens.css ① → components.css ② → style.css ③ → 本文件（动效）
   原则：异形但不失控——每 <section> 最多 2 处 blob，其余保持网格秩序
   本文件不定义任何 token（--ease / --dur-* 全部来自 tokens.css）
   本文件不写 prefers-reduced-motion 局部降级（统一由 tokens.css 全局接管）
*/

/* ===== 图标 hover 动效（.icon 尺寸 / .icon-accent 配色基类在 components.css） ===== */
.card:hover .icon svg, .k-card:hover .icon svg, .a-card:hover .icon svg { transform: rotate(-6deg) scale(1.08); }

/* ===== 异形几何辅助件（非 blob，不计入每屏异形配额） ===== */
/* 不规则圆角：卡片四角不同半径（适当圆角，非全圆） */
.soft-radius { border-radius: var(--r-organic-a); }
.soft-radius-sm { border-radius: var(--r-organic-b); }
/* 斜切分隔（板块间有机过渡） */
.slant-sep { height: 56px; overflow: hidden; position: relative; }
.slant-sep::before {
  content: ""; position: absolute; inset: 0;
  background: var(--paper-subtle);
  clip-path: polygon(0 62%, 38% 18%, 71% 55%, 100% 25%, 100% 100%, 0 100%);
}

/* ===== 交互动效升级 ===== */
/* 色卡图片：悬停轻微倾斜 + 放大（手工感；.a-fig img 基类在 style.css） */
.a-fig:hover img { transform: scale(1.02) rotate(-.6deg); box-shadow: 6px 8px 0 rgba(20, 20, 20, .08); }
/* 图表：悬停浮起（.m-fig 基类在 style.css） */
.m-fig:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20, 20, 20, .10); }
/* 图标按钮涟漪底（.fam-btn 基类在 style.css） */
.fam-btn::after {
  content: ""; position: absolute; inset: 0; background: var(--brand);
  opacity: 0; transform: scale(0); transition: transform .3s var(--ease), opacity .3s;
  z-index: 0;
}
.fam-btn span { position: relative; z-index: 1; }
.fam-btn:hover::after { opacity: .08; transform: scale(1); }
/* 模拟器 mock：呼吸浮动 */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mock-item:nth-child(1) .mock-visual { animation: floaty 4.5s ease-in-out infinite; }
.mock-item:nth-child(2) .mock-visual { animation: floaty 5.2s ease-in-out .4s infinite; }
.mock-item:nth-child(3) .mock-visual { animation: floaty 5.8s ease-in-out .8s infinite; }
/* hero 三色带：初始入场伸展 */
@keyframes bandIn { from { flex-grow: 0.001 !important; } }
.preview-palette button { animation: bandIn 1s var(--ease) backwards; }
.preview-palette button:nth-child(1) { animation-delay: var(--stagger-1); }
.preview-palette button:nth-child(2) { animation-delay: var(--stagger-2); }
.preview-palette button:nth-child(3) { animation-delay: var(--stagger-3); }
/* 页面标题下划线生长 */
.stage-title, .sec-title { position: relative; }
.stage-title::after {
  content: ""; display: block; width: 0; height: 3px; background: var(--brand);
  margin-top: var(--s2); transition: width var(--dur-slow) var(--ease) var(--dur-fast);
}
.in .stage-title::after, .reveal.in .stage-title::after { width: 64px; }