/* ============================================================
   英特费斯 INTERFACE · 客户标识墙 wall.css（2026-09-06）

   43 个真实客户标识（源文件在「英特费斯 2026 简介」的客户公司logo/，
   由 tools/prep-clients.py 去白底 + 裁边 + 出 WebP）。

   为什么默认是剪影：
     客户标识来自 43 家不同公司，红蓝黄绿撞在一面墙上必然是杂货铺。
     统一压成墨色剪影（brightness(0) + 30% 透明）先把这面墙变成一件排版作品，
     再用两种方式还原原色 —— 小机器人擦过（滚动）、鼠标停上去（悬停）。
     「原色太浅」的三个（铁福来 / 佰陆染织 / 新云滕）由 prep 脚本标成 mono，
     只提亮不还原颜色，否则白字标识在白墙上等于消失。

   炫的地方都花在这几处，其它一律克制：
     1. 逐格 clip-path 揭示入场（按 --i 错开）
     2. 机器人擦亮（bot.css 的创意 07）
     3. 悬停聚光：其余格子退到 42%，只有它是亮的
     4. 悬停 3D 微倾（wall.js 写 --rx/--ry，幅度压在 6deg 内）
     5. 头部客户（S/A）左上角一个角标，不是满墙贴纸
   ============================================================ */

.wallsec { position: relative; }

.wallsec__head {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end; margin-bottom: 34px;
}
.wallsec__head > div:last-child { justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .wallsec__head { grid-template-columns: 1fr; }
  .wallsec__head > div:last-child { justify-self: start; text-align: left; }
}

/* 墙头右侧说明：把「为什么是剪影」和数量一起讲掉，
   数字不再单独排一行 —— 首屏已经有一排四个数了，这里再来一排就是重复 */
.wallsec__say {
  font: 400 14px/1.7 var(--font); color: rgba(34, 34, 34, 0.68);
  max-width: 40ch; margin: 0;
}
.wallsec__say b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   墙体：细线画在格子自己的右下边（box-shadow），不靠容器底色

   为什么不用「1px gap + 容器底色」那招：标识数量除不尽列数，
   最后一行会剩几个空格，容器底色直接露成一大块灰砖。
   画在格子上，尾巴就是自然的参差收边。
   也不能用 overflow:hidden —— 擦亮的机器人要从格子上方探出来。
   ------------------------------------------------------------ */
.wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  isolation: isolate;
}

.wall__tile {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  padding: 26px 30px;
  background: var(--ground);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  text-decoration: none;
  transition: opacity 0.34s var(--bot-ease, ease), background 0.28s ease,
              transform 0.42s cubic-bezier(0.22, 0.65, 0.25, 1), box-shadow 0.34s ease;
}
a.wall__tile { cursor: pointer; }

/* 入场：从下往上把格子「刷」出来，按 --i 错开。
   起始态挂在 :not(.no-js) 下面 —— 不然关掉 JS 整面墙都是空的 */
html:not(.no-js) .wall__tile { clip-path: inset(0 0 100% 0); }
.wall.is-in .wall__tile {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.62s cubic-bezier(0.22, 0.65, 0.25, 1) calc(var(--i, 0) * 26ms),
              opacity 0.34s ease, background 0.28s ease, transform 0.42s ease, box-shadow 0.34s ease;
}

/* 标识本体：默认墨色剪影 */
.wall__pic { display: grid; place-items: center; width: 100%; height: 100%; }
.wall__pic img {
  display: block; max-width: 100%; max-height: 68%;
  width: auto; height: auto; object-fit: contain;
  filter: brightness(0);
  opacity: 0.36;
  transition: filter 0.46s ease, opacity 0.46s ease, transform 0.42s cubic-bezier(0.22, 0.65, 0.25, 1);
}
/* 细长的标识（横式字标）本来就占满一行，给它留窄一点的高度上限 */
.wall__tile[data-wide] .wall__pic img { max-height: 34%; }

/* 机器人擦过 → 还原原色 */
.wall__tile.is-lit .wall__pic img { filter: none; opacity: 1; }
/* 原色太浅的：只提亮，不还原颜色 */
.wall__tile[data-mono].is-lit .wall__pic img { filter: brightness(0); opacity: 0.92; }

/* 悬停聚光：整面墙退下去，只留手指下的那一格 */
.wall[data-hot] .wall__tile { opacity: 0.42; }
.wall[data-hot] .wall__tile:hover,
.wall[data-hot] .wall__tile:focus-visible { opacity: 1; }

.wall__tile:hover, .wall__tile:focus-visible {
  background: var(--card);
  z-index: 5;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);   /* 抬起时不再画自己的细线 */
  /* 2026-09-06：原来这里跟着指针转 ±11°/±8°，用户不要倾斜——改成平着抬起来 */
  transform: scale(1.045);
}
.wall__tile:hover .wall__pic img,
.wall__tile:focus-visible .wall__pic img { filter: none; opacity: 1; transform: scale(1.04); }
/* 标识整体抬起来，给下面的揭示面板腾出位置（按面板实际高度量的 15px） */
.wall__tile:hover .wall__pic,
.wall__tile:focus-visible .wall__pic { transform: translateY(-15px); }
.wall__tile[data-mono]:hover .wall__pic img { filter: brightness(0); opacity: 0.95; }
.wall__pic { transition: transform 0.36s var(--bot-ease, ease); }

/* 悬停揭示：公司全名 + 客户地位 + 有案例的给一个入口 */
.wall__rev {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: 3px;
  padding: 11px 13px 12px;
  background: var(--ink);
  translate: 0 101%;
  transition: translate 0.36s cubic-bezier(0.22, 0.65, 0.25, 1);
}
.wall__tile:hover .wall__rev, .wall__tile:focus-visible .wall__rev { translate: 0 0; }
.wall__rev b {
  font: 500 12px/1.35 var(--font); color: #fff;
  padding-right: 22px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wall__rev em {
  font: 400 11px/1.3 var(--font); font-style: normal;
  color: var(--accent);
}
/* 有案例可点的那些，右上角一个箭头就够；写成一行「查看案例」会把面板撑高、盖住标识 */
.wall__rev i {
  position: absolute; right: 11px; top: 12px;
  display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent);
}
.wall__rev i svg { width: 8px; height: 8px; }
.wall__rev i svg path { stroke: var(--ink); stroke-width: 1.8; fill: none; }

/* 头部客户角标：只有 S / A 有，不是满墙贴纸 */
.wall__rank {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font: 600 10px/1 var(--font); letter-spacing: 0.04em;
  color: var(--ink); background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  padding: 2px 0 0 2px;
  opacity: 0; transition: opacity 0.34s ease;
}
.wall__tile.is-lit .wall__rank, .wall__tile:hover .wall__rank { opacity: 1; }
.wall__tile[data-tier="S"] .wall__rank { background: var(--violet); color: #fff; }

/* ------------------------------------------------------------
   长尾：剩下的客户名做成三条流动带（三份副本各位移 1/3，
   与页脚 / HMI 页同一套做法，纯 CSS 无缝）
   ------------------------------------------------------------ */
.wall__strip {
  margin-top: 1px; padding: 22px 0 4px;
  border-top: 1px solid var(--line);
  display: grid; gap: 9px;
  --wm-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: var(--wm-mask); mask-image: var(--wm-mask);
}
.wall__row { display: flex; width: max-content; will-change: transform; }
.wall__row > span {
  display: flex; gap: 9px; padding-right: 9px; flex: none;
}
.wall__row b {
  font: 400 12px/1 var(--font); color: rgba(34, 34, 34, 0.58);
  white-space: nowrap; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card);
  transition: color 0.24s ease, border-color 0.24s ease;
}
.wall__row b:hover { color: var(--ink); border-color: var(--ink); }
.wall__row--a { animation: wallFlow 58s linear infinite; }
.wall__row--b { animation: wallFlow 74s linear infinite reverse; }
.wall__row--c { animation: wallFlow 66s linear infinite; }
@keyframes wallFlow { to { transform: translateX(-33.3333%); } }
.wall__strip:hover .wall__row { animation-play-state: paused; }

.wall__note {
  margin-top: 16px; max-width: 74ch;
  font: 400 12px/1.7 var(--font); color: rgba(34, 34, 34, 0.55);
}
.wall__note b { font-weight: 500; color: rgba(34, 34, 34, 0.78); }

@media (max-width: 700px) {
  .wall { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .wall__tile { padding: 14px 15px; }
  .wall__rev { padding: 9px 10px; }
  .wall__rev em, .wall__rev i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wall__tile { clip-path: none !important; transition: none !important; }
  .wall__pic img { filter: none; opacity: 1; transition: none; }
  .wall__row { animation: none !important; }
  .wall__rank { opacity: 1; }
}