/* ==========================================================================
   NUDOT 复刻 — 清透化主题层（Clarity Override）
   --------------------------------------------------------------------------
   这一层不新增任何布局与动效，只改「介质」——把原站的「磨砂胶片」观感
   换成「光学玻璃」观感。原站的糊感由 9 处叠加造成，逐项对症处理：

     去雾  ①  全屏胶片颗粒的 screen 混合（screen 会把整屏提灰，是最大元凶）
           ②  两处 70vw×70vh 雾光（blur 60px）
           ③  Loader 字母 blur(10px)——"点进网站就糊"的直接来源
           ④  文字层级虚化 blur(1.2/2px)
           ⑤  3D 面 inset 内阴影 40px、背景视频 opacity .45
     提对比 ⑥  文本色阶整体擡升（原站最低到 rgba(255,255,255,.22)）
           ⑦  分隔线可见化
     加锐  ⑧  字体渲染 + 媒体对比度
     新语言 ⑨  原站全站零 backdrop-filter，"玻璃感"是假的；这里补上真玻璃
                —— 但用 saturate 提通透，而不是用 blur 加雾

   加载顺序必须排在所有页面样式之后（本文件靠 !important 兜底）。
   想回到原站视觉：删掉 HTML 里对本文件的 <link> 即可，零副作用。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 清透阶梯：把"通透"量化成可调的一小组变量
   -------------------------------------------------------------------------- */
:root {
  /* 文本可读性阶梯 */
  --cl-text-primary: #ffffff;
  --cl-text-body: #e6e6e6;
  --cl-text-secondary: #cacaca;
  --cl-text-tertiary: #a9a9a9;
  --cl-text-quaternary: #8c8c8c;

  /* 装饰性超大字（保留层次，但不再是"看不见的灰"） */
  --cl-decor-1: rgba(255, 255, 255, 0.46);
  --cl-decor-2: rgba(255, 255, 255, 0.28);

  /* 线条与玻璃 */
  --cl-line: rgba(255, 255, 255, 0.16);
  --cl-line-strong: rgba(255, 255, 255, 0.26);
  --cl-glass-bg: rgba(10, 12, 14, 0.58);
  --cl-glass-edge: rgba(255, 255, 255, 0.14);
  --cl-glass-top: rgba(255, 255, 255, 0.11);
  --cl-glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);

  /* 颗粒强度：原站 .06，这里压到可感知下限 */
  --cl-grain-opacity: 0.016;
}

/* --------------------------------------------------------------------------
   1. 去雾 · 颗粒层（已彻底移除）
   原站：opacity .06 + mix-blend-mode: screen（白噪点 screen 混合 = 全屏蒙灰纱）
   本项目：用户明确要求「不要噪点、要高清感」，故整层隐藏。
   说明：这是有意的偏离（原站是有颗粒的）；仅在 CSS 层隐藏，noise.js 未改动，
         日后若要恢复颗粒，删掉下面两行即可。
   -------------------------------------------------------------------------- */
#film-grain-canvas,
#bg--noise {
  display: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   2. 去雾 · 雾光 → 锐利冷光
   原站：radial-gradient + blur(60px)，70vw×70vh 的大范围柔光罩
   改成：去掉 blur，改用更窄更冷的渐变，从"弥漫的雾"变成"可控的边光"
   -------------------------------------------------------------------------- */
#ui-glow1,
#ui-glow2,
.glow-bottom-left,
.glow-center-left {
  filter: none !important;
  mix-blend-mode: normal !important;
  background: radial-gradient(circle,
              rgba(186, 224, 255, 0.085) 0%,
              rgba(186, 224, 255, 0.028) 40%,
              transparent 66%) !important;
}

/* --------------------------------------------------------------------------
   3. 去雾 · 进站 Loader
   原站：.nd-n / .nd-d 常驻 blur(10px)
   改成：完全锐利。这是"点进网站第一眼"的观感来源，收益最直接
   -------------------------------------------------------------------------- */
#nudot-loader .nd-n,
#nudot-loader .nd-d {
  filter: none !important;
}

/* --------------------------------------------------------------------------
   4. 去雾 · 文字层级虚化收敛
   原站用 blur 制造前后景层次，保留层次感但把虚化收到几乎不可察觉
   （.exit-zoom-blur / .pg-hover-copy 属于动效过程态，不动）
   -------------------------------------------------------------------------- */
.stm-pos-7 { filter: blur(0.45px) !important; }
.stm-pos-8 { filter: blur(0.8px) !important; }

/* --------------------------------------------------------------------------
   5. 去雾 · 3D 面内阴影 & 背景视频叠加
   原站：inset 0 0 40px #000（边缘发闷）+ 背景视频 opacity .45（叠加朦胧）
   -------------------------------------------------------------------------- */
.face {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.42) !important;
}

.mobile-cube-face {
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.38) !important;
}

.dark-wrapper > video {
  opacity: 0.26 !important;
}

/* 侧边渐隐从"黑墙"改成"呼吸边"，保留功能但不再压掉内容 */
.ccap-side-fade-left {
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0.86) 0%,
              rgba(0, 0, 0, 0.5) 40%,
              rgba(0, 0, 0, 0) 100%) !important;
}

.ccap-side-fade-right {
  background: linear-gradient(270deg,
              rgba(0, 0, 0, 0.86) 0%,
              rgba(0, 0, 0, 0.5) 40%,
              rgba(0, 0, 0, 0) 100%) !important;
}

/* --------------------------------------------------------------------------
   6. 提对比 · 文本色阶
   原站最弱处只有 rgba(255,255,255,.22)。这里逐处擡到可读区间，
   但保留原有层级关系——装饰字依然退居背景，只是不再"糊成一片灰"
   -------------------------------------------------------------------------- */
.intro-panel .animated-text {
  color: var(--cl-decor-1) !important;
}

.section-2-content .desc,
.new-text-group .desc {
  color: var(--cl-text-body) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72) !important;
}

.marquee-sep {
  color: rgba(255, 255, 255, 0.62) !important;
}

.drag-line {
  color: rgba(255, 255, 255, 0.52) !important;
}

.face-subtitle,
.footer-description,
.hero-title::before,
.hero-title::after {
  color: var(--cl-text-secondary) !important;
}

.top-text {
  color: var(--cl-text-secondary) !important;
}

#core-capabilities .top-nav,
#core-capabilities .service-tags,
#core-capabilities .footer-desc {
  color: var(--cl-text-secondary) !important;
}

.mcube-title__eye {
  color: rgba(255, 255, 255, 0.72) !important;
}

.mcube-copy__tag {
  color: rgba(255, 255, 255, 0.74) !important;
}

.mcube-stat__label {
  color: rgba(255, 255, 255, 0.64) !important;
}

.gallery-header-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

.gallery-header-sub {
  color: rgba(255, 255, 255, 0.64) !important;
}

.ns-dropdown__eyebrow {
  color: rgba(255, 255, 255, 0.74) !important;
}

/* --------------------------------------------------------------------------
   7. 提对比 · 线条可见化
   原站边框 alpha 低至 .05，几乎不可见。统一到可辨识但不抢戏的区间
   -------------------------------------------------------------------------- */
#nav_scroll,
.ns-dropdown {
  border-color: var(--cl-glass-edge) !important;
}

.grid-4.border-top-line,
.border-top-line {
  border-top-color: var(--cl-line) !important;
}

/* --------------------------------------------------------------------------
   8. 加锐 · 字体渲染与媒体
   关键配套：去雾会让原本"被雾擡亮"的照片跟着变暗，与纯黑底的分离度反而下降
   （实测局部对比度 -7.7%）。所以媒体必须补回亮度与对比，否则是"变暗"不是"变清"。
   -------------------------------------------------------------------------- */
html {
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.pg-img-wrap img,
.face-media,
.mobile-cube-face img,
.mobile-cube-face video,
.ns-showcase-row__thumb img,
.slide__img,
.work-video video,
.gc-card img,
#core-capabilities img {
  filter: contrast(1.14) saturate(1.09) brightness(1.13) !important;
}

/* 环绕卡片：加一圈锐利描边把边缘从黑底里"分"出来，
   再叠一道顶部内高光——这是提升清晰感最直接的手段
   （原站只靠投影浮起，边缘是模糊过渡的，且投影半径 64px 让卡片"陷"在雾里）
   注意：不动 .gc-card 的 opacity，它是入场动画的始态，覆盖会冻掉动画 */
.gc-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 16px 38px rgba(0, 0, 0, 0.54) !important;
}

/* --------------------------------------------------------------------------
   9. 混合模式修正 · 原站两处让画面发灰的 blend
   -------------------------------------------------------------------------- */
/* 中央视频用 lighten 混合：只保留比背景亮的部分 → 整体泛灰失去层次 */
#core-capabilities .center-video-box video {
  mix-blend-mode: normal !important;
}

/* 光标外圈的 difference 混合在浅色菜单上会反相异常，这里收敛为正常叠加 */
#cursor-ring {
  mix-blend-mode: normal !important;
}

/* --------------------------------------------------------------------------
   10. 遮罩减负 · 上下渐隐罩
   原站 .ring-gallery-sticky::before/::after 用 0.96/0.72 的黑把上下 220px 压死，
   是"画面脏"的次要来源。保留渐隐功能，但降低压暗强度，让内容多透出来一点。
   -------------------------------------------------------------------------- */
.ring-gallery-sticky::before {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0.88) 0%,
              rgba(0, 0, 0, 0.4) 40%,
              transparent 100%) !important;
}

.ring-gallery-sticky::after {
  background: linear-gradient(0deg,
              rgba(0, 0, 0, 0.9) 0%,
              rgba(0, 0, 0, 0.44) 38%,
              transparent 100%) !important;
}

/* --------------------------------------------------------------------------
   11. 新增语言 · 光学玻璃
   原站靠半透明+模糊假装玻璃。这里用「真玻璃」：轻微折射（saturate 提通透）
   + 锐利细边 + 顶部高光线。注意刻意用低 blur 高 saturate，
   因为高 blur 会重新引入雾感，与本次改造目标相反。
   -------------------------------------------------------------------------- */
#nav_scroll {
  background: var(--cl-glass-bg) !important;
  backdrop-filter: blur(10px) saturate(1.7) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.7) brightness(1.06) !important;
  border: 1px solid var(--cl-glass-edge) !important;
  box-shadow:
    inset 0 1px 0 var(--cl-glass-top),
    var(--cl-glass-shadow) !important;
}

/* Hero 右侧那个跳 YouTube 的视频卡片（.brand-core-video）已按需求整体移除。
   移除逻辑见 _analysis/build/assemble.py 的 remove_video_entry()，
   停用的素材（slider_video02.mp4 / _thumb.jpg）归档在 _backup/removed-hero-entry/。

   说明：原站 index.css 里仍有约 15 条指向 .brand-core-video 的规则
   （主要是 `[data-cursor="VIDEO"]` 的 cursor 声明）。这些规则**不影响渲染**
   —— CSS 选择器匹配不到元素即不生效，且保留它们可维持"原站产物不被改动"
   的架构约定（本项目所有改造都走独立覆盖层，便于整体回退）。
   原站此元素本身没有边框，是一块边界不明的黑矩形，悬在右下角压住社交链接那一组信息。 */

.ns-dropdown__inner {
  background: rgba(8, 9, 11, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
}

/* 作品缩略图：玻璃托台 + 悬停提亮，取代原来的纯阴影浮起 */
.ns-showcase-row__thumb {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 44px rgba(0, 0, 0, 0.46) !important;
}

/* --------------------------------------------------------------------------
   12. 无障碍 · 尊重系统的「减少动态效果」
   原站 noise.js 已处理颗粒层；这里把其余动效一并收敛
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}