/* ============================================================
   众智联创官网 · 覆盖修正样式
   不动原站压缩 CSS，仅追加修正规则（加载顺序在 index.css 之后）
   ============================================================ */

/* Loading morph 文字强制锚定屏幕中心
   原站 .loading-screen__morph 是 position:absolute 且无 left/top，
   正常浏览器会按 flex 容器 static position 居中，但部分 WebView
   会渲染到左上角。这里用 inset:0 + margin:auto 显式居中：
   - 不依赖 transform，避免与 GSAP 的 scale/x 内联 transform 冲突
   - 宽度/高度取内容尺寸，保证单字与全词都居中 */
.loading-screen__morph {
  inset: 0 !important;
  margin: auto !important;
  width: max-content !important;
  height: max-content !important;
}

/* Loading 第一阶段放 logo，需要把原站文字样式（letter-spacing / padding / 字号）清掉，
   并用 flex 让 SVG 在容器内绝对居中，避免之前“创”字偏下的问题 */
.loading-screen__morph_1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  font-size: 0 !important;
}

.loading-logo {
  width: clamp(90px, 22vw, 170px);
  height: auto;
  color: var(--text100, #fff);
  fill: currentColor;
}

/* 首屏 glitch 闪烁层的伪元素文字：原站是 "HALŌ"，替换为众智联创 */
.glitch::before,
.glitch::after {
  content: "众智联创" !important;
}

/* 耳机区背景：恢复视频作为动态背景（滚动逐帧）。
   原站 JS(GSAP ScrollTrigger + scrub)依赖 headphones__video / headphones__mobile-video
   这两个 DOM 节点的 currentTime，按滚动位置逐帧推进视频，而不是自动循环播放。
   之前曾用 display:none + 静态图(#headphones__bg)替代，现彻底移除该方案，
   恢复视频铺满父容器（不需要 autoplay/loop，JS 负责驱动）。

   断点与原站 JS 一致：max-width 767 → 竖屏视频；min-width 768 → 横屏视频。
   不可对两个 video 同时 display:block，否则会叠两路画面且拖累移动端性能。 */
#headphones {
  overflow: hidden;
}

#headphones__video,
#headphones__mobile-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
}

/* 手机：只显示竖屏视频 */
#headphones__video {
  display: none !important;
}

#headphones__mobile-video {
  display: block !important;
}

/* 平板/桌面：只显示横屏视频 */
@media (min-width: 768px) {
  #headphones__video {
    display: block !important;
  }

  #headphones__mobile-video {
    display: none !important;
  }
}

/* ============================================================
   业务区三块标题文字（智能驱动 / 高效交付 / 灵活定制）
   原站 .gradient__title 用了 #636363 灰色 + linear-gradient 做文字渐变
   + color:transparent，在星空深色背景上本就对比度低；
   又因为上一项把 .noise:after z-index 提到 99999，文字边缘被噪点
   “压垮”，肉眼几乎看不见（截图印证）。
   这里给标题加 text-shadow 微光晕 + 略提亮渐变底色，保留粒感的同时
   让字仍清晰可读。
   ============================================================ */
.gradient__title {
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.18),
    0 0 2px rgba(255, 255, 255, 0.35) !important;
}

#noise-control__title,
#high-efficiency__title,
#your-freedom__title {
  background: linear-gradient(
    180deg,
    #a0a0a0 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   三个业务 section（智能驱动 / 高效交付 / 灵活定制）：
   原站 .gradient__wrapper 是 justify-content:space-between +
   padding-top:76px，标题靠上、文本靠下，滚动到该 section 时
   标题不在屏幕正中间。这里改为整体垂直居中，让标题+文本
   一起停在视口正中间。
   ============================================================ */
.gradient__wrapper {
  justify-content: center !important;
  padding-top: 0 !important;
  gap: 8vh;
}

/* ============================================================
   空白滚动区填充内容（智能驱动→高效交付、高效交付→灵活定制）
   #turn / #disassemble 原站是空 section，纯用于视频逐帧滚动驱动，
   用户要求滚动到这两段时也能看到内容。
   - 内容块在滚动区间内一直显示在视口中央
   - #disassemble 原靠 mb-[400vh] 提供 400vh 空白滚动距离，
     现改为自身高度 500vh + 内部内容(滚动总距离不变，
     视频逐帧驱动节奏不变，JS end 同步改为 bottom top)

   注意:GSAP ScrollTrigger 对 #disassemble 应用了
   pin:true + pinSpacing:false,会把它变成 position:fixed + transform,
   此时 CSS sticky 在 fixed 父级中会失效(子 sticky 退化为 static)。
   所以这里不用 sticky,而是让 fill__sticky 作为 static 块直接放在
   page__container 顶部(靠 align-items:flex-start),而 #disassemble
   被 pin 时它会自然落在 viewport top,内部 flex 垂直居中即可呈现
   "视口中央"的视觉效果。
   ============================================================ */
#turn,
#disassemble {
  overflow: visible !important;
  display: block;
}

/* #turn（智能驱动→让技术成为业务的引擎）原站只有默认 100vh，
   滚动区间太短，内容一闪而过。按 #disassemble 同样方式加长为 400vh，
   内容会在整个区间内一直显示（ScrollTrigger pin:true + pinSpacing:false，
   内容固定在视口中央） */
#turn {
  height: calc(var(--vh, 1vh) * 400) !important;
}

#disassemble {
  height: calc(var(--vh, 1vh) * 500) !important;
}

#turn > .page__container,
#disassemble > .page__container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start; /* 顶部对齐,避免内容被推到 500vh 中部视口外 */
  justify-content: center;
  background-color: transparent !important; /* 不要深色块,让视频透出 */
}

.fill__sticky {
  /* 不依赖 sticky:父级被 GSAP pin 为 fixed + transform,
     sticky 在 fixed 父级中会失效。改为 static + 固定 100vh,
     配合 .page__container align-items:flex-start,内容自然落在视口顶部,
     内部 flex 居中让文字停在 viewport 中央。 */
  position: static;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 20px;
}

.fill__eyebrow {
  font-family: var(--secondary-font);
  font-size: clamp(14px, 20 / (var(--screen) / 100) * 1vw, 20px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text300, #9ca3af);
}

.fill__title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: clamp(34px, 64 / (var(--screen) / 100) * 1vw, 64px);
  line-height: 1.1;
  color: var(--text100, #f5f5f5);
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
}

.fill__text {
  max-width: 560px;
  font-size: clamp(14px, 18 / (var(--screen) / 100) * 1vw, 18px);
  color: var(--text200, #b0b0b0);
}

.fill__stats {
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.fill__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fill__stat strong {
  font-family: var(--secondary-font);
  font-size: clamp(40px, 72 / (var(--screen) / 100) * 1vw, 72px);
  color: var(--text100, #f5f5f5);
}

.fill__stat span {
  font-size: clamp(12px, 15 / (var(--screen) / 100) * 1vw, 15px);
  color: var(--text200, #b0b0b0);
}

.fill__steps {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
  list-style: none;
  padding: 0;
}

.fill__steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: clamp(14px, 17 / (var(--screen) / 100) * 1vw, 17px);
  color: var(--text200, #b0b0b0);
}

.fill__steps li span {
  font-family: var(--secondary-font);
  font-size: clamp(24px, 36 / (var(--screen) / 100) * 1vw, 36px);
  color: var(--text100, #f5f5f5);
}

/* ============================================================
   手机 / 桌面自适应补强
   原站已有 sm(768) 断点；此处只修正我们追加的内容，以及
   中文文案在窄屏上的溢出/拥挤问题。
   ============================================================ */

/* 首屏品牌名：四字中文在窄屏上比原站 "HALŌ" 更宽，略收字号防溢出 */
@media (max-width: 767px) {
  .intro__title,
  .glitch::before,
  .glitch::after {
    font-size: clamp(48px, 18vw, 80px) !important;
    letter-spacing: 0.04em !important;
  }

  .fill__sticky {
    padding: 0 16px;
    gap: 14px;
  }

  .fill__title {
    font-size: clamp(28px, 9vw, 40px);
  }

  .fill__text {
    font-size: 14px;
    line-height: 1.55;
  }

  .fill__stats {
    gap: 20px 28px;
  }

  .fill__stat strong {
    font-size: clamp(32px, 10vw, 44px);
  }

  .fill__steps {
    gap: 16px 20px;
  }

  .fill__steps li {
    min-width: 72px;
    font-size: 13px;
  }

  .fill__steps li span {
    font-size: 22px;
  }

  /* 业务三块：窄屏标题+正文间距收紧，避免挤出视口 */
  .gradient__wrapper {
    gap: 4vh;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 768px) {
  .fill__sticky {
    padding: 0 40px;
  }
}

/* 备案号：页脚始终可见（原站 copyright 在移动端 display:none） */
.footer__copyright-text {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer__icp-link {
  display: inline-block;
  font-size: 14px;
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer__icp-link:hover {
  opacity: 0.8;
}

/* ============================================================
   黑胶颗粒（全屏噪点）：置顶覆盖所有内容（含文字/header）
   原站 .noise:after 是 fixed 全屏噪点，但 opacity 依赖未定义的
   var(--noise-opacity)（声明无效）且无 z-index，会被 header(z-50)、
   各 section 的 z-index 盖住，导致字体上感受不到颗粒。
   这里：
   - 定义 --noise-opacity，让 opacity 声明生效（图片本身 alpha 很低，
     opacity:1 才是完整颗粒，不会糊）
   - z-index 提到最高，让噪点压在文字/header 之上
   - pointer-events:none 放行点击，避免全屏噪点拦截交互
   ============================================================ */
:root {
  --noise-opacity: 1;
}

.noise:after {
  z-index: 99999 !important;
  pointer-events: none !important;
}