/* 小铺 /shop/（2026-11-06 起的卡片版）：只这一页加载。页面由 tools/shopgen.py 生成，悬停的脚本是 shop.js。
   照样稿 B「原样 logo 墙」和悬停丙（~/claude-workbench/outputs/2026-11-06-小铺卡片样稿/）。只用 ui.css 的变量，昼夜跟着全站走。
   静止时没有动画：「敬请期待」底下的朱笔进页面时写一次（同首页「成事」那一笔），别的动作都只在悬停（手机上点一下）时演一遍。 */
.lg { display: block; }
.w-cs { position: relative; white-space: nowrap; }
.brush { position: absolute; left: -4%; bottom: -.2em; width: 108%; height: .32em; fill: var(--accent); clip-path: inset(0 100% 0 0); animation: shop-brush .7s cubic-bezier(.6, .05, .3, 1) .35s forwards; }
@keyframes shop-brush { to { clip-path: inset(0 0 0 0); } }

/* ---------- 页头：居中大字「敬请期待」、一句话、朱键 ---------- */
.shop-hero { padding-block: clamp(56px, 8vw, 112px) clamp(30px, 4vw, 52px); text-align: center; }
.shop-title { font-family: var(--font-head); font-size: clamp(42px, 6vw, 84px); font-weight: var(--w-display); line-height: 1.1; letter-spacing: var(--track-display); color: var(--ink); }
.shop-lead { margin-top: 26px; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.8; color: var(--ink-soft); }
.shop-actions { margin-top: 26px; }

/* ---------- logo 墙：五列（1099 以下三列、最后一行不满的居中，599 以下两列），每块是原样的色标 + 字标，底下小字是那件周边 ---------- */
.shop-body { padding-bottom: clamp(56px, 8vw, 104px); }
.shop-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; -webkit-tap-highlight-color: transparent; }
.lt { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-width: 0; min-height: 156px; padding: 24px 12px 16px;
  border: 1px solid var(--edge-soft); border-radius: var(--r-xl); background: var(--surface-card); box-shadow: var(--shadow-card);
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color var(--t-base) ease-out, box-shadow 220ms ease-out, opacity .35s ease-out .15s, filter .35s ease-out .15s; }
.lt-lock { display: flex; align-items: center; justify-content: center; gap: 9px; height: 40px; color: var(--ink); }
.lt-mark .lg { width: 34px; height: 34px; }
.lt-word .lw { width: auto; height: 21px; }
.lt-claudecode .lt-word .lw { height: 31px; }
.lt-muse .lt-word .lw { height: 25px; transform: translateY(-9%); }   /* Muse 字标的字在框里偏下，提回和同排对齐 */
.lt-zhipu .lt-word .lw { height: 21px; }
.lt-doubao .lt-word .lw { height: 19px; }
.lt-word .lw-text { display: block; font-family: var(--font-sans); font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }   /* ChatGPT：OpenAI 没有公开的字标文件，用字排 */
.lt-deepseek .lt-word { color: #4d6bfe; }   /* DeepSeek 的字标原样是蓝的 */
.lt-item { font-size: 13px; color: var(--ink-soft); transition: color .3s; }
.shop-note { margin-top: 28px; font-size: 12.5px; line-height: 1.7; color: var(--muted); text-align: center; }
/* 三列：六条轨道、每块占两条，最后一行剩一块或两块时挪到中间（十块是 3+3+3+1） */
@media (max-width: 1099px) {
  .shop-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lt { grid-column: span 2; }
  .lt:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  .lt:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}
@media (max-width: 599px) {
  .shop-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lt, .lt:last-child:nth-child(3n + 1), .lt:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }
  .lt { min-height: 124px; gap: 12px; padding: 18px 8px 12px; }
  .lt-lock { gap: 6px; height: 30px; }
  .lt-mark .lg { width: 26px; height: 26px; }
  .lt-word .lw { height: 16px; }
  .lt-word .lw-text { font-size: 16px; }
  .lt-claudecode .lt-word .lw { height: 23px; }
  .lt-muse .lt-word .lw { height: 19px; }
  .lt-doubao .lt-word .lw, .lt-zhipu .lt-word .lw { height: 15px; }
}

/* ---------- 悬停（Leon 11-06「把 hover 效果做酷炫一些，但依然和站点的整体风格融洽、和谐」，三种里选丙：两样都要）----------
   卡片：浮起 4px、细边深一档、影子多一层（同全站卡片）；跟着鼠标轻轻倾斜，一片淡淡的暖光跟着鼠标走，别的卡淡下去。
   商品名底下写出一笔朱色（同「敬请期待」那一笔），移开收回。
   logo：放大一点，每家演一下自己那件周边（下面「各家的动作」）。动作挂在 .play 上：鼠标进来 shop.js 加上，这张卡里的动画都跑完再摘掉
   （中途移开也演完，不会弹回去）；倾斜的 --rx --ry 和光的 --mx --my 只在鼠标移动时算。静止时没有动画、没有循环。
   手机：手指抬起才算点（滑动不算），点一下演一遍，.tap 留 1.6 秒（灯亮着、朱笔写着）。 */
:root { --shop-glare: color-mix(in srgb, var(--accent) 9%, transparent); }
:root[data-theme="dark"] { --shop-glare: rgb(255 255 255 / .09); }
.lt::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease-out;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 35%), var(--shop-glare), transparent 62%); }
.lt-item .it { position: relative; display: inline-block; }
.lt-item .ib { position: absolute; left: -8%; bottom: -.36em; width: 116%; height: .44em; fill: var(--accent); clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.6, .05, .3, 1); pointer-events: none; }
.lt-mark { display: block; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
/* 「亮着」的样子两份：有鼠标的设备跟 :hover 走；手机跟 .tap 走（不用 :hover，手机上点过的卡会一直挂着 :hover） */
@media (hover: hover) and (pointer: fine) {
  .lt:hover { --lift: -4px; border-color: var(--edge); box-shadow: var(--shadow-card-hover);
    transition: transform .14s ease-out, border-color var(--t-base) ease-out, box-shadow 220ms ease-out, opacity .35s ease-out, filter .35s ease-out; }
  .lt:hover::after { opacity: 1; }
  /* 别的卡淡下去时不等；亮回来等 .15 秒（上面 .lt 的 transition）：鼠标穿过卡片之间的空隙去下一张时，别的卡不先亮一下再淡 */
  .shop-wall:has(.lt:hover) .lt:not(:hover) { opacity: .64; filter: saturate(.5);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color var(--t-base) ease-out, box-shadow 220ms ease-out, opacity .35s ease-out, filter .35s ease-out; }
  .lt:hover .lt-item { color: var(--ink); }
  .lt:hover .ib { clip-path: inset(0 0 0 0); }
  .lt:hover .lt-mark { transform: scale(1.14); }
  .lt-minimax:hover .lt-mark .lg { filter: var(--shop-neon); }
  .lt-kimi:hover .kg { opacity: 1; transform: none; }
  .lt-zhipu:hover .lt-mark .lg { filter: var(--shop-dots); }
}
.lt.tap::after { opacity: 1; }
.lt.tap .lt-item { color: var(--ink); }
.lt.tap .ib { clip-path: inset(0 0 0 0); }
.lt.tap .lt-mark { transform: scale(1.14); }
.lt-minimax.tap .lt-mark .lg { filter: var(--shop-neon); }
.lt-kimi.tap .kg { opacity: 1; transform: none; }
.lt-zhipu.tap .lt-mark .lg { filter: var(--shop-dots); }

/* ---------- 各家的动作（演自己那件周边）---------- */
.lt-mark .lg, .lt-word .lw { transform-origin: 50% 50%; }
.lt-deepseek .lt-mark .lg, .lt-kimi .lt-mark .lg, .lt-chatgpt .lt-mark .lg, .lt-zhipu .lt-mark .lg { overflow: visible; }
.lid, .bub, .qp, .kd, .kg, .cg, .ring, .dt { transform-box: fill-box; transform-origin: center; }
/* Claude Code 小机器人：一格一格地原地蹦两下，落地眨一下眼 */
.lid { transform-origin: 50% 0; transform: scaleY(0); }
.lt-claudecode.play .lt-mark .lg { transform-origin: 50% 100%; animation: fx-hop .96s steps(1, end) both; }
.lt-claudecode.play .lid { animation: fx-blink .96s steps(1, end) both; }
@keyframes fx-hop { 0% { transform: none } 8% { transform: translateY(1px) scale(1.07, .88) } 16% { transform: translateY(-7px) } 25% { transform: translateY(-12px) } 33% { transform: translateY(-7px) } 41% { transform: translateY(1px) scale(1.07, .88) } 50% { transform: translateY(-4px) } 58% { transform: translateY(-6px) } 66% { transform: translateY(-3px) } 75% { transform: scale(1.04, .94) } 83%, 100% { transform: none } }
@keyframes fx-blink { 0%, 83% { transform: scaleY(0) } 87% { transform: scaleY(1) } 93%, 100% { transform: scaleY(0) } }
/* DeepSeek 大肥鱼抱枕：摆一摆游一下，冒两个泡 */
.bub { opacity: 0; }
.lt-deepseek.play .lt-mark .lg { animation: fx-swim 1.15s cubic-bezier(.45, .05, .35, 1) both; }
.lt-deepseek.play .bub1 { animation: fx-bub .9s ease-out .22s both; }
.lt-deepseek.play .bub2 { animation: fx-bub .9s ease-out .4s both; }
@keyframes fx-swim { 0% { transform: none } 22% { transform: translate(-3px, 1px) rotate(-9deg) } 48% { transform: translate(2px, -2px) rotate(7deg) } 72% { transform: translate(-1px, 1px) rotate(-3deg) } 100% { transform: none } }
@keyframes fx-bub { 0% { opacity: 0; transform: translateY(1px) scale(.4) } 25% { opacity: .9 } 100% { opacity: 0; transform: translateY(-6px) scale(1.15) } }
/* 豆包 软胶捏捏：压扁、弹起、晃两下回原样 */
.lt-doubao.play .lt-mark .lg { transform-origin: 50% 92%; animation: fx-squish .95s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes fx-squish { 0% { transform: none } 16% { transform: scale(1.24, .76) } 34% { transform: scale(.86, 1.16) } 52% { transform: scale(1.08, .93) } 70% { transform: scale(.97, 1.03) } 86% { transform: scale(1.01, .99) } 100% { transform: none } }
/* Grok 背包扣：挂在包上来回荡 */
.lt-grok.play .lt-mark .lg { transform-origin: 50% -22%; animation: fx-swing 1.35s cubic-bezier(.36, 0, .3, 1) both; }
@keyframes fx-swing { 0% { transform: none } 14% { transform: rotate(17deg) } 33% { transform: rotate(-10deg) } 52% { transform: rotate(7deg) } 69% { transform: rotate(-4deg) } 84% { transform: rotate(1.5deg) } 100% { transform: none } }
/* MiniMax 霓虹灯：两段灯管先后闪两下点亮，亮着时有光晕 */
.lt-minimax { --shop-neon: drop-shadow(0 0 1.5px rgb(255 70 120 / .85)) drop-shadow(0 0 8px rgb(255 70 120 / .45)); }
.lt-minimax .lt-mark .lg { transition: filter .45s ease-out; }
.lt-minimax.play .mt1 { animation: fx-neon .9s steps(1, end) both; }
.lt-minimax.play .mt2 { animation: fx-neon .9s steps(1, end) .14s both; }
@keyframes fx-neon { 0% { opacity: 1 } 6% { opacity: .15 } 12% { opacity: 1 } 20% { opacity: .25 } 24% { opacity: .9 } 32% { opacity: .3 } 38%, 100% { opacity: 1 } }
/* 通义千问 磁吸积木：三块弹开，再「咔」地吸回去 */
.lt-qwen.play .qp1 { animation: fx-q1 .85s cubic-bezier(.2, .8, .25, 1) both; }
.lt-qwen.play .qp2 { animation: fx-q2 .85s cubic-bezier(.2, .8, .25, 1) both; }
.lt-qwen.play .qp3 { animation: fx-q3 .85s cubic-bezier(.2, .8, .25, 1) both; }
.lt-qwen.play .lt-mark .lg { animation: fx-snap .85s ease-out both; }
@keyframes fx-q1 { 0% { transform: none } 38% { transform: translate(1.6px, -3.2px) rotate(9deg) } 64% { transform: translate(-.4px, .6px) rotate(-1deg) } 74%, 100% { transform: none } }
@keyframes fx-q2 { 0% { transform: none } 38% { transform: translate(-3.4px, .4px) rotate(-10deg) } 64% { transform: translate(.6px, 0) rotate(1deg) } 74%, 100% { transform: none } }
@keyframes fx-q3 { 0% { transform: none } 38% { transform: translate(2.2px, 3px) rotate(8deg) } 64% { transform: translate(-.4px, -.5px) rotate(-1deg) } 74%, 100% { transform: none } }
@keyframes fx-snap { 0%, 62% { transform: none } 70% { transform: scale(1.09) } 82% { transform: scale(.97) } 100% { transform: none } }
/* Kimi 小夜灯：蓝点一跳亮起来，亮着时身后一圈蓝光 */
.kg { opacity: 0; transform: scale(.4); transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1); }
.lt-kimi.play .kd { animation: fx-lamp .9s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes fx-lamp { 0% { transform: none } 28% { transform: scale(1.6) } 50% { transform: scale(.9) } 70% { transform: scale(1.2) } 100% { transform: none } }
/* Muse 灵感本：手写的 M 一下擦掉、再从左往右重写一遍 */
.lt-muse.play .lt-mark .lg { animation: fx-write .95s cubic-bezier(.5, .1, .35, 1) both; }
@keyframes fx-write { 0% { clip-path: inset(0 0 0 0) } 9% { clip-path: inset(0 0 0 100%) } 10% { clip-path: inset(0 100% 0 0) } 100% { clip-path: inset(0 0 0 0) } }
/* ChatGPT 门禁卡：花形拧一格（六瓣，转 60° 回到原样），刷卡的两圈感应波 */
.ring { opacity: 0; }
.lt-chatgpt.play .cg { animation: fx-dial .95s cubic-bezier(.55, -.35, .3, 1.35) both; }
.lt-chatgpt.play .ring1 { animation: fx-ring .9s ease-out .32s both; }
.lt-chatgpt.play .ring2 { animation: fx-ring .9s ease-out .5s both; }
@keyframes fx-dial { 0% { transform: none } 100% { transform: rotate(60deg) } }
@keyframes fx-ring { 0% { opacity: 0; transform: scale(.55) } 12% { opacity: .75 } 100% { opacity: 0; transform: scale(1.45) } }   /* 开头透明：两圈都晚开始，等的时候不能压着一圈在花形上；最大 1.45 倍，碰不到「ChatGPT」 */
/* 智谱 点阵灯牌：点从中间一圈圈亮开 */
.lt-zhipu { --shop-dots: drop-shadow(0 0 4px rgb(56 89 255 / .45)); }
.lt-zhipu .lt-mark .lg { transition: filter .5s ease-out; }
.lt-zhipu.play .dt { animation: fx-dot .6s cubic-bezier(.3, .7, .3, 1) calc(var(--i, 0) * 75ms) both; }
@keyframes fx-dot { 0% { transform: none } 40% { transform: scale(1.6); fill: #8ea2ff } 100% { transform: none } }

/* 系统开了「减少动态效果」：朱笔直接写好；卡片不浮不斜、logo 不放大不动，只剩颜色、光和别的卡淡下去（shop.js 也不加 .play、不算倾斜） */
@media (prefers-reduced-motion: reduce) {
  .brush { animation: none; clip-path: none; }
  .lt, .lt * { animation: none !important; }
  .lt, .lt:hover { transform: none !important; }
  .lt-mark, .kg { transform: none !important; }
  .lt-mark { transition: none; }
  .kg { transition: opacity .5s ease-out; }
  .lt-item .ib { transition: none; }
}