/* =========================================================
   鹿觅Lumi · 苹果式动效层 v7.1
   位置：css/anim-v7.css（必须在 style-v7.css 之后加载）
   范围：纯视觉动效覆盖；不改布局、不改任何 JS 接口逻辑
   覆盖点：导航滚动态 / 开场 / 标题渐入 / 滚动浮现 / 视差 /
           hover 微交互 / 平滑滚动 / 统一缓动 / 减动效
   ========================================================= */
:root{--ease:cubic-bezier(.22,.61,.36,1);--dur:.7s}
html{scroll-behavior:smooth}

/* ---------- 5) 导航：平时近透明 → 滚动后毛玻璃浮现 + 收窄 ---------- */
nav{
  background:rgba(13,13,15,.30);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom-color:rgba(255,255,255,.06);
  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.scrolled{
  background:rgba(13,13,15,.88);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom-color:var(--line-strong);
  box-shadow:0 14px 44px rgba(0,0,0,.38);
}
.nav-inner{transition:height .45s var(--ease)}
nav.scrolled .nav-inner{height:56px}
.nav-links>a::after,.nav-links .nav-link::after{transition:transform .3s var(--ease)}

/* ---------- 1) 开场：主视觉淡入 + 轻微放大收束 ---------- */
@keyframes lumiHeroIn{
  from{opacity:0;transform:translateY(20px) scale(1.035)}
  to{opacity:1;transform:none}
}
html.js-anim .hero-inner{animation:lumiHeroIn .95s var(--ease) both}
html.js-anim .hero-short .hero-inner{animation-duration:.75s}
/* 无 hero 的法律页：文档头淡入 */
html.js-anim .doc-head{animation:lumiHeroIn .9s var(--ease) both}

/* ---------- 2) 大标题逐块/逐词浮现（JS 拆块，克制不过度） ---------- */
@keyframes lumiWordIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
html.js-anim .hero h1 .w,
html.js-anim .doc-head h1 .w{
  display:inline-block;
  opacity:0;
  animation:lumiWordIn .75s var(--ease) both;
}
/* hero 内次要元素分层入场（紧随标题） */
html.js-anim .hero .kicker{animation:lumiHeroIn .8s var(--ease) .12s both}
html.js-anim .hero .lead{animation:lumiHeroIn .8s var(--ease) .26s both}
html.js-anim .hero .hero-actions{animation:lumiHeroIn .8s var(--ease) .40s both}

/* ---------- 3) 滚动浮现：升级位移与缓动（覆盖 style-v7 的 0.28s） ---------- */
body.js-ready .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
body.js-ready .reveal.in{opacity:1;transform:none}
/* 网格卡片依次浮现（JS 打 .staged + animationDelay；backwards 保证 hover 不受动画残留影响） */
@keyframes lumiUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.reveal .staged{animation:lumiUp .6s var(--ease) backwards}

/* ---------- 4) 主视觉视差（transform 由 JS 设置，此处只声明合成层） ---------- */
.hero-art,.halo-blur{will-change:transform}

/* ---------- 6) 卡片/产品 hover 微交互（覆盖原轻微上浮） ---------- */
.frame,.value,.product-card,.news-item{
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s ease,background .35s ease;
}
.frame:hover,.value:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 30px 70px rgba(0,0,0,.55);border-color:rgba(185,138,78,.55)}
.product-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 26px 60px rgba(0,0,0,.5);border-color:rgba(185,138,78,.5)}
.news-item:hover{transform:translateY(-3px);border-color:rgba(185,138,78,.4)}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 34px rgba(185,138,78,.35)}
.btn-ghost:hover{transform:translateY(-2px)}
.chip:hover{transform:translateY(-1px);border-color:var(--gold-2)}

/* ---------- 8) 尊重减动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  body.js-ready .reveal{opacity:1;transform:none}
  nav.scrolled .nav-inner{height:var(--nav-h)}
}