/* 拷贝自 laplace-work/design/system/motion.css(设计包 0929 版·唯一设计源)。不要在官网里改,要改先改设计包再同步。 */
/* ==========================================================================
Laplace 设计包 · motion.css
跟框架无关的质感 + 动效配方。类名统一 lw- 前缀，可以直接挂到任意组件上
（React 的 className / Vue 的 class / ElementPlus 组件的 class 都行）。
依赖 tokens.css。
克制原则（谷 0929 定「酷但克制」）：
- 平时安静：悬停、选中只用小幅回弹。
- 只在 4 个时刻"炸"：首次打开、登录成功、发送、回复完成。
- 全屏墨水转场 / 像素爆散只准用在这 4 个时刻。
========================================================================== */
/* ---------- 1. 进场：回弹上浮 + 错峰 ----------
用法：列表项加 lw-in，并设 style="--i: 序号"。 */
.lw-in {
animation: lw-rise .55s var(--lw-spring) both;
animation-delay: calc(var(--i, 0) * var(--lw-stagger) + 40ms);
}
@keyframes lw-rise { from { opacity: 0; translate: 0 14px; scale: .97; } }
/* 消息气泡进场（从发送方一侧长出来） */
.lw-msg-in { animation: lw-msg .55s var(--lw-spring) both; }
@keyframes lw-msg { from { opacity: 0; translate: 0 16px; scale: .92; } }
/* ---------- 2. 墨水按钮：渐变从指针处涌出 ----------
用法：按钮加 lw-ink；配合 fx.js 的 inkButton(el) 记录指针位置。
主操作按钮（发送、登录、主 CTA）才用，别每个按钮都上。 */
.lw-ink {
--mx: 50%; --my: 50%;
position: relative; overflow: hidden; isolation: isolate;
transition: transform .35s var(--lw-spring);
}
.lw-ink::before {
content: ""; position: absolute; z-index: -1;
left: var(--mx); top: var(--my); width: 260%; aspect-ratio: 1;
translate: -50% -50%;
border-radius: 43% 57% 51% 49% / 47% 42% 58% 53%; /* 有机墨团，不是正圆 */
background: var(--lw-grad);
scale: 0; rotate: -40deg;
transition: scale .55s var(--lw-out), rotate .55s var(--lw-out);
}
.lw-ink::after { /* 高光 */
content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(circle at 70% 25%, rgb(255 255 255 / .28), transparent 45%);
opacity: 0; transition: opacity .3s;
}
.lw-ink:hover::before, .lw-ink:focus-visible::before { scale: 1; rotate: 0deg; }
.lw-ink:hover::after { opacity: 1; }
.lw-ink:hover { color: #fff; }
/* ---------- 3. 按下挤压 + 松开回弹 ----------
fx.js 的 pressable(el) 会自动加减这两个类。 */
.lw-down { scale: .955; transition: scale .08s; }
.lw-pop { animation: lw-press .32s var(--lw-spring); }
@keyframes lw-press { 0% { scale: .93; translate: 0 2px; } 100% { scale: 1; translate: 0 0; } }
/* ---------- 4. 分段选择器：药丸滑动 + 挤扁 ----------
容器 lw-seg（设 --n 个选项、--idx 当前序号），里面放一个 lw-seg-pill。
切换时给 pill 重新加一次 lw-squish（fx.js 的 restart）。 */
.lw-seg { --n: 2; --idx: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.lw-seg-pill {
position: absolute; top: 3px; bottom: 3px; left: 3px;
width: calc((100% - 6px) / var(--n));
border-radius: 999px; background: var(--lw-grad);
box-shadow: 0 3px 0 rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .35);
transform: translateX(calc(var(--idx) * 100%));
transition: transform .45s var(--lw-spring);
}
.lw-squish { animation: lw-squish .45s var(--lw-spring); }
@keyframes lw-squish { 0% { scale: 1 1; } 30% { scale: 1.1 .78; } 60% { scale: .97 1.06; } 100% { scale: 1 1; } }
/* ---------- 5. 盖章进场：工具步骤、徽章、"已完成" ---------- */
.lw-stamp { animation: lw-stamp .5s var(--lw-spring2) both; }
@keyframes lw-stamp { 0% { opacity: 0; scale: 1.6; rotate: -6deg; } 55% { opacity: 1; scale: .95; rotate: 1deg; } 100% { scale: 1; rotate: 0deg; } }
/* 打勾：父元素加 lw-done 时弹出 */
.lw-check { opacity: 0; scale: 0; rotate: -40deg; transition: all .4s var(--lw-spring2); }
.lw-done .lw-check { opacity: 1; scale: 1; rotate: 0deg; }
/* ---------- 6. 流式文字：每个片段模糊着"流"进来 ----------
fx.js 的 streamText() 会把每段文字包成 span.lw-tok。 */
.lw-tok { animation: lw-tok .5s var(--lw-out) both; }
@keyframes lw-tok { from { opacity: 0; filter: blur(6px); translate: 0 .3em; } }
/* ---------- 7. "思考中"像素方块 ----------
*/
.lw-pix { display: inline-grid; grid-template-columns: repeat(2, 6px); gap: 3px; }
.lw-pix b { width: 6px; height: 6px; border-radius: 1.5px; animation: lw-pix 1.1s var(--lw-out) infinite; }
.lw-pix b:nth-child(1) { background: var(--lw-orange); }
.lw-pix b:nth-child(2) { background: var(--lw-magenta); animation-delay: 180ms; }
.lw-pix b:nth-child(3) { background: var(--lw-blue); animation-delay: 540ms; }
.lw-pix b:nth-child(4) { background: var(--lw-violet); animation-delay: 360ms; }
@keyframes lw-pix { 0%, 100% { scale: .4; opacity: .35; } 45% { scale: 1; opacity: 1; } }
/* ---------- 8. 结果卡：一次性高光扫过 + 跟指针倾斜反光 ----------
卡片加 lw-card；fx.js 的 tilt(el) 负责倾斜和反光位置。 */
.lw-card {
--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
position: relative; overflow: hidden;
transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .6s var(--lw-spring);
}
.lw-card.lw-track { transition: transform .15s var(--lw-out); }
.lw-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .18) 48%, transparent 60%);
translate: -120% 0; animation: lw-glint 1.1s var(--lw-out) .5s both;
}
.lw-card::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / .14), transparent 42%);
}
@keyframes lw-glint { to { translate: 120% 0; } }
/* ---------- 9. 贴纸提示（toast）：硬描边 + 歪一点 + 弹入 ---------- */
.lw-sticker {
box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 0 0 4px #15121c, 5px 7px 0 4px rgb(0 0 0 / .4);
animation: lw-sticker-in .5s var(--lw-spring2) both;
}
@keyframes lw-sticker-in { 0% { opacity: 0; translate: 40px 0; scale: .7; rotate: 6deg; } 100% { opacity: 1; rotate: -1.5deg; } }
/* ---------- 10. 背景质感 ---------- */
.lw-grain { background-image: var(--lw-grain); }
.lw-dots-fade { position: relative; }
.lw-dots-fade::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: var(--lw-dots); background-size: 16px 16px;
-webkit-mask-image: linear-gradient(160deg, #000, transparent 45%);
mask-image: linear-gradient(160deg, #000, transparent 45%);
}
/* ---------- 11. 在线脉冲点 ---------- */
.lw-live { width: 6px; height: 6px; border-radius: 50%; background: var(--lw-good); animation: lw-ping 2s infinite; }
@keyframes lw-ping { 0% { box-shadow: 0 0 0 0 rgb(61 220 151 / .55); } 80%, 100% { box-shadow: 0 0 0 7px rgb(61 220 151 / 0); } }
/* ---------- 12. 像素爆散的粒子（fx.js burst() 生成） ---------- */
.lw-burst {
position: fixed; width: 9px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 9999;
animation: lw-burst .75s cubic-bezier(.2, .75, .35, 1) forwards;
}
@keyframes lw-burst { 0% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--r); scale: .3; } }
/* ---------- 13. 品牌标：logo 方块 + 像素从四周聚拢（首次打开 / 空状态） ----------
![]()
…
像素的起点 --x/--y、旋转 --r、延迟 --d 由调用方给（fx.js 的 gatherPixels 生成）。 */
.lw-mark { position: relative; display: inline-grid; place-items: center; }
.lw-mark::before { /* 渐变光晕 */
content: ""; position: absolute; inset: -35%; z-index: 0; pointer-events: none;
background: radial-gradient(closest-side, rgb(226 60 181 / .28), rgb(47 123 255 / .12) 55%, transparent 75%);
filter: blur(8px); opacity: 0; animation: lw-fade-in 1.2s var(--lw-out) .5s forwards;
}
.lw-mark > img {
position: relative; z-index: 1; display: block; border-radius: 24%;
box-shadow: 0 0 0 1px rgb(255 255 255 / .12), var(--lw-lift-sm);
animation: lw-mark-in .9s var(--lw-spring2) .45s both;
}
.lw-px {
position: absolute; z-index: 2; left: calc(50% - 5px); top: calc(50% - 5px);
width: 10px; height: 10px; border-radius: 2px; opacity: 0; pointer-events: none;
animation: lw-gather .75s var(--lw-out) both; animation-delay: var(--d, 0ms);
}
@keyframes lw-mark-in { 0% { opacity: 0; scale: .6; rotate: -10deg; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes lw-gather {
0% { opacity: 0; translate: var(--x) var(--y); rotate: var(--r); scale: 1.4; }
35% { opacity: 1; }
85% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
100% { opacity: 0; translate: 0 0; scale: .2; }
}
@keyframes lw-fade-in { to { opacity: 1; } }
/* ---------- 14. 渐变字：字标、问候语里的品牌词 ---------- */
.lw-grad-text { background: var(--lw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------- 减少动效：尊重系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
[class*="lw-"], [class*="lw-"]::before, [class*="lw-"]::after {
animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important;
}
}