@charset "utf-8";
/* ==========================================================================
   国学典藏 · 主题 v6 动效层
   组件编号对应《组件 UI 库使用说明》（C-01 ~ C-95）：
   C-01 磁吸按钮 .mg         C-02 逐行文字揭示 .line>span
   C-03 数字滚动 [data-count] C-04 描边跑马灯 .n6-mq
   C-05 3D Tilt .tilt        C-08 双层自定义光标 .n6-cur
   C-10 clip-path 图片揭示   C-14 光标聚光卡 .spot
   C-24 噪点颗粒层 .n6-grain C-44 返回顶部 .n6-top
   C-61 圆环阅读进度 .n6-progress
   红线：只动 transform / opacity；prefers-reduced-motion 全关；
         光标与 Tilt 仅 (hover:hover) and (pointer:fine) 且 ≥901px 启用。
   ========================================================================== */

/* --------------------------------------------------------------------------
   C-02 逐行揭示：父级 .line 溢出裁切，子 span 初始下沉
   -------------------------------------------------------------------------- */
.hero h1 .line{display:block;overflow:hidden;padding:0 .04em .08em}
.hero h1 .line > span{
  display:block;transform:translate3d(0,110%,0);
  transition:transform .95s var(--n6-ease);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
  will-change:transform;
}
html.n6-ready .hero h1 .line > span{transform:translate3d(0,0,0)}
.hero .kicker,.hero .hero-sub,.hero .hero-search,.hero .quick,.hero .hero-stats{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .8s var(--n6-ease),transform .8s var(--n6-ease);
}
html.n6-ready .hero .kicker{opacity:1;transform:none;transition-delay:.05s}
html.n6-ready .hero .hero-sub{opacity:1;transform:none;transition-delay:.5s}
html.n6-ready .hero .hero-search{opacity:1;transform:none;transition-delay:.62s}
html.n6-ready .hero .quick{opacity:1;transform:none;transition-delay:.72s}
html.n6-ready .hero .hero-stats{opacity:1;transform:none;transition-delay:.82s}

/* --------------------------------------------------------------------------
   滚动入场（IntersectionObserver 加 .on）
   -------------------------------------------------------------------------- */
html.n6-anim [data-rv]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .9s var(--n6-ease),transform .9s var(--n6-ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
html.n6-anim [data-rv].on{opacity:1;transform:none}
html.n6-anim [data-rv="left"]{transform:translate3d(-26px,0,0)}
html.n6-anim [data-rv="right"]{transform:translate3d(26px,0,0)}
html.n6-anim [data-rv="fade"]{transform:none}
html.n6-anim [data-rv="zoom"]{transform:scale(.96)}

/* 列表整组错峰：由 JS 给子项写 --d */
html.n6-anim .n6-stagger > *{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .7s var(--n6-ease),transform .7s var(--n6-ease),border-color .45s,border-color .45s;
  transition-delay:calc(var(--d,0) * 55ms);
}
html.n6-anim .n6-stagger.on > *{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   C-01 磁吸按钮
   -------------------------------------------------------------------------- */
.mg{display:inline-flex;transition:transform .45s var(--n6-ease)}
.mg > span{display:inline-flex;align-items:center;height:100%;pointer-events:none}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .mg{will-change:transform}
}

/* --------------------------------------------------------------------------
   C-05 3D Tilt（今日撷英卡）
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .tilt{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
    transition:transform .5s var(--n6-ease),box-shadow .5s var(--n6-ease),border-color .5s var(--n6-ease);
    transform-style:preserve-3d;
  }
  .tilt.is-tilting{transition:transform .12s linear}
}

/* --------------------------------------------------------------------------
   C-14 光标聚光卡（卡片内 --mx/--my 由 JS 写入）
   -------------------------------------------------------------------------- */
.spot{position:relative;overflow:hidden;isolation:isolate}
.spot > *{position:relative;z-index:1}
.spot::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(165,131,74,.15),transparent 64%);
  transition:opacity .45s var(--n6-ease);
}
.spot:hover::before{opacity:1}

/* --------------------------------------------------------------------------
   C-10 hover 揭示（图/摘要裁切上滑）
   -------------------------------------------------------------------------- */
.peek{position:relative;overflow:hidden}
.peek img,.peek .peek-i{
  transition:transform .8s var(--n6-ease),clip-path .7s var(--n6-ease);
  clip-path:inset(0 0 0 0);
}
.peek:hover img,.peek:hover .peek-i{transform:scale(1.04)}

/* --------------------------------------------------------------------------
   C-08 双层自定义光标
   -------------------------------------------------------------------------- */
.n6-cur,.n6-cur-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;
  transition:opacity .3s ease;
  will-change:transform;
}
.n6-cur{
  width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--n6-ink);
}
.n6-cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(23,19,16,.34);
  transition:opacity .3s ease,width .3s var(--n6-ease),height .3s var(--n6-ease),margin .3s var(--n6-ease),border-color .3s,background .3s;
}
html.n6-cursor-on .n6-cur,html.n6-cursor-on .n6-cur-ring{opacity:1}
html.n6-cursor-on,html.n6-cursor-on a,html.n6-cursor-on button{cursor:none}
html.n6-cursor-on .n6-cur-ring.hot{
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-color:rgba(165,131,74,.7);background:rgba(165,131,74,.08);
}
html.theme-dark .n6-cur{background:var(--n6-gold-l)}
html.theme-dark .n6-cur-ring{border-color:rgba(237,231,218,.3)}

/* --------------------------------------------------------------------------
   C-24 噪点颗粒
   -------------------------------------------------------------------------- */
.n6-grain{
  position:fixed;inset:-100px;z-index:9997;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  animation:n6-grain-shift 8s steps(6) infinite;
}
@keyframes n6-grain-shift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-6px,4px,0)}
  40%{transform:translate3d(4px,-6px,0)}
  60%{transform:translate3d(-4px,-4px,0)}
  80%{transform:translate3d(6px,3px,0)}
  100%{transform:translate3d(0,0,0)}
}
html.theme-dark .n6-grain{opacity:.045}

/* --------------------------------------------------------------------------
   C-44 返回顶部
   -------------------------------------------------------------------------- */
.n6-top{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--n6-ink);color:var(--n6-card);border:none;
  box-shadow:0 16px 30px -18px rgba(0,0,0,.7);
  opacity:0;transform:translate3d(0,14px,0) scale(.9);pointer-events:none;
  transition:opacity .45s var(--n6-ease),transform .45s var(--n6-ease),background .3s;
}
.n6-top.show{opacity:1;transform:none;pointer-events:auto}
.n6-top:hover{background:var(--n6-gold);color:#fff}
.n6-top svg{width:16px;height:16px}
html.theme-dark .n6-top{background:var(--n6-gold-l);color:#12100D}

/* --------------------------------------------------------------------------
   C-61 圆环阅读进度（详情页，JS 注入）
   -------------------------------------------------------------------------- */
.n6-progress{
  position:fixed;right:26px;bottom:82px;z-index:60;
  width:44px;height:44px;pointer-events:none;
  opacity:0;transition:opacity .4s var(--n6-ease);
}
.n6-progress.show{opacity:1}
.n6-progress svg{transform:rotate(-90deg);width:44px;height:44px}
.n6-progress circle{fill:none;stroke-width:2}
.n6-progress .bg{stroke:var(--n6-line)}
.n6-progress .fg{
  stroke:var(--n6-gold);stroke-linecap:round;
  stroke-dasharray:119.4;stroke-dashoffset:119.4;
}
.n6-progress b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--n6-mono);font-size:9px;font-weight:500;color:var(--n6-ink-3);
}

/* --------------------------------------------------------------------------
   首屏视差（Locomotive 声明式：data-scroll-speed）
   -------------------------------------------------------------------------- */
[data-scroll-speed]{will-change:transform}

/* --------------------------------------------------------------------------
   页面进入转场（C-07 轻量版：120ms 幕布）
   -------------------------------------------------------------------------- */
.n6-veil{
  position:fixed;inset:0;z-index:10000;background:var(--n6-dark);
  pointer-events:none;transform-origin:top;
  animation:n6-veil .62s var(--n6-ease) forwards;
}
@keyframes n6-veil{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* --------------------------------------------------------------------------
   侧栏/卡片激活态统一（键盘可见）
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible{outline-offset:4px}

/* --------------------------------------------------------------------------
   移动端/触屏：关闭重动效
   -------------------------------------------------------------------------- */
@media (hover:none),(pointer:coarse){
  .n6-cur,.n6-cur-ring{display:none}
  .n6-grain{opacity:.02}
  .spot::before{display:none}
}
@media (max-width:900px){
  .n6-cur,.n6-cur-ring{display:none}
  html.n6-cursor-on,html.n6-cursor-on a,html.n6-cursor-on button{cursor:auto}
  .n6-progress,.n6-top{right:16px}
  .n6-top{bottom:18px}
  .n6-progress{bottom:70px;width:38px;height:38px}
  .n6-progress svg{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  [data-rv],.n6-stagger > *{opacity:1 !important;transform:none !important}
  .hero h1 .line > span{transform:none !important}
  .hero .kicker,.hero .hero-sub,.hero .hero-search,.hero .quick,.hero .hero-stats{opacity:1 !important;transform:none !important}
  .n6-grain{animation:none}
  .n6-veil{display:none}
  .n6-mq-track{animation:none}
}