/* =========================================================
   鹿觅Lumi · 官网 v8 布局叙事层（20261011）
   目标：手机开屏动画 + 滑动叙事式的大气高科技感，去胶囊卡片堆砌风
   定位：在 immersive-v7.css 之后加载的纯视觉覆盖层
   —— 不动任何业务 JS/接口；渐进增强；尊重 prefers-reduced-motion
   关键点：
   1) 全屏沉浸式主视觉开场（鹿头大主视觉 + 光晕/扫光/粒子/光环）
   2) 大区块叙事布局：区块间大留白、层次纵深、章节编号
   3) 卡片弱化为「细线大区块」，不再铺满胶囊圆角小卡
   4) 滚动揭幕 / 视差 / 光轨做点缀不做满铺
   ========================================================= */
:root{
  --v8-gold-glow:rgba(185,138,78,.22);
  --v8-line:rgba(255,255,255,.09);
  --v8-ease:cubic-bezier(.19,1,.22,1);
}

/* ========== 0) 全局：更深邃的沉浸背景 + 微光网格 ========== */
body{background:linear-gradient(180deg,#0a0a0c 0%,var(--bg) 30%,var(--bg) 100%)}
/* 细网格微光（高科技基底，非满铺动画） */
body.v8-grid::before{
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%);
}

/* ========== 1) 手机开屏式主视觉 ========== */
.hero-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:radial-gradient(ellipse 90% 62% at 50% 8%,rgba(185,138,78,.14),transparent 62%),#0a0a0c;
}
.hero-screen .hero-inner{
  grid-template-columns:1fr;
  text-align:center;
  justify-items:center;
  gap:0;
  padding-top:72px;
  padding-bottom:40px;
  min-height:0;
}
.hero-screen .hero-inner>div:first-child{display:flex;flex-direction:column;align-items:center}
/* 品牌大主视觉：居中放大，先于标题出现（开屏第一冲击） */
.hero-screen .hero-art{position:relative;order:-1;margin:0 0 -8px}
.hero-screen .hero-art-svg{width:min(400px,64vw);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* 大光晕：鹿头背光 */
.hero-screen .hero-art::before{
  content:"";position:absolute;top:-6%;left:50%;width:130%;height:130%;
  transform:translateX(-50%);
  background:radial-gradient(circle at center,rgba(185,138,78,.30),transparent 62%);
  filter:blur(34px);pointer-events:none;z-index:-1;
}
/* 旋转光环：高科技轨道感 */
.hero-screen .hero-art .orbit{
  position:absolute;left:50%;top:50%;width:118%;height:118%;
  border:1px dashed rgba(185,138,78,.30);border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:lumiOrbit 46s linear infinite;
}
.hero-screen .hero-art .orbit::after{
  content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 14px rgba(185,138,78,.9);
}
.hero-screen .hero-art .orbit.orbit-2{width:150%;height:150%;border-style:solid;border-color:rgba(255,255,255,.05);animation-direction:reverse;animation-duration:70s}
@keyframes lumiOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* 粒子层 */
.lumi-particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-screen .hero-inner{z-index:2}

/* 开屏时序：JS 在 html 上加 .splash-on 后执行（减动效时 CSS 自动降级） */
html.js-v8 .hero-screen .hero-art{opacity:0;transform:scale(.92);transition:opacity 1.1s var(--v8-ease),transform 1.3s var(--v8-ease)}
html.js-v8 .hero-screen .kicker,
html.js-v8 .hero-screen h1,
html.js-v8 .hero-screen .lead,
html.js-v8 .hero-screen .hero-actions{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s var(--v8-ease),transform 1s var(--v8-ease),filter 1s var(--v8-ease)}
html.js-v8.splash-on .hero-screen .hero-art{opacity:1;transform:scale(1)}
html.js-v8.splash-on .hero-screen .kicker{opacity:1;transform:none;filter:none;transition-delay:.35s}
html.js-v8.splash-on .hero-screen h1{opacity:1;transform:none;filter:none;transition-delay:.55s}
html.js-v8.splash-on .hero-screen .lead{opacity:1;transform:none;filter:none;transition-delay:.78s}
html.js-v8.splash-on .hero-screen .hero-actions{opacity:1;transform:none;filter:none;transition-delay:.95s}
/* 开场扫光：一层金色斜光横掠主视觉 */
.hero-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 42%,rgba(185,138,78,.16) 50%,transparent 58%);
  transform:translateX(-120%) skewX(-12deg);
}
html.js-v8.splash-on .hero-screen::after{animation:lumiSplashSweep 1.8s var(--v8-ease) .5s 1 forwards}
@keyframes lumiSplashSweep{to{transform:translateX(120%) skewX(-12deg)}}

/* 向下滑动提示：开屏底部呼吸箭头 */
.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;
  color:var(--tx-3);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transition:opacity 1.2s ease .9s;
}
html.js-v8.splash-on .scroll-hint{opacity:1}
.scroll-hint .mouse{
  width:22px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:12px;position:relative;
}
.scroll-hint .mouse::after{
  content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:var(--gold-2);animation:lumiWheel 1.9s var(--v8-ease) infinite;
}
@keyframes lumiWheel{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(11px)}}

/* hero 滚出：v8 版更利落的淡出 + 上移（配合 interactions 的 .hero-out） */
html.js-v8 .hero-screen{transition:opacity 1s var(--v8-ease)}
html.js-v8 .hero-screen.hero-out{opacity:0;transform:translateY(-90px) scale(.985)}
html.js-v8 .hero-screen.hero-out::after{animation:none;opacity:0}

/* ========== 2) 大区块叙事布局 ========== */
/* 区块留白加深：叙事节奏 */
main section{padding:132px 0}
.section-head{margin-bottom:68px}
.section-head h2{font-size:clamp(34px,4.6vw,56px);line-height:1.16;letter-spacing:.01em}
.section-head .note{font-size:15px;max-width:34em}
/* 章节编号：大区块叙事标识 */
section.lumi-chapter{position:relative}
section.lumi-chapter::before{
  content:attr(data-ch);position:absolute;top:118px;right:5vw;
  font-family:var(--serif);font-size:clamp(60px,8vw,110px);font-weight:600;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;line-height:1;
}
section.lumi-chapter .section-head{margin-bottom:84px}

/* ========== 3) 去胶囊卡片风：卡片 → 细线大区块 ========== */
/* 能力矩阵：竖排大区块（每行一个主题，金色索引竖条） */
.pipeline{grid-template-columns:1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pipeline .frame{
  display:grid;grid-template-columns:88px 1fr 1.6fr;align-items:center;gap:34px;
  background:rgba(255,255,255,.02);border:none;border-radius:0;padding:34px 42px;
  box-shadow:none;transition:background .5s var(--v8-ease);
}
.pipeline .frame:hover{transform:none;box-shadow:none;background:rgba(185,138,78,.07)}
.pipeline .frame .idx{font-size:14px;letter-spacing:.3em;margin:0;color:var(--gold-2);border-left:2px solid var(--gold);padding-left:16px}
.pipeline .frame b{font-size:20px;margin:0;color:var(--tx)}
.pipeline .frame p{font-size:15px;line-height:1.8;margin:0}
/* 产品矩阵：两栏大区块 + 强调卡 */
.matrix-grid{grid-template-columns:1fr 1fr;gap:26px}
.matrix-grid .frame{
  border-radius:14px;padding:44px 46px;box-shadow:none;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.matrix-grid .frame .idx{font-size:13px;letter-spacing:.28em;margin-bottom:22px}
.matrix-grid .frame b{font-size:24px;margin-bottom:12px}
.matrix-grid .frame p{font-size:15px}
.matrix-grid .frame.growing{
  background:linear-gradient(160deg,rgba(185,138,78,.14),rgba(255,255,255,.02));
  border-color:rgba(185,138,78,.4);
}
.matrix-grid .frame:hover{transform:translateY(-4px);box-shadow:0 34px 80px rgba(0,0,0,.45),0 0 60px -22px rgba(185,138,78,.45)}
/* 价值/选择：三等分细线大区块，取消浮起胶囊感 */
.values{grid-template-columns:repeat(3,1fr);gap:26px}
.value{border-radius:14px;padding:44px 40px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));box-shadow:none}
.value:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(0,0,0,.42)}
.value .idx{font-size:13px;letter-spacing:.3em;margin-bottom:20px}
.value b{font-size:20px;margin-bottom:12px}
.value p{font-size:14.5px}
/* 产品中心卡：细线大区块 */
.product-card{border-radius:14px;padding:40px 38px;box-shadow:none;background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.006))}
.product-card:hover{transform:translateY(-4px);box-shadow:0 34px 80px rgba(0,0,0,.46)}
.p-head h3{font-size:22px}
/* 公告：去除堆叠卡感，改为细线分区列表 */
.news-item{border-radius:12px;padding:20px 24px;background:rgba(255,255,255,.025)}
/* CTA 带：更大留白 */
.cta-band{border-radius:18px;padding:64px 72px}
.cta-band h2{font-size:clamp(26px,3.4vw,40px)}

/* ========== 4) 滚动叙事：揭幕 + 视差（点缀） ========== */
/* 区块标题揭幕：clip-path 上推 + 模糊消解 */
body.js-ready .reveal h2,
body.js-ready .reveal .section-head{
  clip-path:inset(0 0 8% 0);
}
body.js-ready .reveal.in h2,
body.js-ready .reveal.in .section-head{clip-path:inset(0 0 0 0)}
/* 大区块整体揭幕：正文/侧栏渐显 */
body.js-ready .reveal{transition:opacity 1s var(--v8-ease),transform 1s var(--v8-ease),clip-path 1s var(--v8-ease)}
/* 金色流光标题增强 */
.section-head h2 em{background-size:260% 100%}
/* 分区顶部光轨分隔线 */
main section{position:relative}
main section::after{
  content:"";position:absolute;left:50%;top:0;width:min(420px,60%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(185,138,78,.5),transparent);opacity:.5;
}
/* 时间线：留白加深 */
.timeline .tl{padding:34px 0}
.tl b{font-size:13px}
.tl p{font-size:16px}

/* ========== 5) 法律页氛围：统一深色开篇大标题 ========== */
.page{padding:104px 0 140px}
.doc-head{padding-bottom:44px;margin-bottom:56px}
.doc-head h1{font-size:clamp(34px,4.6vw,52px)}
.doc-body{max-width:840px}

/* ========== 6) 移动端适配 ========== */
@media (max-width:900px){
  main section{padding:92px 0}
  .section-head{margin-bottom:44px}
  section.lumi-chapter::before{display:none}
  .hero-screen{min-height:100svh}
  .hero-screen .hero-art-svg{width:min(300px,66vw)}
  .hero-screen .hero-inner{padding-top:56px}
  .pipeline .frame{grid-template-columns:1fr;gap:10px;padding:26px 24px}
  .matrix-grid,.values{grid-template-columns:1fr;gap:16px}
  .matrix-grid .frame,.value{padding:30px 26px}
  .cta-band{padding:46px 28px}
  .scroll-hint{bottom:16px}
}

/* ========== 7) 尊重减动效偏好 ========== */
@media (prefers-reduced-motion:reduce){
  .hero-screen .orbit,.hero-screen .orbit.orbit-2,.hero-screen::after,.scroll-hint .mouse::after{animation:none!important}
  html.js-v8 .hero-screen .hero-art,
  html.js-v8 .hero-screen .kicker,
  html.js-v8 .hero-screen h1,
  html.js-v8 .hero-screen .lead,
  html.js-v8 .hero-screen .hero-actions{opacity:1;transform:none;filter:none;transition:none}
  html.js-v8 .hero-screen.hero-out{opacity:1;transform:none}
  .scroll-hint{opacity:1}
}