/* ═══════════════════════════════════════════════════════════════════════
   星河共享引擎 · starflow.css  (v7)
   全站统一的"流淌的银河"背景层 + 通用生命力动效。
   墨黑底 #0E0D0B · 金箔 #C49749 系 · 克制优雅 · 不刺眼不晃眼。
   所有页面引入此文件 + starflow.js，整站是一条贯穿的活银河。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 星河画布：全屏 fixed、压在内容下、不接事件 ──
   两层 canvas 做银河纵深：#starflow-far 远景慢、#starflow-near 近景快+视差。 */
.starflow-canvas{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  pointer-events:none;
  display:block;
}
#starflow-far{ z-index:-3; }   /* 远层星尘 + 银河光带 */
#starflow-near{ z-index:-2; }  /* 近层亮星 + 流光划过 */

/* 墨黑底之上、星河之下：一层极淡的中心暖晕，给星河"river bed"的纵深感。
   放在 ::before of body 上不污染内容（z-index:-4 最底）。 */
.starflow-on body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(196,151,73,0.055), transparent 55%),
    radial-gradient(ellipse 90% 60% at 80% 110%, rgba(139,100,40,0.045), transparent 60%);
}

/* ★ 可读性蒙层（关键）：在星河 canvas(z=-2) 之上、内容(z≥0)之下，
   压一层暗渐变。中央/上部文字区把墨黑加深到近乎不透，往下/往边缘
   渐隐露出星河 —— 让任何时刻文字都稳稳浮在暗底上，星河只在背景流动。
   canvas 在 -2，本层放 -1 → 正好盖住星河、又不挡内容。 */
.starflow-on body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* 1) 纵向暗幕大幅减弱：让星河铺满全屏明亮露出，只在最顶 nav 区轻压 */
    linear-gradient(to bottom,
      rgba(14,13,11,0.50) 0%,
      rgba(14,13,11,0.30) 18%,
      rgba(14,13,11,0.12) 42%,
      rgba(14,13,11,0.05) 66%,
      rgba(14,13,11,0.02) 100%),
    /* 2) 中央径向罩住 hero 标题带（局部暗底保字），覆盖标题两行、四周透出旋涡盘 */
    radial-gradient(ellipse 60% 32% at 50% 38%,
      rgba(14,13,11,0.92) 0%,
      rgba(14,13,11,0.80) 40%,
      rgba(14,13,11,0.38) 64%,
      rgba(14,13,11,0.0) 80%);
}

/* 减少动效：关掉画布（JS 也会同时不启动），不晃眼 */
@media(prefers-reduced-motion:reduce){
  .starflow-canvas{display:none !important;}
}

/* ★ 文字对比增强（关键）：全站标题/正文加深色描边阴影，
   即使星河转到某帧亮一点，文字也始终有暗底托着、清晰可读。 */
.starflow-on h1,
.starflow-on h2,
.starflow-on h3{
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 2px 12px rgba(0,0,0,0.70),
    0 0 30px rgba(14,13,11,0.55);
}
.starflow-on p,
.starflow-on li,
.starflow-on .hero p,
.starflow-on [class*="hero"] p,
.starflow-on [class*="sub"]{
  text-shadow:0 1px 3px rgba(0,0,0,0.78), 0 0 10px rgba(14,13,11,0.5);
}

/* ═══════════════ 通用生命力动效（全站统一类名）═══════════════ */

/* 关键帧 */
@keyframes sf-float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes sf-glow-pulse{0%,100%{filter:drop-shadow(0 0 6px rgba(196,151,73,0.26));}50%{filter:drop-shadow(0 0 18px rgba(196,151,73,0.6));}}
@keyframes sf-shimmer{0%{background-position:-220% center;}100%{background-position:220% center;}}
@keyframes sf-count-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes sf-ring-pulse{0%{transform:translate(-50%,-50%) scale(0.6);opacity:0.5;}100%{transform:translate(-50%,-50%) scale(2.0);opacity:0;}}
@keyframes sf-btn-sweep{0%,72%{left:-60%;}88%,100%{left:130%;}}
@keyframes sf-halo-breathe{0%,100%{opacity:0.5;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* 章节序号 / eyebrow：金色微光缓缓流过（shimmer，慢=高级） */
.js .sec-index,
.js .a-eyebrow,
.js .subhero-tag{
  background:linear-gradient(100deg,var(--gold) 32%,var(--gold-hi) 50%,var(--gold) 68%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sf-shimmer 7.5s linear infinite;
}

/* 金色主数字：可见后缓慢光晕呼吸（克制） */
.js .sf-glow.in{animation:sf-glow-pulse 6s ease-in-out 1s infinite;}

/* 进入视口数字 count-up 入场 */
.js .num-anim{opacity:0;}
.js .num-anim.in{animation:sf-count-up .9s var(--ease,cubic-bezier(0.22,0.61,0.36,1)) forwards;}

/* 主 CTA 金按钮：金色微光一束缓缓扫过 */
.btn-gold{position:relative;overflow:hidden;}
.btn-gold::after{
  content:'';position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,247,228,0.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:sf-btn-sweep 6.5s ease-in-out infinite;
}

/* nav 预约 CTA：缓慢脉冲环（克制提示，不闪不跳） */
.nav-cta{position:relative;}
.nav-cta::before{
  content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;
  border:1px solid var(--gold);border-radius:2px;
  transform:translate(-50%,-50%);pointer-events:none;
  animation:sf-ring-pulse 3.6s ease-out infinite;
}

/* 关键区光晕呼吸：给挂 .sf-halo 的容器一层缓慢呼吸的金晕 */
.sf-halo{position:relative;}
.js .sf-halo::after{
  content:'';position:absolute;inset:-2px;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(196,151,73,0.10),transparent 62%);
  animation:sf-halo-breathe 7s ease-in-out infinite;
}
.sf-halo > *{position:relative;z-index:1;}

@media(prefers-reduced-motion:reduce){
  .js .sec-index,.js .a-eyebrow,.js .subhero-tag{
    animation:none;-webkit-text-fill-color:var(--gold);color:var(--gold);
  }
  .js .sf-glow.in{animation:none;}
  .btn-gold::after,.nav-cta::before,.js .sf-halo::after{display:none;}
}