/* ═══════════════════════════════════════════════════════════════════════
   岚序千像 LX · 标识动画样式表
   ───────────────────────────────────────────────────────────────────────
   将本文件引入页面后，给内联 SVG 添加对应 class 即可触发动画：
     .lxi              基础容器（必需）
     .lxi-idle         常态呼吸
     .lxi-hover        悬停对焦（鼠标移上去触发）
     .lxi-load         加载旋转（AI 生成中）
     .lxi-capture      快门一次（一次性动画，配合 JS 添加/移除 class 触发）
     .lxi-dark         深底版本（自动反色）

   内联 SVG 模板见 snippet-inline-svg.html
   ═══════════════════════════════════════════════════════════════════════ */

.lxi {
  --s: 64px;
  --stroke: 4.5;
  --color: #14110d;
  --accent: #c9784a;
  width: var(--s);
  height: var(--s);
  display: inline-block;
  overflow: visible;
  flex-shrink: 0;
}
.lxi-dark { --color: #e8e2d4; }

/* 四角的 transform-origin 设到自己最外的角，让动画看起来像
   "向中心收拢/远离" 而不是从中心缩放 */
.lxi .c {
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.lxi .c-tl { transform-origin: 8px 8px; }
.lxi .c-tr { transform-origin: 92px 8px; }
.lxi .c-br { transform-origin: 92px 92px; }
.lxi .c-bl { transform-origin: 8px 92px; }
.lxi .L   { transform-origin: 50px 50px;
            transition: transform .45s cubic-bezier(.4,0,.2,1); }
.lxi .dot { transform-origin: 92px 8px;
            transition: transform .35s cubic-bezier(.4,0,.2,1), fill .25s; }

/* ─── IDLE · 常态呼吸（默认状态推荐） ────────────────────────────── */
@keyframes lxi-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.92); }
}
.lxi-idle .c    { animation: lxi-breathe 4.2s ease-in-out infinite; }
.lxi-idle .c-tr { animation-delay: 0.15s; }
.lxi-idle .c-br { animation-delay: 0.30s; }
.lxi-idle .c-bl { animation-delay: 0.45s; }
@keyframes lxi-dot-blink {
  0%, 92%, 100% { opacity: 1; }
  96%           { opacity: 0.25; }
}
.lxi-idle .dot { animation: lxi-dot-blink 4.2s ease-in-out infinite; }

/* ─── HOVER · 悬停对焦（按钮 / 链接 / CTA 上推荐） ──────────────── */
.lxi-hover:hover .c-tl { transform: translate(10px, 10px); }
.lxi-hover:hover .c-tr { transform: translate(-10px, 10px); }
.lxi-hover:hover .c-br { transform: translate(-10px, -10px); }
.lxi-hover:hover .c-bl { transform: translate(10px, -10px); }
.lxi-hover:hover .L    { transform: scale(0.92); }
.lxi-hover:hover .dot  { transform: scale(2.2); fill: #ffb070; }

/* ─── LOAD · 加载旋转（AI 生成等待中使用） ───────────────────────── */
@keyframes lxi-spin { to { transform: rotate(360deg); } }
.lxi-load .corners {
  transform-origin: 50px 50px;
  animation: lxi-spin 3.2s linear infinite;
}
@keyframes lxi-dot-tick {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}
.lxi-load .dot { animation: lxi-dot-tick .9s ease-in-out infinite; }

/* ─── CAPTURE · 一次快门（用 JS 添加/移除此 class 触发） ──────────── */
@keyframes lxi-capture-frame {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.86); }
  55%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes lxi-capture-dot {
  0%   { transform: scale(1); fill: var(--accent); }
  20%  { transform: scale(2.6); fill: #fff; }
  50%  { transform: scale(1.4); fill: #ffb070; }
  100% { transform: scale(1); fill: var(--accent); }
}
.lxi-capture .c   { animation: lxi-capture-frame 1s cubic-bezier(.34,1.56,.64,1); }
.lxi-capture .c-tr { animation-delay: 0.03s; }
.lxi-capture .c-br { animation-delay: 0.06s; }
.lxi-capture .c-bl { animation-delay: 0.09s; }
.lxi-capture .dot { animation: lxi-capture-dot 1s cubic-bezier(.4,0,.2,1); }

/* JS 触发 capture 示例：
   svg.classList.remove('lxi-capture');
   void svg.offsetWidth;   // 强制重排，让动画能重复触发
   svg.classList.add('lxi-capture');
*/