/* =============================================================================
 *  06-motion.css — 组件动效
 *  ---------------------------------------------------------------------------
 *  原则：只做「进入 / 悬停 / 按下」这类低干扰动效，时长 120–380ms，
 *  全部使用 transform / opacity，避免触发重排；并遵循系统「减弱动效」偏好。
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------- 关键帧 --------------------------------- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cell-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes stage-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes soft-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------- 面板入场 ------------------------------- */
.side-scroll > .card {
  animation: card-in .38s cubic-bezier(.22, .68, .3, 1) both;
}
.side-scroll > .card:nth-child(1) { animation-delay: .02s; }
.side-scroll > .card:nth-child(2) { animation-delay: .06s; }
.side-scroll > .card:nth-child(3) { animation-delay: .10s; }
.side-scroll > .card:nth-child(4) { animation-delay: .14s; }
.side-scroll > .card:nth-child(5) { animation-delay: .18s; }
.side-scroll > .card:nth-child(6) { animation-delay: .22s; }

/* 条件区块（切换模式 / 开关时出现的内容） */
[data-when]:not([hidden]) {
  animation: panel-in .24s cubic-bezier(.22, .68, .3, 1) both;
}
/* 折叠面板的开合由 ui/collapse.js 用 Web Animations 逐帧测高完成，
   这里不再给 .card-body 挂 CSS 动画，避免两套动画互相覆盖。 */

/* ------------------------------- 画布舞台 ------------------------------- */
.canvas-frame {
  animation: stage-in .5s cubic-bezier(.22, .68, .3, 1) backwards;
}
.stage-caption { animation: soft-rise .45s .1s ease backwards; }
.stage-meta { animation: soft-rise .45s .16s ease backwards; }

/* 切换画布尺寸：盒子宽高做补间，画布本身轻微弹一下，切换不再是「啪」地换一张。
   弹跳挂在 #canvas 上而不是 .canvas-frame —— 外框带着 stage-in 入场动画，
   一旦在外框上覆盖 / 移除动画类，stage-in 会从头再播一次，看起来就像整页重新加载。 */
#canvas.size-anim {
  transition: width .32s cubic-bezier(.22, .68, .3, 1),
              height .32s cubic-bezier(.22, .68, .3, 1);
}
@keyframes size-pop {
  0%   { transform: scale(.986); }
  55%  { transform: scale(1.006); }
  100% { transform: scale(1); }
}
#canvas.size-pop { animation: size-pop .38s cubic-bezier(.22, .68, .3, 1); }

/* ------------------------------- 图标网格 ------------------------------- */
/* 用 backwards 而非 both：动画结束后不再占用 transform，hover 的缩放才生效 */
.icon-cell {
  animation: cell-in .2s ease backwards;
  transition: transform .12s ease, border-color .12s, background .12s, box-shadow .12s;
}
.icon-cell:hover { transform: translateY(-2px) scale(1.05); }
.icon-cell:active { transform: scale(.93); }

/* ------------------------------- 卡片与按钮 ------------------------------- */
.preset-item {
  transition: transform .14s ease, border-color .14s, background .14s, box-shadow .14s;
}
.preset-item:hover { transform: translateY(-1px); }
.preset-item:active { transform: translateY(0) scale(.99); }

.btn {
  transition: background .15s, border-color .15s, transform .1s ease, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(16, 24, 40, .55); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary { transition: background .15s, transform .1s ease, box-shadow .2s; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }

.icon-btn { transition: background .15s, color .15s, transform .1s; }
.icon-btn:active:not(:disabled) { transform: scale(.92); }

/* 颜色色块与色板 */
.clr-dot::after { transition: transform .14s ease; }
.clr-dot:hover::after { transform: scale(1.05); }
.swatch { transition: transform .16s ease, box-shadow .16s; }
.swatch:active { transform: scale(.95); }

/* 尺寸预设缩略框 */
.preset-item .mini { transition: border-color .14s, opacity .14s; }
.preset-item:hover .mini { opacity: .9; }

/* 展开的「加载更多」 */
.icon-more { transition: background .12s, color .12s; }

/* 字体信息与提示的淡入，避免切换字体时文字突兀变化 */
.font-info { animation: soft-rise .2s ease both; }

/* 载入提示：轻微呼吸，避免大图标集（几十万图标）请求时误以为卡死 */
@keyframes loading-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.icon-grid .loading { animation: loading-pulse 1.5s ease-in-out infinite; }