/* ============================================================
   众智联创官网 · 覆盖修正样式
   不动原站压缩 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;
}

/* 背景：纯 CSS 静态深空渐变 + 点缀星点（无图片、无动画）
   放在 body::before，避免 GSAP 缩放 #headphones 时在四周露出黑框。
   body/.page 不设 !important 黑底，以便滚动到 page__info 时 GSAP 可切换白底。 */
.page,
body {
  background: transparent;
}

#page.color-scheme_light,
body.color-scheme_light {
  background: #fff !important;
}

#page.color-scheme_light .page__info {
  background: #fff;
}

#page.color-scheme_light .stars-deco {
  opacity: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, #101012 0%, transparent 72%),
    radial-gradient(circle at 15% 75%, #0b0b0d 0%, transparent 42%),
    radial-gradient(circle at 88% 62%, #0e0e10 0%, transparent 38%),
    #000;
}

/* 独立星星点缀层（与 .noise 噪点无关） */
.stars-deco {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.stars-deco__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.stars-deco__star--bright {
  box-shadow:
    0 0 3px 1px rgba(255, 255, 255, 0.22),
    0 0 6px 1px rgba(255, 255, 255, 0.08);
}

#header {
  background: transparent !important;
}

/* #headphones 仅保留给 GSAP 滚动逻辑，不再承担可见背景 */
#headphones {
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 0;
  pointer-events: none;
  background: transparent !important;
}

#headphones::before {
  display: none !important;
}

#headphones > div {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#headphones__video,
#headphones__mobile-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: 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;
}

/* ============================================================
   手机端导航：原站 nav 是 hidden sm:flex，窄屏完全不可见。
   汉堡按钮 + 全屏菜单（含案例）。
   ============================================================ */
.mobile-menu-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 60;
  position: relative;
}

.mobile-menu-button__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text100, #fff);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu-open .mobile-menu-button__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-button__bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-button__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(0, 0, 0, 0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-menu-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-open #header {
  z-index: 60;
}

.mobile-nav__link {
  font-family: var(--default-font, inherit);
  font-size: 22px;
  font-weight: 600;
  color: var(--text100, #fff);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 12px;
  text-decoration: none;
}

@media (min-width: 768px) {
  .mobile-menu-button,
  .mobile-nav {
    display: none !important;
  }
}

/* ============================================================
   黑胶颗粒（全屏噪点）：置顶覆盖所有内容（含文字/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;
}

/* 加载屏白噪点减弱 */
.loading-screen {
  --noise-opacity: 0.38;
}

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

/* 鼠标聚光灯：需在噪点层之上 */
.custom-cursor {
  z-index: 100001 !important;
  pointer-events: none !important;
}

.custom-cursor__cursor {
  background: rgba(255, 255, 255, 0.12) !important;
  filter: blur(48px) !important;
  will-change: transform, opacity;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

html.chrome-ready .custom-cursor__cursor {
  visibility: visible !important;
}

/* 手机端加载超时强制解锁后，确保可滚动 */
html.loading-forced-done,
html.loading-forced-done body {
  overflow: auto !important;
  height: auto !important;
}

html.loading-forced-done #loading-screen {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -10 !important;
}

/* 关屏后由 boot.js GSAP 做 0.5s 延迟 + 淡入；此处只保证位置正确 */
html.chrome-ready #header,
html.loading-forced-done #header {
  transform: translate3d(0, 0, 0) !important;
}

/* 手机端大标题：原站英文用 vertical-rl + rotate(180deg) 让字母可读；
   换成中文后整块会倒过来。改为竖排且字直立（或不旋转）。 */
@media (max-width: 647px) {
  .comfort__title,
  .specs__title {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    transform: none !important;
    letter-spacing: 0.08em;
  }
}