/* =========================================================
   Liquidmetal 克隆站自定义样式
   规则来源：《UI设计规范》01 + 《动效与交互参数》03
   仅承载：字体栈扩展（规范唯一允许偏差）、Webflow JS 等价交互样式、
   跑马灯 CSS 化、按钮 hover 动效（IX2 a-37/a-4/a-5/a-6/a-50）、
   全局覆写（::selection 等）
   ========================================================= */

/* ---- 字体：MiSans VF 可变字体切片（misans@5.0.0，字重 150-700，全角标点标准渲染） ----
   注意：@import 必须位于所有样式规则之前 */
@import url('../fonts/misans/MiSansVF.min.css');

/* ---- 字体：Montserrat 自托管（.font-serif.with-h2 使用）+ 中文字体栈扩展 ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../images/montserrat-latin-400.woff2) format('woff2');
}

body,
.navmenu-item,
.button-text {
  font-family: 'MiSans VF', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

/* ---- 全局覆写（原站内联 <style> 同款，防御性重复声明） ---- */
html { font-size: 16px; }
@media (min-width: 1920px) { html { font-size: 16px; } }
body { overscroll-behavior: none; }
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-img="render"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
::selection {
  background: #000000;
  color: #ffffff;
  text-shadow: none;
}
input, textarea, select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-image: none;
}

/* =========================================================
   交互样式（原 Webflow IX2 行为的 CSS 等价实现）
   ========================================================= */

/* ---- 主按钮 .button：hover 深藏青覆盖层淡入（IX2 a-37/a-4） ---- */
.button .button-overlay {
  background-color: rgba(9, 31, 64, 0);
  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.button:hover .button-overlay {
  background-color: rgba(9, 31, 64, 1);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* submit 按钮同款覆盖层 */
.submit-button-wrap .button-overlay {
  background-color: rgba(9, 31, 64, 0);
  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.submit-button-wrap:hover .button-overlay {
  background-color: rgba(9, 31, 64, 1);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- 表单卡片层级：.section-image_cover（z-index:1）会盖住负边距重叠进图片区的表单底部（联系/设计指南/报价页） ---- */
.section-contact .form-wrapper {
  z-index: 2;
}

/* ---- 次按钮/导航按钮：下划线扫线（IX2 a-5/a-6/a-50/a-51） ---- */
.button_secondary .stroke,
.button-nav .stroke {
  transform: translateX(0%);
}
.button_secondary:hover .stroke,
.button_secondary:hover .stroke.fill-white {
  animation: lm-stroke-sweep 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.button-nav:hover .stroke {
  animation: lm-stroke-sweep 0.8s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes lm-stroke-sweep {
  0%   { transform: translateX(0%); }
  50%  { transform: translateX(100%); }
  50.01% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

/* ---- 导航 CTA 箭头旋转（IX2 a-50） ---- */
.button-nav .menu-icon-arrow {
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.button-nav:hover .menu-icon-arrow {
  transform: rotate(45deg);
}

/* ---- 下拉菜单（IX2 a-48：桌面列表 200ms ease 淡入，无位移；箭头 300ms 旋转） ---- */
.navbar_dropdown-list.w--open {
  animation: lm-dd-in 0.2s ease;
}
@keyframes lm-dd-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dropdown-chevron,
.menu-icon-arrow.is-dark {
  transition: transform 0.3s ease;
}
.w-dropdown-toggle[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

/* ---- 跑马灯（IX2 a-9：双向线性无限循环，速度 116px/s） ----
 * 17s 为原站单份英文标签（1986px）的周期；本地标签较短，
 * 实际时长由 main.js fitMarquee() 按「重复后宽度 ÷ 116」写入，此处仅为无 JS 兜底。 */
.marquee-wrapper-light {
  animation: lm-marquee-left 17s linear infinite;
}
.marquee-wrapper-dark {
  animation: lm-marquee-right 17s linear infinite;
}
@keyframes lm-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes lm-marquee-right {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ---- 移动端菜单（IX2 a-39/a-40：单击汉堡开、再击关；遮罩不响应点击） ----
   结构与线上一致：.navbar_menu_overflow（遮罩）内包 .nav-right（面板）。
   开：遮罩 300ms outQuad 淡入 → 400ms 后面板/菜单列/社交图标分别从
   x=101%/20%/30% 以 800ms outCubic 归位；汉堡线先位移后旋转（延迟 400ms）。
   关：线复位 300ms → 400ms 后滑回原位（800ms inOutQuart）→ 遮罩 200ms 淡出。 */
@media (max-width: 991px) {
  html.lqm-menu-open { overflow: hidden; }
  .mobile-menu-icon { cursor: pointer; }

  /* 遮罩：visibility 控制显隐（关闭后不拦截页面点击），opacity 对齐 IX2 时序 */
  .navbar_menu_overflow {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.2s;
  }
  html.lqm-menu-open .navbar_menu_overflow {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* 初始位（a-39 g1）；关闭时滑回（a-40 g1：800ms inOutQuart，延迟 400ms） */
  .nav-right { transform: translateX(101%); }
  .navbar_menu { transform: translateX(20%); }
  .social-icons.is-menu { transform: translateX(30%); }
  .nav-right,
  .navbar_menu,
  .social-icons.is-menu {
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
  }

  /* 打开归位（a-39 g2：800ms outCubic，延迟 400ms） */
  html.lqm-menu-open .nav-right,
  html.lqm-menu-open .navbar_menu,
  html.lqm-menu-open .social-icons.is-menu {
    transform: translateX(0%);
    transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  }

  /* 汉堡线：位移先行（300ms），旋转延迟 400ms（a-39 g2）；关闭 300ms 复位（a-40 g1） */
  .menu-line-top, .menu-line-bottom {
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  }
  html.lqm-menu-open .menu-line-top {
    transform: translateY(4px) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
  }
  html.lqm-menu-open .menu-line-bottom {
    transform: translateY(-5px) rotate(-45deg);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
  }

  /* 二级菜单（IX2 a-46/a-47）：列表初始收起，高度由 main.js 展开/收起 */
  .navbar_dropdown-list { height: 0; }
}

/* ---- 视频弹窗（home） ---- */
  .video-embed-wrapper { z-index: 50; }
  .video-embed-wrapper.is-open {
    display: flex !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    animation: lqm-video-open 0.35s ease both;
  }
  .video-embed-wrapper.is-open .video-embed {
    width: min(90vw, 1200px);
    aspect-ratio: 16 / 9;
  }
  .video-embed-wrapper.is-open .icon-x-close {
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .video-embed-wrapper.is-open .icon-x-close:hover {
    transform: rotate(90deg);
  }
  .video-embed video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }
  @keyframes lqm-video-open {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ---- 首页视频区播放按钮：hover 缩小 + 鼠标跟随（JS 驱动，这里只管降级） ---- */
  @media (hover: hover) and (pointer: fine) {
    .section-video .icon-play-wrapper {
      will-change: transform;
    }
  }

/* ---- 白皮书解锁弹窗（white-papers，静态展示） ---- */
.lqm-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: auto;
}
.lqm-dialog > .form-wrapper,
.lqm-dialog .form-wrapper,
.lqm-dialog .popup-wrapper {
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  max-width: 40rem;
}
.lqm-dialog .icon-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  z-index: 5;
}

/* ---- Lottie 容器 ---- */
.stat-lottie svg,
.lottie-wrapper svg {
  max-width: 100%;
}

/* ---- 隐藏 Cookie 同意组件（克隆站不需要，规范 §7.3 允许自行实现） ---- */
[fs-consent-element],
[class*="consent_"],
.consent_opt-out_banner,
.consent_placeholder_prefs {
  display: none !important;
}

/* ---- 二级预加载遮罩：原站由 IX2 PAGE_START 隐藏，克隆站直接关闭 ---- */
.preloader-secondary {
  display: none !important;
}

/* ---- 首页预加载器：双层 LOGO 染色动画（index.htm 内联脚本驱动） ----
   底层品牌蓝实心 LOGO + 上层浅灰实心 LOGO，
   JS 逐帧更新灰层 mask-image 柔边（90deg 线性渐变）从左到右擦出蓝层；
   .preload-logo 类名沿用 webflow 定义（absolute top:45% / width:20rem），
   其为 absolute 定位元素，可作 .is-mask 的包含块 */
/* 白幕层级盖过页面内所有浮层（webflow 默认 z-index:20 低于跑马灯 .marquee-bar 的 999，
   揭幕期间跑马灯会浮在幕布上） */
.preloader-overflow {
  z-index: 9999;
}
.preload-logo-layer {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 158 / 40;
}
.preload-logo-layer.is-blue {
  fill: #00275d;
}
.preload-logo-layer.is-mask {
  position: absolute;
  inset: 0;
  height: 100%;
  fill: #dfdfdf;
}

/* ---- Lenis 推荐样式 ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- 资料下载表单：邮件送达预告提示（白皮书弹窗 + 设计指南页） ---- */
.lqm-form-tip {
  margin: 2px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #667085;
}