/* ============================================================
   动效增强层 —— 2026-09 全站改版定稿（redesign 交付的 pup-enhance 层）

   来源：pupulan-redesign/_build/pup_enhance.css（v2）+ enhance_v3.py 内嵌的
   水面数字样式（v3）。相对交付原稿的取舍：
   - v2 的独立蓝底数字带（.pup-stats / .pup-stats-grid）已被 v3「数字直接叠在
     hero 水面」取代，仅保留合并后的水面版最终态（.pup-stats--hero）；
   - Service 走查标签 .pup-step-tag 属 Service 页改版范围，未随本轮引入；
   - Hero 背景 Ken Burns 缓慢缩放（原第 4 节）按客户反馈移除——观感眩晕（2026-09-28）。

   原则：纯 CSS transition/keyframes + 首页 enhance.js 的 IntersectionObserver；
   内容默认可见（JS 失效不影响阅读与抓取）；prefers-reduced-motion 全量降级。
   ============================================================ */

/* ---------- 1. 卡片通用：悬停浮起 + 金色顶线展开 ---------- */
.cat-card, .feature, .tst-card, .pup-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-card, .feature, .pup-card { position: relative; overflow: hidden; }
.cat-card::before, .feature::before, .pup-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
  z-index: 1;
}
.cat-card:hover, .feature:hover, .tst-card:hover, .pup-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(26, 54, 93, .12);
}
.cat-card:hover::before, .feature:hover::before, .pup-card:hover::before { transform: scaleX(1); }

/* 客户画像卡（首页 Who We Serve 板块） */
.pup-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.8rem 1.6rem;
}
.pup-card h3 { margin-top: 0; }
.pup-card p { margin-bottom: .6rem; }

/* ---------- 2. hero 水面金色数字带（v3 定稿：替代独立蓝底带） ---------- */
.pup-stats--hero{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:1.25rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.22);}
.pup-stats--hero .pup-stat{text-align:left;}
.pup-stats--hero .pup-stat strong{
  display:block;font-size:2.05rem;line-height:1.1;
  color:var(--gold-soft);font-weight:700;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgba(20,42,73,.55);
}
.pup-stats--hero .pup-stat span{
  display:block;margin-top:.35rem;
  color:rgba(255,255,255,.88);font-size:.85rem;letter-spacing:.04em;
  text-shadow:0 1px 8px rgba(20,42,73,.6);
}
@media (max-width:900px){.pup-stats--hero{grid-template-columns:repeat(2,1fr);row-gap:.9rem;}}

/* ---------- 3. 客户 logo 跑马灯（Flexport 式，悬停暂停） ---------- */
.pup-marquee {
  overflow: hidden; padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* 26s 是 6 图基准；品牌墙 12 图轨道约翻倍，54s 保持线速度一致 */
.pup-marquee-track { display: flex; gap: 4.5rem; width: max-content; animation: pupScroll 54s linear infinite; align-items: center; }
.pup-marquee:hover .pup-marquee-track { animation-play-state: paused; }
/* 品牌字形图（透明底、入库时已统一藏青）：常规 72% 透明度融入版面，悬停整条提亮 */
.pup-logo-img { height: 30px; width: auto; opacity: .72; transition: opacity .3s var(--ease); }
.pup-marquee:hover .pup-logo-img { opacity: 1; }
@keyframes pupScroll { to { transform: translateX(-50%); } }
.pup-marquee-note { text-align: center; margin-top: 1.1rem; font-size: .92rem; color: var(--muted); }

/* ---------- 3.5 品类卡缺图占位（改版新增四类暂无实拍） ---------- */
/* 定稿为虚线 + 斜纹浅底；占位文字沿用站点惯例的通用占位语（Photo coming soon），
   不写品类名——下方卡片标题已有同名，客户此前明确要求占位不重复标题 */
.cat-card > .ph {
  border: 1px dashed #b9c5d4;
  background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 12px, #f7f9fc 12px, #f7f9fc 24px);
}
.cat-card > .ph::after {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #5a6b80;
}

/* ---------- 4.（已移除）Hero 背景 Ken Burns 缓慢缩放：客户实测观感眩晕，不上线 ---------- */

/* ---------- 5. 拼柜板块：品类 chip 依次浮动 + 集装箱呼吸金光 ---------- */
/* 面板与 chip 的视觉底样式（定稿原为内联样式，收进类便于维护）；
   箭头用 SVG 图标表达"九类向下汇聚成一柜"，替代定稿误带的 "> 文字残留 */
.consol-panel { border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.5rem; background: #f4f7fb; }
/* 两行分组（4+5）：外层纵向、组内横向居中；组内仍留 wrap 兜底窄屏 */
.consol-chips { display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.consol-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.consol-list { margin: 1.2rem 0 0; padding-left: 1.15rem; }
.consol-arrow { display: flex; justify-content: center; margin: .9rem 0; color: #5a6b80; }
.consol-box { margin-top: .9rem; background: var(--navy); color: #fff; border-radius: 10px; padding: 1rem 1.1rem; text-align: center; }
.consol-box strong { display: block; font-size: 1.05rem; }
.consol-box strong svg { vertical-align: middle; margin-left: .45rem; }
.consol-box span { font-size: .88rem; opacity: .85; }

/* 品类标签：随机小角度旋转的贴纸层次（角度序列取自 arshtech About「What We Do」标签云）；
   3×3 阵列按行列错开分布，避免同一列角度雷同；指针推开 + 轻微悬浮由 enhance.js
   第 4 节在同一条 transform 上驱动（JS 侧带上 rotate(var(--rot))），无 JS 时保持静态旋转 */
.consol-row:nth-child(1) .pup-chip:nth-child(1) { --rot: -2deg; }
.consol-row:nth-child(1) .pup-chip:nth-child(2) { --rot: 1deg; }
.consol-row:nth-child(1) .pup-chip:nth-child(3) { --rot: 0deg; }
.consol-row:nth-child(2) .pup-chip:nth-child(1) { --rot: -1deg; }
.consol-row:nth-child(2) .pup-chip:nth-child(2) { --rot: 2deg; }
.consol-row:nth-child(2) .pup-chip:nth-child(3) { --rot: 0deg; }
.consol-row:nth-child(3) .pup-chip:nth-child(1) { --rot: 0deg; }
.consol-row:nth-child(3) .pup-chip:nth-child(2) { --rot: -2deg; }
.consol-row:nth-child(3) .pup-chip:nth-child(3) { --rot: 1deg; }
.pup-chip {
  background: #e3ebf5; color: #223a57; border-radius: 999px; padding: .45rem 1rem; font-size: .95rem;
  transform: rotate(var(--rot, 0deg));
  will-change: transform;
}
.pup-glow { animation: pupGlow 3.8s ease-in-out infinite; }
@keyframes pupGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(192, 160, 98, 0); }
  50% { box-shadow: 0 12px 36px rgba(192, 160, 98, .38); }
}

/* ---------- 6. 流程步骤：编号弹入（Service 页六步流程，配合 main.js 的 is-visible） ---------- */
.svc-flow-step.is-visible .svc-flow-num,
.svc-flow-step.is-in .svc-flow-num { animation: pupPopIn .55s var(--ease) both; }
@keyframes pupPopIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 7. 证言五星 ---------- */
.pup-stars { display: block; color: var(--gold); letter-spacing: 3px; font-size: .95rem; margin: .2rem 0 .6rem; }

/* ---------- 8. 表格行悬停高亮 / 箭头链接微动 ---------- */
.facts-table tbody tr { transition: background .25s var(--ease); }
.facts-table tbody tr:hover { background: var(--navy-tint); }
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 9. 组内依次入场（enhance.js 限时启用 .pup-enter，2.5s 后移除，不影响 hover） ---------- */
.pup-enter > *:nth-child(2) { transition-delay: .08s; }
.pup-enter > *:nth-child(3) { transition-delay: .16s; }
.pup-enter > *:nth-child(4) { transition-delay: .24s; }
.pup-enter > *:nth-child(5) { transition-delay: .32s; }
.pup-enter > *:nth-child(6) { transition-delay: .40s; }
.pup-enter > *:nth-child(7) { transition-delay: .48s; }
.pup-enter > *:nth-child(8) { transition-delay: .56s; }
.pup-enter > *:nth-child(9) { transition-delay: .64s; }

/* ---------- 10. 无障碍与移动端降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pup-marquee-track, .pup-glow,
  .svc-flow-step .svc-flow-num, .pup-enter > * { animation: none !important; transition-delay: 0s !important; }
}
@media (max-width: 720px) {
  .pup-glow { animation: none !important; } /* 触屏省电：芯片排斥/悬浮由 JS 侧同条件跳过 */
}