/* ============================================================
   鸿鹄棋弈 · v6 高级质感层样式（css/premium.css）
   ------------------------------------------------------------
   · 定位：在 v1 基线（style.css）与 v2-v5 华丽增强层（enhance.css）
     之上的「高端质感」叠加层——滚动侦测导航、磁吸按钮、按钮流光、
     跑马灯带、氛围光斑、卡片聚光、胶片颗粒、自定义滚动条。
   · 与既有层完全解耦：可整体移除而不影响 v1-v5 的任何功能与效果。
   · 设计令牌沿用：浅 #f5f5f7 / 深 #0a0a0c / 黑 #000 / 金 #c9a96e。
   · 纪律与 v2 一致：
       - 动画仅 transform/opacity（60fps 目标）；
       - 全部增强元素 aria-hidden 纯装饰，不承载任何信息；
       - 本文件不做任何「内容预隐藏」——禁 JS 时所有文字完整可读；
       - reduced-motion 统一收口于文末降级分区。
   · 伪元素冲突审计（2026-09-09）：
       .btn-download 无 ::after 占用（sheen 可用）；
       .eyebrow 无 ::before/::after 占用（金线可用）；
       .chess-card 的 ::before/::after 已被棋纹装饰占用
       → 卡片聚光改用 JS 创建的 .v6-spot 子元素，不动伪元素。
   ============================================================ */


/* ============================================================
   1. 自定义滚动条（金色细轨，全平台渐进增强）
   ------------------------------------------------------------
   Firefox 走 scrollbar-* 标准属性；WebKit/Blink 走伪元素。
   轨道透明，拇指为金渐变细条，与整站金色母题呼应。
   ============================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 110, 0.55) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 2px solid transparent;
  background-clip: padding-box;
}


/* ============================================================
   2. 固定导航 · 滚动态加深 + 链接下划线 + Scroll Spy 激活态
   ------------------------------------------------------------
   · html.nav-scrolled 由 premium.js 在 scrollY 越过阈值后挂载，
     导航浮起一层柔和投影，与页面拉开纵深（深浅主题通用中性影）。
   · 链接下划线：::after 金渐变细线，hover 与 .is-active 时居中展开；
     .is-active 由 premium.js 的 IntersectionObserver 滚动侦测挂载
     （桌面 .nav-links 与移动端 .nav-panel-links 同步）。
   ============================================================ */
.site-nav {
  transition: box-shadow 0.45s ease;
}

html.nav-scrolled .site-nav {
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.16);
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold), var(--gold-deep));
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .nav-links a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }
}

.nav-links a.is-active {
  color: var(--gold);
}

.nav-links a.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

/* 移动端面板激活态：左侧金点小标 */
.nav-panel-links a.is-active {
  color: var(--gold);
}


/* ============================================================
   3. eyebrow 小标金线（名称两侧金色发丝线）
   ------------------------------------------------------------
   .eyebrow 原为 inline-block、无伪元素占用；升级为 inline-flex
   并在两侧补 28px 金渐变发丝线——高端站常见的「栏目小标」仪式感。
   三条降级路径下线随文字天然呈现，无任何 JS 依赖。
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
}

.eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}


/* ============================================================
   4. 下载按钮 · 流光扫掠（Sheen）
   ------------------------------------------------------------
   · .btn-download 无 ::after 占用（已审计）；overflow:hidden 仅裁
     切按钮「内容」，元素自身 box-shadow 光晕不受影响，金色渐变
     描边（background border-box 方案）亦不受 overflow 影响。
   · hover 时一道白色柔光自左向右扫过（0.9s，随扫随隐）；
   · 首屏/页尾 CTA（.btn-hero）额外承载 6.5s 周期的待机流光，
     大部分时间静止、仅在窗口期内扫过一次，克制而不喧闹。
   ============================================================ */
.btn-download {
  position: relative;
  overflow: hidden;
}

.btn-download::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 32%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}

@media (hover: hover) {
  .btn-download:hover::after {
    transform: translateX(460%) skewX(-18deg);
    transition: transform 0.9s cubic-bezier(0.33, 0.1, 0.25, 1);
  }
}

/* 磁吸交互期间移除 transform 过渡，避免与 rAF 逐帧内联叠加产生胶滞感 */
.btn-download.v6-magnetic {
  transition: box-shadow 0.3s ease;
}

@keyframes v6-sheen {
  0%, 70% {
    transform: translateX(-140%) skewX(-18deg);
  }
  92%, 100% {
    transform: translateX(460%) skewX(-18deg);
  }
}

.btn-hero::after {
  animation: v6-sheen 6.5s ease-in-out infinite;
}

@media (hover: hover) {
  .btn-hero:hover::after {
    animation: none;   /* hover 扫掠接管，避免双光并行 */
  }
}


/* ============================================================
   5. 金色跑马灯带（Marquee · Hero 与版本亮点之间）
   ------------------------------------------------------------
   · 纯 CSS 无缝循环：轨道内两组完全相同的 .v6-marquee-group，
     动画 translateX(0 → -50%) 循环；hover 暂停（桌面）。
   · 透明底 + 上下金色发丝线，随 v2 背景滚动渐变（T046）的
     浅→深过渡天然融入，不占版块、不干扰 10 版块边界计算。
   · 禁 JS 降级：标记与动画均不依赖 JS，静态亦完整可读；
     reduced-motion 见文末降级分区（动画关停，静止呈现）。
   ============================================================ */
.v6-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 3vh, 28px);
  border-top: 1px solid rgba(201, 169, 110, 0.22);
  border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}

.v6-marquee-track {
  display: flex;
  width: max-content;
  animation: v6-marquee 38s linear infinite;
  will-change: transform;
}

@media (hover: hover) {
  .v6-marquee:hover .v6-marquee-track {
    animation-play-state: paused;
  }
}

.v6-marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}

.v6-marquee-group span {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(201, 169, 110, 0.6);
  padding-inline: clamp(20px, 3vw, 40px);
}

.v6-marquee-group i {
  font-style: normal;
  font-size: 0.6em;
  color: rgba(201, 169, 110, 0.38);
}

@keyframes v6-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}


/* ============================================================
   6. 氛围光斑（Ambient Orbs · Hero / Download）
   ------------------------------------------------------------
   · 两枚大尺寸金色径向柔光，blur 弥散后如摄影棚环境光；
     缓慢漂移（16s/22s 交错），为开屏与收尾注入呼吸感。
   · z-index:0 衬于内容之下——.hero-inner / .download-inner
     原生即为 position:relative + z-index:1（style.css 既有），
     层级关系零改动、零冲突。
   · 纯装饰 aria-hidden；HTML 标记静态存在，禁 JS 亦安全
     （仅为柔光，不遮信息）。
   ============================================================ */
.v6-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  will-change: transform;
}

#hero .v6-orb--a {
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  top: -10%;
  right: -12%;
  background: radial-gradient(circle at center, rgba(201, 169, 110, 0.2), rgba(201, 169, 110, 0) 68%);
  animation: v6-drift-a 16s ease-in-out infinite alternate;
}

#hero .v6-orb--b {
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -14%;
  left: -12%;
  background: radial-gradient(circle at center, rgba(201, 169, 110, 0.15), rgba(201, 169, 110, 0) 68%);
  animation: v6-drift-b 22s ease-in-out infinite alternate;
}

#download .v6-orb--a {
  width: 44vw;
  height: 44vw;
  max-width: 620px;
  max-height: 620px;
  top: -16%;
  left: -10%;
  background: radial-gradient(circle at center, rgba(201, 169, 110, 0.16), rgba(201, 169, 110, 0) 68%);
  animation: v6-drift-b 19s ease-in-out infinite alternate;
}

#download .v6-orb--b {
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  bottom: -12%;
  right: -10%;
  background: radial-gradient(circle at center, rgba(230, 210, 164, 0.12), rgba(230, 210, 164, 0) 68%);
  animation: v6-drift-a 24s ease-in-out infinite alternate;
}

@keyframes v6-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-4vw, 3vh, 0) scale(1.08);
  }
}

@keyframes v6-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  to {
    transform: translate3d(3.5vw, -3vh, 0) scale(0.96);
  }
}


/* ============================================================
   7. 卡片聚光（Spotlight Glare · JS 注入 .v6-spot）
   ------------------------------------------------------------
   · 高端产品站标志性的「光标追光」：金色径向柔光随指针在卡面
     游走，与 v2 T054 的 3D 倾斜叠加后质感倍增。
   · .v6-spot 由 premium.js 运行时创建并追加到卡片末尾——
     规避 .chess-card 等已被棋纹占用的 ::before/::after，
     禁 JS / 脚本失败时零残留（无元素即无效果）。
   · 半透明金色眩光掠过卡面文字属刻意的美学处理（0.14 上限，
     不影响可读性）；border-radius:inherit 贴合各类卡片圆角。
   ============================================================ */
.v6-spot-host {
  position: relative;
}

.v6-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(201, 169, 110, 0.14), rgba(201, 169, 110, 0) 70%);
}

.v6-spot-host:hover .v6-spot {
  opacity: 1;
}

/* 卡片图标悬停微交互：金色图标轻盈上浮（增强层，不覆盖布局） */
.mode-icon,
.fun-icon,
.tech-icon,
.highlight-icon,
.connect-icon {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.4s ease;
}

@media (hover: hover) {
  .mode-card:hover .mode-icon,
  .fun-card:hover .fun-icon,
  .tech-card:hover .tech-icon,
  .highlight-card:hover .highlight-icon,
  .connect-item:hover .connect-icon {
    transform: translateY(-4px);
    color: var(--gold-bright);
  }
}


/* ============================================================
   8. 截图金辉（Shot Hover Glow）
   ------------------------------------------------------------
   截图悬停时浮起一圈金色环境光晕——box-shadow 通道，
   与「等比完整呈现、严禁裁切」的 C8 契约零冲突。
   ============================================================ */
.shot-img {
  transition: box-shadow 0.5s ease;
}

@media (hover: hover) {
  .shot-img:hover {
    box-shadow: 0 30px 80px rgba(201, 169, 110, 0.22), 0 10px 28px rgba(0, 0, 0, 0.16);
  }
}


/* ============================================================
   9. 胶片颗粒（Film Grain · JS 注入 .v6-grain）
   ------------------------------------------------------------
   · 全屏固定 SVG 噪点纹理，overlay 混合、3.5% 不透明度——
     为纯色渐变底补上高端影像的「胶片质地」。
   · 元素由 premium.js 创建：禁 JS / 脚本失败零残留；
     z-index 9000 低于 Preloader（9999），pointer-events 全穿透。
   · 静态纹理、零动画，reduced-motion 无需处理。
   ============================================================ */
.v6-grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}


/* ============================================================
   10. reduced-motion 降级分区（D2 降级铁律的样式侧兜底）
   ------------------------------------------------------------
   关停本层全部自主动画：跑马灯静止、光斑静止、待机流光关停
   （hover 扫掠属用户主动触发的一次性过渡，保留无害但一并关停，
   与全站「瞬时呈现」口径一致）。JS 侧另有 matchMedia 闸门双保险。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .v6-marquee-track {
    animation: none;
  }

  .v6-orb {
    animation: none;
  }

  .btn-hero::after {
    animation: none;
  }

  .btn-download::after {
    display: none;
  }

  .nav-links a::after,
  .mode-icon,
  .fun-icon,
  .tech-icon,
  .highlight-icon,
  .connect-icon,
  .shot-img,
  .v6-spot,
  .site-nav {
    transition: none;
  }
}