/* ============================================================
   platingclub.com — motion.css v1 (2026-10-09)
   参照 fecshop.com 纯 CSS keyframes 动效体系（零 JS 库）
   全部 transform/opacity GPU 友好 + prefers-reduced-motion 降级
   ============================================================ */

/* ---------- 1. Keyframes ---------- */
@keyframes plx-light-sweep {
  0%   { left: -90%; opacity: 0; }
  20%  { opacity: .85; }
  75%  { opacity: .55; }
  100% { left: 130%; opacity: 0; }
}
@keyframes plx-rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes plx-node-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,120,200,0); }
  45%      { box-shadow: 0 0 0 1px rgba(30,120,200,.45), 0 0 22px rgba(30,120,200,.18); }
}
@keyframes plx-soft-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@keyframes plx-line-flow {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}
@keyframes plx-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

/* ---------- 2. 首屏 Banner 光扫（挂点：页面头图 f-card-page-header__background） ---------- */
.f-card-page-header__background, .collection-banner, .plx-intro { position: relative; overflow: hidden; }
.f-card-page-header__background::after, .collection-banner::after, .plx-intro::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -90%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.28) 55%, transparent 100%);
  transform: skewX(-18deg);
  animation: plx-light-sweep 5.2s ease-in-out 1.2s infinite;
  pointer-events: none;
  z-index: 1;
}

/* ---------- 3. 正文区块滚动渐显（scroll-driven，纯 CSS，Chrome/Edge 已支持；不支持则直接显示） ---------- */
@supports (animation-timeline: view()) {
  .plx-sec {
    animation: plx-rise-in .8s cubic-bezier(.22,.61,.36,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
/* 不支持 scroll-driven 的浏览器：整块直接可见（默认 opacity:1），不搞 JS，零成本 */

/* ---------- 4. 流程步骤卡 hover：上浮 + 发光 ---------- */
.plx-flow > * {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.plx-flow > *:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(15,60,110,.14), 0 0 0 1px rgba(30,120,200,.25);
}
/* 步骤序号微脉冲 */
.plx-flow > *:hover .plx-step-no,
.plx-flow > *:hover [class*="step"]:first-child {
  animation: plx-soft-pulse 1.6s ease-in-out infinite;
}

/* ---------- 5. FAQ details 展开 hover 高亮 ---------- */
.plx details {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.plx details:hover {
  border-color: rgba(30,120,200,.45);
  box-shadow: 0 4px 16px rgba(15,60,110,.10);
  transform: translateY(-2px);
}

/* ---------- 6. 表格行 hover 变色 ---------- */
.plx tbody tr { transition: background-color .25s ease; }
.plx tbody tr:nth-child(even):hover { background-color: rgba(30,120,200,.06); }
.plx tbody tr:nth-child(odd):hover  { background-color: rgba(30,120,200,.05); }

/* ---------- 7. CTA / 主按钮：呼吸光晕 + hover 上浮（mailto 无 class，直接选） ---------- */
.plx a[href*="contact"], .plx a[href^="mailto"], .plx .plx-cta {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  animation: plx-node-glow 3.2s ease-in-out infinite;
  transition: transform .3s ease, box-shadow .3s ease;
}
.plx a[href*="contact"]:hover, .plx a[href^="mailto"]:hover, .plx .plx-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30,120,200,.22);
}
/* "Next" 类箭头文字轻推 */
.plx .plx-next, .plx [class*="arrow"] {
  display: inline-block;
  animation: plx-arrow-nudge 2.2s ease-in-out infinite;
}

/* ---------- 8. 分区渐变分隔线（流动渐变线） ---------- */
.plx-sec + .plx-sec::before {
  content: ""; display: block; height: 2px; margin: 8px 0 20px;
  background: repeating-linear-gradient(90deg,
    rgba(30,120,200,.55) 0 12px, rgba(30,120,200,.12) 12px 24px);
  background-size: 48px 2px;
  animation: plx-line-flow 1.6s linear infinite;
  border-radius: 2px;
}

/* ---------- 9. 速查卡/参考卡渐变提亮 ---------- */
.plx-ref, .plx [class*="ref-card"], .plx [class*="quick-ref"] {
  position: relative;
  transition: box-shadow .35s ease, transform .35s ease;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}
.plx-ref:hover, .plx [class*="ref-card"]:hover, .plx [class*="quick-ref"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15,60,110,.15);
}

/* ---------- 10. 无障碍 & 性能守则 ---------- */
@media (prefers-reduced-motion: reduce) {
  .f-card-page-header__background::after, .collection-banner::after, .plx-intro::after { animation: none; display: none; }
  .plx * , .plx *::before, .plx *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* 移动端：减弱动效保性能 */
@media (max-width: 767px) {
  .f-card-page-header__background::after, .collection-banner::after, .plx-intro::after { animation-duration: 7s; }
  .plx-flow > *:hover { transform: none; box-shadow: none; }
}


/* ---------- 11. 移动端表格溢出修复（2026-10-09 v1.2） ---------- */
@media (max-width: 767px) {
  .plx table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-collapse: collapse;
  }
  .plx table td, .plx table th {
    white-space: nowrap;
  }
  .plx [class*="table-wrap"], .plx .plx-sec { overflow-x: hidden; }
  /* 长词/长 URL 防溢出 */
  .plx p, .plx li, .plx td { overflow-wrap: break-word; }
}

/* motion v2.0 addendum 2026-10-10 */

html { scroll-behavior: smooth; }

.plx-sec + .plx-sec::before {
  content: "";
  display: block;
  height: clamp(18px, 3vw, 36px);
  margin: 0 0 24px;
  background: linear-gradient(110deg, #1e78c8, #d6ecfa 55%, #e8ad48);
  background-size: auto;
  clip-path: polygon(0 0, 100% 65%, 100% 100%, 0 35%);
  border-radius: 0;
  animation: none;
  pointer-events: none;
}

.plx-sec + .plx-sec:nth-child(2n + 1 of .plx-sec)::before {
  clip-path: inset(0);
  border-radius: 50% 15% 50% 15% / 85% 35% 85% 35%;
  background: linear-gradient(110deg, #d6ecfa, #50a887 55%, #f6dcaa);
}

.plx-sec h2 {
  position: relative;
  padding-bottom: 12px;
}

.plx-sec h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 8rem);
  height: 3px;
  background: linear-gradient(90deg, #1e78c8, #e8ad48);
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

@keyframes plx-v2-diagonal {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  50% { clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes plx-v2-circle {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(100% at 50% 50%); }
}

@keyframes plx-v2-curtain {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes plx-v2-step {
  from {
    opacity: 0;
    transform: translate(var(--plx-step-x, -18px), 24px);
  }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes plx-v2-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
  .plx-sec {
    animation: plx-v2-diagonal auto linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  .plx-sec:nth-child(3n + 2 of .plx-sec) {
    animation-name: plx-v2-circle;
  }

  .plx-sec:nth-child(3n of .plx-sec) {
    animation-name: plx-v2-curtain;
  }

  .plx-flow > * {
    --plx-step-delay: 0s;
    --plx-step-start: 0%;
    --plx-step-end: 60%;
    animation: plx-v2-step auto ease-out both;
    animation-delay: var(--plx-step-delay);
    animation-timeline: view();
    /* Range offsets provide staggering on progress-based timelines. */
    animation-range: entry var(--plx-step-start) entry var(--plx-step-end);
  }

  .plx-flow > :nth-child(even) { --plx-step-x: 18px; }
  .plx-flow > :nth-child(2) {
    --plx-step-delay: .08s;
    --plx-step-start: 6%;
    --plx-step-end: 66%;
  }
  .plx-flow > :nth-child(3) {
    --plx-step-delay: .16s;
    --plx-step-start: 12%;
    --plx-step-end: 72%;
  }
  .plx-flow > :nth-child(4) {
    --plx-step-delay: .24s;
    --plx-step-start: 18%;
    --plx-step-end: 78%;
  }
  .plx-flow > :nth-child(5) {
    --plx-step-delay: .32s;
    --plx-step-start: 24%;
    --plx-step-end: 84%;
  }
  .plx-flow > :nth-child(6) {
    --plx-step-delay: .40s;
    --plx-step-start: 30%;
    --plx-step-end: 90%;
  }
  .plx-flow > :nth-child(7) {
    --plx-step-delay: .48s;
    --plx-step-start: 36%;
    --plx-step-end: 96%;
  }
  .plx-flow > :nth-child(n + 8) {
    --plx-step-delay: .56s;
    --plx-step-start: 40%;
    --plx-step-end: 100%;
  }

  .plx-sec h2::after {
    animation: plx-v2-underline auto ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .plx, .plx *, .plx *::before, .plx *::after,
  .plx-sec, .plx-sec *, .plx-sec::before, .plx-sec::after,
  .plx-sec *::before, .plx-sec *::after,
  .plx-flow, .plx-flow *, .plx-flow *::before, .plx-flow *::after {
    animation: none !important;
    transition: none !important;
  }

  .plx-sec {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .plx-flow > *,
  .plx-flow > *:hover {
    opacity: 1 !important;
    transform: none !important;
  }

  .plx-sec h2::after { transform: scaleX(1) !important; }
}

/* ---------- 12. 配色统一 & 流畅度 v2.1 (2026-10-10) ---------- */
/* 统一过渡曲线 */
.plx * { transition-timing-function: cubic-bezier(.22,.61,.36,1); }
/* 区块微妙渐变层次 */
.plx-sec {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(240,247,255,.5) 100%);
  border-radius: 8px;
}
/* 表头品牌渐变 */
.plx thead th {
  background: linear-gradient(135deg, #163b60 0%, #1e78c8 100%);
  color: #fff;
}
/* 链接下划线滑入 */
.plx p a, .plx li a, .plx td a {
  background-image: linear-gradient(90deg, #1e78c8, #50a887);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s cubic-bezier(.22,.61,.36,1), color .3s ease;
}
.plx p a:hover, .plx li a:hover, .plx td a:hover { background-size: 100% 2px; }
/* SVG 动图容器 */
.plx svg { max-width: 100%; height: auto; border-radius: 8px; }
.plx [id$="-svg-v1"] {
  background: linear-gradient(180deg, #f6faff 0%, #ecf4fc 100%);
  border: 1px solid rgba(30,120,200,.18);
  padding: 18px;
}
/* 警告框配色增强 */
.plx-warn, .plx [class*="warn"] {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border-left: 4px solid #d64545;
}
/* FAQ 展开指示动画 */
.plx details summary { transition: color .3s ease; }
.plx details[open] summary { color: #1e78c8; }
@media (prefers-reduced-motion: reduce) {
  .plx-sec, .plx thead th { background: none; }
}
@media (max-width: 767px) {
  .plx-sec { background: none; }
}

/* ---------- 14. 博客表格 + 菜单溢出修复 v2.3 (2026-10-10) ---------- */
/* 博客文章容器不是 .plx —— 全局表格规则 */
.blog-article table, .plx-block table, main table {
  max-width: 100%;
}
.blog-article td, .blog-article th,
.plx-block td, .plx-block th,
main td, main th {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* 页面级横向溢出兜底 */
body { overflow-x: hidden; }
/* 移动端隐藏菜单组件不该参与布局宽度 */
.f-megamenu-mobile { max-width: 100vw; }

/* ---------- 13. Content-page layout unification (task1, 2026-10-11) ---------- */
/* Mirror the reference page's theme .container, without double-padding pages
   that already have that wrapper. Scope excludes products/blogs/navigation. */
.main-page > .plx,
.main-page > div[style*="max-width:1200px"] {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-width, 1280px) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.main-page .container > .f-page-content > .plx {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Captions must not be absolute overlays inside circular/arch/blob clipping.
   Keep the image's original shape on the image itself; let text flow below it. */
.main-page .plx .plx-img:has(> .plx-note),
.main-page .plx .plx-figure:has(> figcaption) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  background: transparent;
}
.main-page .plx .plx-rect-lg { --plx-caption-image-ratio: 21 / 9; }
.main-page .plx .plx-square,
.main-page .plx .plx-round,
.main-page .plx .plx-blob,
.main-page .plx .plx-trio .plx-img,
.main-page .plx .plx-strip .plx-img { --plx-caption-image-ratio: 1 / 1; }
.main-page .plx .plx-portrait { --plx-caption-image-ratio: 3 / 4; }
.main-page .plx .plx-arch { --plx-caption-image-ratio: 4 / 5; }
.main-page .plx .plx-pair .plx-img { --plx-caption-image-ratio: 4 / 3; }
.main-page .plx .plx-offset .plx-img:first-child { --plx-caption-image-ratio: 4 / 5; }
.main-page .plx .plx-offset .plx-img:last-child { --plx-caption-image-ratio: 3 / 4; }
.main-page .plx .plx-mainthumbs > .plx-img:first-child { --plx-caption-image-ratio: 16 / 10; }
.main-page .plx .plx-img:has(> .plx-note) > img {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  aspect-ratio: var(--plx-caption-image-ratio, 16 / 9);
  object-fit: cover;
  border-radius: inherit;
  flex: none;
}
.main-page .plx .plx-img:has(> .plx-note):hover > img { transform: none; }
.main-page .plx .plx-note,
.main-page .plx figcaption {
  position: static !important;
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  clip-path: none !important;
  flex: none;
}

/* ---------- 15. 版面统一 & 图注完整显示 v2.4 (2026-10-10 辉哥指令) ---------- */
/* 基准=gun-color 页：plx 宽 1213、无左右 padding；父容器差异抹平 */
.plx {
  max-width: 1213px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@supports (width: 1px) {
  :where(.main-page, .f-page-content, .rte, main) > .plx {
    max-width: 1213px !important;
  }
}
/* 图注/说明文字完整显示（截图反馈：文字被截断） */
.plx-note, .plx figcaption, .plx [class*="caption"], .plx [class*="img-note"] {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  font-size: 13px;
  opacity: .75;
  margin-top: 6px;
}
/* SVG/图片容器宽度统一自适应 */
.plx img, .plx svg { max-width: 100%; height: auto; }
.plx [id^="svg-"], .plx [class*="plx-img"] {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 16. 容器宽度统一（官方变量版 v2.5）2026-10-10 ---------- */
:root, .main-page, .f-page-content {
  --container-width: 1213px;
}
.plx-note, .plx figcaption, .plx [class*="caption"], .plx [class*="img-note"] {
  display: block;
  white-space: normal;
  overflow: visible;
  height: auto;
  max-height: none;
  -webkit-line-clamp: unset;
  font-size: 13px;
  opacity: .75;
  margin-top: 6px;
}
.plx img, .plx svg { max-width: 100%; height: auto; }

/* ---------- 16. 容器宽度统一（官方变量版 v2.5）---------- */
:root, .main-page, .f-page-content {
  --container-width: 1213px;
}

/* ---------- 17. 图片说明文字完整显示 v2.6 ---------- */
.common-fave-caption, .common-fave-caption-fixed,
.f-prodviewed-caption, .f-prodviewed-caption-draw {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
.plx-note, .plx figcaption {
  display: block; white-space: normal; overflow: visible;
  height: auto; max-height: none; -webkit-line-clamp: unset;
  font-size: 13px; opacity: .75; margin-top: 6px;
}
.plx img, .plx svg { max-width: 100%; height: auto; }

/* ---------- 18. pretreatment 旧装修块清理 + plw/plp 宽度对齐 v2.7 ---------- */
.main-page > div[style*="max-width:1200px"] > div[style*="border-radius:14px"] {
  display: none;
}
.main-page .plw, .main-page .plp, .main-page .plv {
  max-width: 1213px;
  margin-left: auto;
  margin-right: auto;
}
.main-page .plp-card img { object-fit: cover; aspect-ratio: 4/3; }

/* ---------- 19. section_id_main 全块宽度统一 v2.8 (2026-10-10 barrel-plating 反馈) ---------- */
/* 页面主内容区所有顶层块统一 1213px 居中（CTA/Data/Related 等不再 1152/900/860 混杂） */
.section_id_main > div,
.section_id_main > section,
.section_id_main > .plw, .section_id_main > .plp, .section_id_main > .plv,
.section_id_main .plx-cta {
  max-width: 1213px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}
/* CTA 橙色横幅对齐容器且圆角统一 */
.section_id_main .plx-cta {
  border-radius: 12px;
}
/* 图注完整显示（全站兜底再加强） */
.section_id_main figcaption, .section_id_main .plx-note {
  display: block; white-space: normal; overflow: visible;
  height: auto; max-height: none; font-size: 13px; opacity: .75; margin-top: 6px;
}

/* ---------- 20. 装修块内部标题宽度统一 v2.9 ---------- */
.plw-head, .plp-head, .plv-head {
  max-width: 1213px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 21. 全站区块宽度彻底统一 v3.0 (2026-10-10) ----------
   各装修块自定义的 900/860/1135/659 等窄宽全部拉齐 1213 基准 */
.section_id_main .plw-head, .section_id_main .plp-head, .section_id_main .plv-head,
.section_id_main .plw-grid, .section_id_main .plp-grid, .section_id_main .plv-grid,
.section_id_main .plw-kpis, .section_id_main .plp-more,
.main-page .plw-head, .main-page .plp-head, .main-page .plv-head,
.main-page .plw-grid, .main-page .plp-grid, .main-page .plv-grid,
.main-page .plw-kpis, .main-page .plp-more {
  max-width: 1213px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 隐藏式侧边抽屉不再撑宽页面 */
.f-prodviewed-side-fixed { position: fixed; }
/* mega 菜单微溢出剪裁 */
body { overflow-x: hidden; }

/* ---------- 22. 装修块内部标题全类名统一 v3.1 ---------- */
/* 覆盖所有 head/grid/内容子块的杂散宽度（1135/1145/1175/577/395 等） */
.section_id_main [class*="-head"],
.section_id_main [class*="-grid"],
.section_id_main [class*="-kpis"],
.section_id_main [class*="-more"],
.section_id_main [class*="title-wrap"] {
  max-width: 1213px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}