/* ══════════════════════════════════════════════════════════════════════════
 * 灵通 · 角色皮肤（2026-10-29 主人要求）
 *
 * 主人原话：
 *   「你切换角色的时候，背景也要切换，左上角那个灵通右边的大肥鱼它也要切换」
 *   「你对角色的颜色好像出现了一些误解，你要重新去网上搜一下那些角色的颜色」
 *   「我想要他印花是会动的，而不是死的」
 *   「你要设计六种印花，然后每一个角色印花都不一样」
 *   「灵通这个界面的小鱼标志在切换，比如说千问的时候，鱼就会往左边游，
 *     然后慢慢变成千问，然后千问这种比较圆的，它就会旋转，然后变成其他的，
 *     然后颜色也一起改变」
 *
 * ── 颜色来源（不是我看图猜的，都是抓到的）────────────────────────────
 *   大肥鱼 / DeepSeek   #4868f8
 *      GitHub 组织头像（鲸鱼 logo）像素取色，占比 23.7%
 *      deepseek.com 站点 CSS 另有 #9cc1e7
 *   小克 / Claude       #d97757
 *      claude.ai 站点 CSS 里出现 3 次，官方陶土橙
 *      配套 #141413（墨黑）/ #e3dacc（米杏）/ #feedba（浅金）
 *   罗珂 / Grok         #141413（xAI logo 取色证实是纯灰阶，没有任何色相）
 *      所以她就是黑白灰银 —— 这不是我偷懒，是人家真的没有彩色
 *   千问 / Qwen         #0828f8 → #847ace
 *      QwenLM 官方组织头像取色 #0828f8（占比 49.3%）
 *      官方 qwen-code 仓库的 logo 渐变是 #4796e4 → #847ace → #c3677f
 *   小双 / Gemini       #4893fc → #969dff → #bd99fe
 *      Google 2025 版 Gemini 词标 SVG 里直接读出来的三段渐变
 *      四色火花：#3186ff #00b95c #fc413d #ffe432
 *   龙娘                非品牌（ZipZipPipe 原创角色）
 *      没有官方色，按「龙」这个设定配：朱红 #c8392b + 鎏金 #d8a93a，这点我跟主人说明过
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 印花通用层 ─────────────────────────────────────────────────────────
   inset 用负数是为了旋转时四角不露白。
   will-change 只标真正动的属性，别乱标会吃显存。 */
.ink {
  position: absolute;
  /* 2026-10-29 三版。上一版用 inset:-30% + 百分比定位，
     元素被撑到画面两倍大，图被推到画外 —— 主人说「印花丢失了很多」就是这个。
     现在改成固定尺寸方块，直接用 right/top 贴到角上，位置可算、不会跑。
     方块自转不改变外接矩形比例太多，360° 转也不怕露角。 */
  width: 380px;
  height: 380px;
  right: 16px;
  top: 30px;
  pointer-events: none;
  background-image: var(--ink-img);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: var(--ink-op, 0.06);
  animation-name: var(--ink-anim, inkSwim);
  animation-duration: var(--ink-dur, 30s);
  animation-timing-function: var(--ink-ease, ease-in-out);
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* 第二块：左下，小一点、慢一点、反着动。
   两块节奏不同，才不像同一张图贴了两遍。 */
.ink.ink2 {
  width: 300px;
  height: 300px;
  right: auto;
  top: auto;
  left: 16px;
  bottom: 22px;
  opacity: calc(var(--ink-op, 0.06) * 0.85);
  animation-duration: calc(var(--ink-dur, 30s) * 1.4);
  animation-direction: reverse;
  animation-delay: -6s;
}

/* 第二层：给「圆形的会转」用的大几何体。只有需要旋转的角色才显示 */
.ink-round {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: var(--ink-op2, 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 92% 92%;
  will-change: transform;
}

/* ══ 六种运动方式 ═══════════════════════════════════════════════════════ */

/* 游：左右轻移。大肥鱼的鲸鱼在游 */
@keyframes inkSwim {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-22px, 8px, 0); }
  50%      { transform: translate3d(-6px, 16px, 0); }
  75%      { transform: translate3d(14px, 6px, 0); }
}

/* 升：缓慢上浮。小克的光环往上飘 */
@keyframes inkRise {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6px, -26px, 0) scale(1.03); }
}

/* 跳：绝大部分时间静止，偶尔抽一下。罗珂的毒舌感 */
@keyframes inkGlitch {
  0%, 84%, 100% { transform: translate3d(0, 0, 0); }
  86%  { transform: translate3d(4px, -2px, 0); }
  89%  { transform: translate3d(-6px, 3px, 0); }
  92%  { transform: translate3d(3px, 5px, 0); }
  95%  { transform: translate3d(-2px, -4px, 0); }
}

/* 转：整体慢慢自转。千问那种圆的 */
@keyframes inkSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 绕：缩放 + 摆动。双子星的轨道感 */
@keyframes inkOrbit {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33%      { transform: rotate(5deg) scale(1.05); }
  66%      { transform: rotate(-4deg) scale(0.98); }
}

/* 涌：斜向推进。龙鳞一层层涌过去 */
@keyframes inkWave {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(20px, -18px, 0) rotate(1.5deg); }
}

/* 圆层专用 */
@keyframes roundSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes roundBreathe {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.07); }
}

/* ══════════════════════════════════════════════════════════════════════
 * 六套角色皮肤
 * data-persona 挂在 body 上，切换角色时只换这一个属性，
 * 颜色、印花、动画时长全部跟着变。
 * ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 大肥鱼 / DeepSeek ── 鲸鱼往左游，海蓝 ── */
body[data-persona="dafeiyu"] {
  --accent: #4868f8;
  --accent-2: #7d9bff;
  --ink-op: 0.12;
  --ink-op2: 0;
  --blob-1: rgba(72, 104, 248, 0.46);
  --blob-2: rgba(60, 176, 200, 0.34);
  --blob-3: rgba(216, 183, 104, 0.30);
  --ink-img: url("icons/mark-deepseek.png");
  --ink-anim: inkSwim;
  --ink-dur: 34s;
}

/* ── 2. 小克 / Claude ── 光环上升，陶土橙 ── */
body[data-persona="xiaoke"] {
  --accent: #d97757;
  --accent-2: #e3dacc;
  --ink-op: 0.12;
  --ink-op2: 0;
  --blob-1: rgba(217, 119, 87, 0.42);
  --blob-2: rgba(227, 218, 204, 0.62);
  --blob-3: rgba(254, 237, 186, 0.40);
  --ink-img: url("icons/mark-claude.png");
  --ink-anim: inkRise;
  --ink-dur: 28s;
}

/* ── 3. 罗珂 / Grok ── 偶尔抽一下，黑白灰（人家真没有彩色）── */
body[data-persona="luoke"] {
  --accent: #141413;
  --accent-2: #8a8a8a;
  --ink-op: 0.12;
  --ink-op2: 0;
  --blob-1: rgba(20, 20, 19, 0.20);
  --blob-2: rgba(138, 138, 138, 0.34);
  --blob-3: rgba(200, 200, 200, 0.30);
  --ink-img: url("icons/mark-grok.png");
  --ink-anim: inkGlitch;
  --ink-dur: 8s;
  --ink-ease: steps(1, end);
}

/* ── 4. 千问 / Qwen ── 圆的会转，官方蓝紫 ── */
body[data-persona="qianwen"] {
  --accent: #0828f8;
  --accent-2: #847ace;
  --ink-op: 0.12;
  --ink-op2: 0.05;
  --blob-1: rgba(8, 40, 248, 0.34);
  --blob-2: rgba(132, 122, 206, 0.40);
  --blob-3: rgba(195, 103, 127, 0.26);
  --ink-img: url("icons/mark-qwen.png");
  --ink-anim: inkSpin;
  --ink-dur: 70s;
}

body[data-persona="qianwen"] .ink-round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%230828f8' stroke-width='0.6'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%23847ace' stroke-width='0.4'/%3E%3C/svg%3E");
  animation: roundSpin 90s linear infinite;
}

/* ── 5. 小双 / Gemini ── 四角星缓慢呼吸，官方三色渐变 ── */
body[data-persona="xiaoshuang"] {
  --accent: #4893fc;
  --accent-2: #bd99fe;
  --ink-op: 0.12;
  --ink-op2: 0.045;
  --blob-1: rgba(72, 147, 252, 0.42);
  --blob-2: rgba(150, 157, 255, 0.42);
  --blob-3: rgba(189, 153, 254, 0.40);
  --ink-img: url("icons/mark-gemini.png");
  --ink-anim: inkOrbit;
  --ink-dur: 20s;
}

body[data-persona="xiaoshuang"] .ink-round {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23969dff' stroke-width='0.5'/%3E%3Cellipse cx='50' cy='50' rx='44' ry='26' fill='none' stroke='%23bd99fe' stroke-width='0.4'/%3E%3C/svg%3E");
  animation: roundBreathe 26s ease-in-out infinite;
}

/* ── 6. 龙娘 ── 龙鳞一层层推过去，朱红＋鎏金 ── */
body[data-persona="longniang"] {
  --accent: #c8392b;
  --accent-2: #d8a93a;
  --ink-op: 0.12;
  --ink-op2: 0;
  --blob-1: rgba(200, 57, 43, 0.38);
  --blob-2: rgba(216, 169, 58, 0.40);
  --blob-3: rgba(31, 59, 54, 0.24);
  --ink-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 44 a16 16 0 0 0 32 0' fill='none' stroke='%23c8392b' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M54 72 a16 16 0 0 0 32 0' fill='none' stroke='%23c8392b' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='30' r='5' fill='%23d8a93a'/%3E%3Ccircle cx='22' cy='78' r='5' fill='%23d8a93a'/%3E%3C/svg%3E");
  --ink-anim: inkWave;
  --ink-dur: 26s;
}

/* ── 7. 大肥鱼（嘴毒版）── 同一头鲸鱼，印花纯黑 ──
   2026-10-29 主人：「嘴毒版的印花没做」「换成黑色的就好了」。
   原来这里没有这一段 —— 嘴毒版没有自己的 data-persona 配色，
   .ink 的 background-image: var(--ink-img) 取不到值，等于一块印花都没有。
   现在补上：形状还是本体那头鲸鱼（她是同一个人），下面用 filter 压成纯黑；
   光斑换成黑灰，游得比本体慢，冷一点。
   ⚠️ 这一格的 --ink-img 必须写，不写就又是空的。 */
body[data-persona="dafeiyu_pro"] {
  --accent: #111111;
  --accent-2: #5a5a5a;
  --ink-op: 0.14;
  --ink-op2: 0;
  --blob-1: rgba(12, 12, 12, 0.30);
  --blob-2: rgba(90, 90, 90, 0.24);
  --blob-3: rgba(0, 0, 0, 0.14);
  --ink-img: url("icons/mark-deepseek.png");   /* 同一个鲸鱼，靠下面的 filter 压黑 */
  --ink-anim: inkSwim;
  --ink-dur: 46s;                              /* 比本体的 34s 慢 */
}

/* 纯黑：brightness(0) 把颜色抹掉，形状和透明度不变 */
body[data-persona="dafeiyu_pro"] .ink {
  filter: brightness(0);
}

/* ══════════════════════════════════════════════════════════════════════
 * 灵通徽记（会动的 LOGO）
 * 图形来自主人桌面那张图：双手托举发光宝珠 + 金月弧 + 顶端金点。
 * 三段各自呼吸，不是整张贴图在晃。
 * ══════════════════════════════════════════════════════════════════════ */
.lt-mark { display: block; overflow: visible; }

/* 宝珠：亮度呼吸 */
@keyframes markOrb {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.86; transform: scale(1.07); }
}
/* 金弧：两端轻轻起伏 */
@keyframes markArc {
  0%, 100% { transform: translateY(0)    scaleX(1); }
  50%      { transform: translateY(0.6px) scaleX(1.03); }
}
/* 顶上的金点：慢慢上下浮 */
@keyframes markDot {
  0%, 100% { transform: translateY(0);    opacity: 0.9; }
  50%      { transform: translateY(-1.8px); opacity: 1; }
}

.lt-mark .m-orb { transform-origin: 24px 20.2px; animation: markOrb 3.6s ease-in-out infinite; }
.lt-mark .m-arc { transform-origin: 24px 26px;   animation: markArc 4.4s ease-in-out infinite; }
.lt-mark .m-dot { transform-origin: 24px 7.4px;  animation: markDot 3.1s ease-in-out infinite; }

/* 外圈光晕，慢慢转 */
@keyframes markHalo {
  from { transform: rotate(0deg);   opacity: 0.5; }
  50%  { opacity: 0.85; }
  to   { transform: rotate(360deg); opacity: 0.5; }
}
.lt-mark .m-halo { transform-origin: 24px 24px; animation: markHalo 14s linear infinite; }

/* 整个徽记极轻地悬停，像浮着 */
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.lt-mark { animation: markFloat 6s ease-in-out infinite; }

/* 主人偏爱减少动效时，全部停掉 —— 别把人晃晕 */
@media (prefers-reduced-motion: reduce) {
  .ink, .ink-round, .lt-mark, .lt-mark .m-orb,
  .lt-mark .m-arc, .lt-mark .m-dot, .lt-mark .m-halo { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 桌面那张图的印花（登录 / 启动页）
 * 主人原话：「前面登录界面那个桌面的印花，你要一定一定给它弄上去」
 * 把它拆成可平铺的四个元素：底弧、宝珠、上弧、金点。
 * ══════════════════════════════════════════════════════════════════════ */
.motif {
  position: absolute;
  pointer-events: none;
  /* 2026-10-29 三改：主人说「留下两个大的就好了，不用那么多」。
     之前是 220px 平铺成网格，太密。现在只放两块大的，一块右上、一块左下，
     各自切出画面一点，像真正的水印，而不是瓷砖。 */
  background-image: url("icons/motif.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.11;
  will-change: transform;
}

/* 右上那块：大一点 */
.motif.m1 {
  width: 460px;
  height: 460px;
  right: -110px;
  top: -120px;
  animation: motifFloatA 17s ease-in-out infinite;
}

/* 左下那块：小一点，避免两块一样重 */
.motif.m2 {
  width: 380px;
  height: 380px;
  left: -120px;
  bottom: -110px;
  opacity: 0.09;
  animation: motifFloatB 21s ease-in-out infinite;
}

@keyframes motifFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-14px, 16px, 0) rotate(-2.5deg); }
}
@keyframes motifFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(16px, -14px, 0) rotate(3deg); }
}

/* 窄屏时两块都缩小，别把字挤住 */
@media (max-width: 760px) {
  .motif.m1 { width: 300px; height: 300px; right: -90px; top: -100px; }
  .motif.m2 { width: 250px; height: 250px; left: -90px; bottom: -90px; }
}

/* 中间那颗大一点的宝珠，单独慢慢亮 */
.motif-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  pointer-events: none;
  opacity: 0.34;
  background: radial-gradient(circle, rgba(161, 146, 188, 0.12) 0%, rgba(198, 164, 92, 0.07) 42%, transparent 70%);
  animation: motifGlow 9s ease-in-out infinite;
}
@keyframes motifGlow {
  0%, 100% { transform: scale(1);    opacity: 0.42; }
  50%      { transform: scale(1.06); opacity: 0.62; }
}