/* =========================================================
   鹿觅Lumi · 沉浸式微动效层 v7.2（苹果官网感增强）
   位置：css/immersive-v7.css（必须在 anim-v7.css 之后加载）
   覆盖点：光轨/光影流动背景 · 玻璃拟态悬浮导航增强 ·
           非对称重叠主视觉 · 悬浮卡片层次 · staggered 模糊上浮 ·
           hero 滚出淡出（配合 interactions-v7.js 的 .hero-out）
   原则：纯视觉 CSS 层；渐进增强；JS 仅做 class 切换；
         尊重 prefers-reduced-motion；不触碰业务 JS/接口
   ========================================================= */
:root{--ease-2:cubic-bezier(.16,1,.3,1)}

/* ---------- 0) 全局光轨 / 光影流动背景 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 820px at 14% -12%,rgba(185,138,78,.12),transparent 60%),
    radial-gradient(1000px 720px at 88% 20%,rgba(185,138,78,.08),transparent 55%),
    radial-gradient(900px 640px at 50% 112%,rgba(185,138,78,.06),transparent 60%);
  animation:lumiBreath 16s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;left:-28%;right:-28%;top:-10%;bottom:-10%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0%,transparent 44%,rgba(185,138,78,.09) 49%,rgba(185,138,78,.03) 53%,transparent 60%),
    linear-gradient(115deg,transparent 0%,transparent 68%,rgba(185,138,78,.06) 72%,transparent 78%);
  will-change:transform;
  animation:lumiBeamShift 24s ease-in-out infinite alternate;
}
@keyframes lumiBreath{0%{opacity:.5}100%{opacity:1}}
@keyframes lumiBeamShift{0%{transform:translateX(-3%)}100%{transform:translateX(3%)}}

/* ---------- 1) 玻璃拟态悬浮导航增强 ---------- */
nav{
  box-shadow:0 12px 44px -20px rgba(0,0,0,.65);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
nav::before{ /* 顶部暖金高光线：悬浮感点睛 */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 6%,rgba(185,138,78,.55) 50%,transparent 94%);
  opacity:0;transition:opacity .6s var(--ease);
}
nav.scrolled::before{opacity:1}
nav.scrolled{
  background:rgba(13,13,15,.76);
  box-shadow:0 20px 56px -22px rgba(0,0,0,.75);
}
nav:hover{backdrop-filter:blur(26px) saturate(1.55);-webkit-backdrop-filter:blur(26px) saturate(1.55)}
.logo{position:relative}
.logo::after{
  content:"";position:absolute;left:50%;bottom:-5px;height:2px;width:0;border-radius:2px;
  background:var(--gold);transform:translateX(-50%);transition:width .45s var(--ease);
}
.logo:hover::after{width:calc(100% - 6px)}

/* ---------- 2) 非对称重叠主视觉 ---------- */
.hero::after{ /* hero 内斜向光轨扫过 */
  content:"";position:absolute;top:-8%;bottom:-8%;left:-20%;width:62%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(185,138,78,.12) 45%,rgba(185,138,78,.04) 52%,transparent 64%);
  transform:skewX(-14deg) translateX(-170%);
  animation:lumiHeroSweep 11s ease-in-out infinite;
}
@keyframes lumiHeroSweep{
  0%{transform:skewX(-14deg) translateX(-170%);opacity:0}
  16%{opacity:1}
  45%{transform:skewX(-14deg) translateX(38%);opacity:1}
  62%{opacity:0}
  100%{transform:skewX(-14deg) translateX(170%);opacity:0}
}
/* 主视觉：左右不对称 + 图形左伸入文案列，形成重叠层次 */
.hero-inner{grid-template-columns:1.1fr .9fr;gap:20px}
.hero-inner>div:first-child{position:relative;z-index:2}
.hero-art{margin-left:-46px;margin-top:22px;z-index:1}
.hero-art::before{ /* 背光暖金盘 */
  content:"";position:absolute;top:4%;left:52%;width:74%;height:74%;
  transform:translateX(-50%);
  background:radial-gradient(circle at center,rgba(185,138,78,.20),transparent 66%);
  filter:blur(26px);pointer-events:none;
}
.hero-art::after{ /* 前置悬浮玻璃圆环 */
  content:"";position:absolute;top:6%;right:2%;width:118px;height:118px;border-radius:50%;
  border:1px solid rgba(185,138,78,.38);
  background:radial-gradient(circle at 32% 30%,rgba(185,138,78,.16),rgba(255,255,255,.03));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 22px 54px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14);
  animation:lumiFloat 7s ease-in-out infinite;
  pointer-events:none;
}
.hero-art .halo-blur{opacity:.45}
@keyframes lumiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* hero 滚出淡出：JS 滚过主视觉后加 .hero-out（渐进增强） */
html.js-anim .hero-inner{
  transition:opacity .9s var(--ease-2),transform .9s var(--ease-2);
}
html.js-anim .hero.hero-out .hero-inner{
  animation:none;opacity:0;transform:translateY(-56px);
}

/* ---------- 3) 悬浮卡片层次：错落 + 内高光 + 层次阴影 ---------- */
.frame,.value,.product-card,.news-item{
  position:relative;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055);
}
.frame:hover,.value:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.58),0 0 44px -16px rgba(185,138,78,.4),inset 0 1px 0 rgba(255,255,255,.07);
}
.product-card:hover{
  box-shadow:0 26px 60px rgba(0,0,0,.54),0 0 36px -14px rgba(185,138,78,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
/* 错落：矩阵/管线卡阶梯式上移，打破整齐网格（非对称层次） */
.matrix-grid .frame:nth-child(3n+2){margin-top:30px}
.matrix-grid .frame:nth-child(3n+3){margin-top:-8px}
.pipeline .frame:nth-child(2n){margin-top:26px}
/* growing 卡：金色呼吸光晕（悬浮感最高层） */
.frame.growing{
  box-shadow:0 26px 64px rgba(0,0,0,.5),0 0 52px -14px rgba(185,138,78,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.frame.growing:hover{
  box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 70px -10px rgba(185,138,78,.55),inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---------- 4) staggered 渐入上浮：苹果式模糊揭幕 ---------- */
@keyframes lumiUpV2{
  from{opacity:0;transform:translateY(26px);filter:blur(12px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.reveal .staged{animation:lumiUpV2 .85s var(--ease-2) backwards}
/* 分区标题滚动进入：更大上浮 + 模糊消解 */
body.js-ready .reveal h2,
body.js-ready .reveal .section-head{
  transform:translateY(34px);
  transition:opacity .9s var(--ease-2),transform .9s var(--ease-2),filter .9s var(--ease-2);
  filter:blur(6px);
}
body.js-ready .reveal.in h2,
body.js-ready .reveal.in .section-head{transform:none;filter:blur(0)}
/* 金色关键词：流光质感 */
.section-head h2 em,.lead-p i,.tl p i,.hero h1 em{
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 45%,#e8c98f 50%,var(--gold-2) 55%,var(--gold) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:lumiGoldFlow 6s ease-in-out infinite;
}
@keyframes lumiGoldFlow{0%,100%{background-position:0% 0}50%{background-position:90% 0}}

/* ---------- 5) 移动端适配 ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:34px}
  .hero-inner>div:first-child{z-index:auto}
  .hero-art{margin-left:0;margin-top:10px}
  .hero-art::after{width:84px;height:84px}
  .matrix-grid .frame:nth-child(3n+2),
  .matrix-grid .frame:nth-child(3n+3),
  .pipeline .frame:nth-child(2n){margin-top:0}
}

/* ---------- 6) 尊重减动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.hero::after,.hero-art::before,.hero-art::after,
  .section-head h2 em,.lead-p i,.tl p i,.hero h1 em{animation:none!important}
  html.js-anim .hero-inner{transition:none}
  html.js-anim .hero.hero-out .hero-inner{opacity:1;transform:none}
  body.js-ready .reveal h2,body.js-ready .reveal .section-head{filter:none;transform:none}
}