/* ============================================================
   motion.css — 极图动效乐高库
   改编自 transitions.dev / beautifului.dev 的模式，全部原生 CSS
   零依赖、零构建。独立文件，避免与 style.css 编辑冲突。
   ============================================================ */

/* ---------- 统一动效参数 ---------- */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);      /* 回弹，用于出现/成功 */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);        /* 干脆的减速，用于大多数 hover */
  --ease-in-out-soft:cubic-bezier(.4,0,.2,1);       /* 标准双向 */
  --dur-fast:.15s; --dur-base:.22s; --dur-slow:.32s;
}

/* ============================================================
   1. 文字/数字动效（transitions.dev: Number pop-in / Texts reveal）
   ============================================================ */

/* 数字翻入：结果数值出现时用 */
@keyframes num-pop{
  from{opacity:0;transform:translateY(6px) scale(.94);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.num-pop{animation:num-pop var(--dur-slow) var(--ease-spring) both}

/* 多行错峰上浮：标题/段落入场 */
@keyframes text-rise{
  from{opacity:0;transform:translateY(10px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.text-rise{animation:text-rise .5s var(--ease-out-quart) both}
.text-rise-1{animation-delay:.05s}
.text-rise-2{animation-delay:.12s}
.text-rise-3{animation-delay:.19s}

/* 遮罩渐变扫光：处理中的文字状态，比"加载中…"高级 */
@keyframes shimmer-sweep{to{background-position:200% center}}
.shimmer-text{
  background:linear-gradient(90deg,var(--muted) 0%,var(--fg) 45%,var(--muted) 90%);
  background-size:200% auto;background-clip:text;-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer-sweep 1.6s linear infinite;
}

/* ============================================================
   2. 状态转换（transitions.dev: Spinner→check / Error shake / Success）
   ============================================================ */

/* 成功勾描线：SVG path 画出 */
@keyframes check-draw{to{stroke-dashoffset:0}}
.check-draw path{
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:check-draw .4s var(--ease-out-quart) .1s both;
}

/* 成功徽标弹入 */
@keyframes success-pop{
  0%{opacity:0;transform:scale(.6) rotate(-12deg)}
  100%{opacity:1;transform:none}
}
.success-pop{animation:success-pop .42s var(--ease-spring) both}

/* 错误抖动 */
@keyframes err-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}
.err-shake{animation:err-shake .4s cubic-bezier(.36,.07,.19,.97) both}

/* 骨架屏 → 内容交叉淡入 */
@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));
  background-size:200% 100%;border-radius:8px;
  animation:skeleton-pulse 1.4s var(--ease-in-out-soft) infinite,shimmer-sweep 1.8s linear infinite;
}

/* ============================================================
   3. 卡片/悬停（transitions.dev: 3D tilt / Card stack hover）
   ============================================================ */

/* 3D 指针倾斜 —— 需要 app.js 写入 --rx/--ry */
.tilt{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--dur-base) var(--ease-out-quart);
  transform-style:preserve-3d;
}
.tilt-glare{position:relative;overflow:hidden}
.tilt-glare::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),transparent 55%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out-quart);
}
.tilt-glare:hover::after{opacity:1}

/* 抬升 hover：卡片通用 */
.lift{transition:transform var(--dur-base) var(--ease-out-quart),box-shadow var(--dur-base) var(--ease-out-quart),border-color var(--dur-base) linear}
.lift:hover{transform:translateY(-4px)}
.lift:active{transform:translateY(-1px) scale(.995)}

/* ============================================================
   4. 按压反馈（beui.dev: Spring-pressed Button）
   ============================================================ */
.press{transition:transform var(--dur-fast) var(--ease-out-quart),box-shadow var(--dur-fast) linear}
.press:active{transform:scale(.97)}

/* 磁吸按钮 —— app.js 写入 --mx/--my 偏移 */
.magnetic{transition:transform var(--dur-base) var(--ease-spring)}
.magnetic:hover{transform:translate(var(--tx,0),var(--ty,0))}

/* ============================================================
   5. 面板/展开（transitions.dev: Panel reveal / Accordion / Dropdown morph）
   ============================================================ */

/* 下拉/面板出现：带模糊和缩放，源点感 */
@keyframes panel-in{
  from{opacity:0;transform:translateY(-6px) scale(.97);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.panel-in{animation:panel-in var(--dur-base) var(--ease-out-quart) both;transform-origin:top right}

/* details 内容展开（grid-rows 技巧，可动画高度） */
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-in-out-soft)}
details[open] .acc-body{grid-template-rows:1fr}
.acc-body>*{overflow:hidden}

/* ============================================================
   6. 列表项入场（错峰，用于批量处理结果）
   ============================================================ */
@keyframes item-in{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:none}
}
.item-in{animation:item-in .38s var(--ease-out-quart) both}
.item-in:nth-child(1){animation-delay:.02s}
.item-in:nth-child(2){animation-delay:.06s}
.item-in:nth-child(3){animation-delay:.10s}
.item-in:nth-child(4){animation-delay:.14s}
.item-in:nth-child(5){animation-delay:.18s}
.item-in:nth-child(n+6){animation-delay:.22s}

/* ============================================================
   7. 拖放区（transitions.dev: Drag & drop with physics）
   ============================================================ */
.dz-active{
  animation:dz-breathe 1.6s var(--ease-in-out-soft) infinite;
}
@keyframes dz-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.008)}
}

/* ============================================================
   8. 进度/环形（工具处理进度）
   ============================================================ */
.ring{--p:0;width:36px;height:36px;border-radius:50%;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),rgba(255,255,255,.08) 0);
  display:grid;place-items:center;transition:--p .3s linear}
.ring::after{content:'';width:26px;height:26px;border-radius:50%;background:var(--card)}

/* ============================================================
   无障碍：尊重系统减弱动效偏好
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tilt{transform:none !important}
}