/* ============================================================
   DEEP-SPACE BEACON · animations.css —— 矢量动画增强层
   「深空信标」主题动画：信标脉冲 / 观测环轨道 / 卡片扫描光 /
   LED 呼吸 / 按钮微交互 / 入场辉光。
   工程约束：
   - 只做 transform / opacity / filter 类动画，GPU 友好
   - prefers-reduced-motion 由 override.css 全局降级规则自动关闭
   - 移动端(hover:none / 窄屏)减量或关闭高频特效
   - 不触碰布局属性，不破坏既有 .ri 滚动入场体系
   ============================================================ */

/* ---------- 0. 深空星尘 Canvas 层（anim.js 动态增强） ----------
   叠加在 #stars 之上的独立画布，fixed 容器内绝对铺满。 */
#deepspace{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- A. 信标脉冲环（Hero 背景 · 主题动画） ----------
   每 5.2s 从中心扩散一圈冷钢蓝脉冲 + 第二圈 box-shadow 波前，
   呼应「深空信标持续广播」的站点意象。z-index:-1 位于内容之下。 */
.hero-rail::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:min(64vmin,520px); height:min(64vmin,520px);
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:-1; border-radius:50%;
  border:1px solid rgba(147,162,180,.30);
  box-shadow:0 0 0 0 rgba(147,162,180,.18);
  opacity:0;
  animation:beacon-pulse 5.2s cubic-bezier(.2,.7,.3,1) infinite;
  animation-delay:.9s;
}
@keyframes beacon-pulse{
  0%   { transform:translate(-50%,-50%) scale(.16); border-color:rgba(147,162,180,.34); box-shadow:0 0 0 0 rgba(147,162,180,.20); opacity:.6; }
  55%  { border-color:rgba(116,160,124,.16); box-shadow:0 0 0 56px rgba(147,162,180,0); opacity:.18; }
  100% { transform:translate(-50%,-50%) scale(1.02); opacity:0; box-shadow:0 0 0 0 rgba(147,162,180,0); }
}

/* ---------- B. 观测环 SVG 动画（品牌符号） ----------
   外圈虚线段缓慢公转（轨道缺口可见）；主圆点呼吸；
   伴星微光浮动。用于宣言观测环 + 页脚品牌环，全站一致。 */
.symbol-ring{ will-change:transform; }
.symbol-ring circle:nth-of-type(1){
  stroke-dasharray:58 202;
  transform-box:fill-box; transform-origin:center;
  animation:ring-orbit 48s linear infinite;
}
.symbol-ring circle:nth-of-type(3){
  transform-box:fill-box; transform-origin:center;
  animation:orb-breathe 4.6s ease-in-out infinite;
}
.symbol-ring circle:nth-of-type(4),
.symbol-ring circle:nth-of-type(5){
  transform-box:fill-box; transform-origin:center;
  animation:satellite-float 7.4s ease-in-out infinite;
}
.symbol-ring circle:nth-of-type(5){ animation-delay:-3.6s; }
@keyframes ring-orbit{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes orb-breathe{
  0%,100%{ transform:scale(1); opacity:.92; }
  50%    { transform:scale(.84); opacity:.5; }
}
@keyframes satellite-float{
  0%,100%{ transform:translate(0,0); opacity:.85; }
  50%    { transform:translate(1.5px,-1.5px); opacity:.45; }
}

/* ---------- C. Hero 同心星环：缓慢呼吸 ---------- */
.hero-rail::before{
  animation:ring-breathe 9s ease-in-out infinite;
}
@keyframes ring-breathe{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%    { transform:translateX(-50%) scale(1.028); }
}

/* ---------- D. Hero 主标题入场辉光（滚动渐入补充） ---------- */
.hero-main.ri{
  filter:blur(7px);
  transition:opacity var(--d-3) var(--ease-out),
             transform var(--d-3) var(--ease-enter),
             filter var(--d-4) var(--ease-out);
}
.hero-main.ri.in{ filter:blur(0); }

/* ---------- E. 卡片悬停：顶部扫描光带 + LED 点亮 ---------- */
.dm, .journal-card, .pn-card, .suggest-card,
.device, .beacon, .thought, .sn-card{ position:relative; }
.dm::after, .journal-card::after, .pn-card::after,
.suggest-card::after, .device::after, .beacon::after{
  content:"";
  position:absolute; left:10%; right:10%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(147,162,180,.85), transparent);
  transform:scaleX(0);
  transition:transform .55s var(--ease-spring);
  pointer-events:none;
}
.dm:hover::after, .journal-card:hover::after, .pn-card:hover::after,
.suggest-card:hover::after, .device:hover::after, .beacon:hover::after{
  transform:scaleX(1);
}
/* 档案盒 LED：悬停时点亮并低频呼吸 */
.dm-led, .pn-card .led, .device .led, .beacon .led{
  transition:transform .3s var(--ease-spring), box-shadow .3s, background .3s;
}
.dm:hover .dm-led,
.pn-card:hover .led, .device:hover .led, .beacon:hover .led{
  transform:scale(1.6);
  background:var(--parchment);
  box-shadow:0 0 9px rgba(168,154,124,.55);
  animation:led-hum 1.1s ease-in-out infinite;
}
@keyframes led-hum{ 0%,100%{ opacity:.9; } 50%{ opacity:.35; } }

/* ---------- F. 按钮 / 链接微交互 ---------- */
/* 品牌信标点：持续缓慢脉动（呼应"信标"意象） */
.brand-orb{ animation:beacon-orb 3.4s ease-in-out infinite; }
@keyframes beacon-orb{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%    { transform:scale(.72); opacity:.45; }
}
/* 模块链接：悬停时箭头滑出 + 文字前移 */
.dm-link{ transition:padding-left .3s var(--ease-out), color .2s; }
.dm:hover .dm-link{ padding-left:7px; }
.dm-link::after{ display:inline-block; transition:transform .3s var(--ease-spring); }
.dm:hover .dm-link::after{ transform:translateX(5px); }
/* 最近动态：右侧箭头滑出 */
.news-arr{ display:inline-block; transition:transform .3s var(--ease-spring); }
.news-item:hover .news-arr{ transform:translateX(5px); }
/* 技术栈芯片：悬停磷光边 */
.stack span{ transition:border-color .25s, color .25s, background .25s; }
.stack span:hover{
  border-color:rgba(116,160,124,.5);
  color:var(--ice-2);
  background:rgba(116,160,124,.06);
}
/* 导航序号：悬停点亮 */
.nav a .idx{ transition:color .25s; }
.nav a:hover .idx{ color:var(--parchment); }
/* 返回顶部箭头：悬停上浮 */
.to-top{ transition:opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--ease-enter); }
.to-top:hover{ transform:translateY(-3px); }

/* ---------- G. 移动端减量 / 触屏关闭 ---------- */
@media (max-width:768px){
  .hero-rail::after{ width:min(72vw,340px); height:min(72vw,340px); animation-duration:7.4s; }
  .hero-rail::before{ animation:none; }
  .symbol-ring circle:nth-of-type(1){ animation-duration:72s; }
  .hero-main.ri{ filter:none; }   /* 移动端省 blur 合成层开销 */
}
@media (hover:none){
  .dm::after, .journal-card::after, .pn-card::after,
  .suggest-card::after, .device::after, .beacon::after{ display:none; }
  .dm:hover .dm-link{ padding-left:0; }
  .dm-link::after{ transform:none; }
}

/* ---------- H. 首页入口：宣传动画 ----------
   指向 /promo.html 的矢量宣传片。LED 复用上面的 led-hum 呼吸。 */
.hero-promo{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:18px; padding:9px 15px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--panel);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--ink);
  transition:border-color .25s, color .25s, background .25s;
}
.hero-promo:hover{ border-color:var(--ice-dim); color:var(--parchment); background:var(--panel-2); }
.hero-promo .hp-en{ color:var(--muted); font-size:10px; letter-spacing:.22em; }
.hero-promo .hp-led{
  width:6px; height:6px; border-radius:50%;
  background:var(--phos); box-shadow:0 0 7px rgba(116,160,124,.5);
  animation:led-hum 1.6s ease-in-out infinite;
}
@media (max-width:768px){ .hero-promo .hp-en{ display:none; } }

/* ---------- I. AI 导引加载态：品牌观测环 ----------
   上游模型先推思维链、正文迟迟不来时，气泡里显示站点自己的观测环
   （上面 B 段的 .symbol-ring 规则会自动让它公转+呼吸），不再倒原始思考文本。 */
.think-wrap{ display:inline-flex; align-items:center; gap:10px; }
.think-ring{ display:inline-block; flex:none; width:24px; height:24px; color:var(--ice-2); }
.think-ring .symbol-ring{ display:block; width:100%; height:100%; }
.think-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--muted); animation:think-breathe 2.4s ease-in-out infinite;
}
@keyframes think-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .think-label{ animation:none; opacity:.8; }
}

/* ---------- J. 矢量测绘版（vector-bg.js） ----------
   三个动效，都对应底图上真实会发生的事：
   探测器沿轨道运行（虚线行进）、信标向外广播（四道波前依次点亮）、
   星点与十字标随 seeing 起伏。pathLength=1000 已归一，
   所以轨道在任何屏幅上行进速度一致。 */
.vb-trail{
  stroke-dasharray:30 970;
  animation:vb-orbit-run 68s linear infinite;
}
@keyframes vb-orbit-run{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-1000; } }

.vb-wave{
  animation:vb-ripple 6.6s cubic-bezier(.16,.7,.24,1) infinite;
  animation-delay:calc(var(--i,0) * -1.65s);
}
@keyframes vb-ripple{
  0%   { opacity:0; }
  9%   { opacity:.85; }
  58%  { opacity:.14; }
  100% { opacity:0; }
}

.vb-node-ring{
  transform-box:fill-box; transform-origin:center;
  animation:vb-seeing 5.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.05s);
}
@keyframes vb-seeing{
  0%,100%{ transform:scale(.82); opacity:.55; }
  46%    { transform:scale(1.16); opacity:.95; }
}
.vb-ret-ring{
  transform-box:fill-box; transform-origin:center;
  animation:vb-reticle 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.4s);
}
@keyframes vb-reticle{
  0%,100%{ transform:scale(1); opacity:.7; }
  50%    { transform:scale(1.14); opacity:.34; }
}
/* 太阳缓慢自转：整组绕自己的日心转，圆环与经线一起动 */
.vb-sungroup{ transform-box:fill-box; transform-origin:center; animation:vb-sun-turn 210s linear infinite; }
@keyframes vb-sun-turn{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* 窄屏：视差层不再合成，浓淡减半 */
@media (max-width:820px){
  .vector-bg{ opacity:.5; }
  .vb-trail{ animation-duration:96s; }
}
@media (prefers-reduced-motion: reduce){
  .vb-trail,.vb-wave,.vb-node-ring,.vb-ret-ring,.vb-sungroup{ animation:none; }
  .vb-wave{ opacity:.4; }
  .vector-bg .vb-layer{ will-change:auto; }
}

/* ============================================================
   v5.5 · 触屏 hover 位移清零「最后一击」(2026-10-30)
   为什么写在这里而不是 override.css:
     本站的样式表加载顺序是 style.css → override.css → **animations.css**,
     本文件最后加载。override.css 末尾同特异性(hover:none)的
     `.to-top:hover{transform:none}` 会被本文件上面那些
     `.to-top:hover{transform:translateY(-3px)}` 盖回去 ——
     实测探针里 .to-top 一直是唯一漏网的那个, 根因就在这里。
     所以"清零"必须写在最后一个加载的文件里才真正生效。
   触屏判定用 hover:none(不限宽度): 站点移动端断点是 860px,
   而原覆盖只写到 720px, 721~860px 整段裸奔。
   ---------------------------------------------------------------- */
@media (hover:none){
  /* 外层容器: 一切 hover 位移/缩放归零 */
  .to-top:hover,
  .dm:hover,
  .pn-card:hover,
  .journal-card:hover,
  .poem-card:hover,
  .beacon:hover,
  .thought:hover,
  .suggest-card:hover,
  .device:hover,
  .metric:hover,
  .btn:hover,
  .chip:hover,
  .bio-facts:hover,
  .news-item:hover,
  .sig-item:hover,
  .hero-promo:hover,
  .search-results .sr-item:hover,
  .lightbox .lb-nav:hover,
  .legal-close:hover{
    transform:none;
  }

  /* 内部件: 箭头滑出 / 顶线拉开 / LED 呼吸 */
  .news-item:hover .news-arr,
  .dm:hover .dm-link::after,
  .dm-link::after{
    transform:none;
  }
  .dm:hover::after,
  .journal-card:hover::after,
  .pn-card:hover::after,
  .suggest-card:hover::after,
  .device:hover::after,
  .beacon:hover::after{
    transform:scaleX(0);
  }
  /* LED 那条 led-hum 是 infinite 动画: tap 一下之后会一直呼吸闪烁,
     这是"点完还在动"最典型的幽灵态。触屏上彻底停掉。 */
  .dm:hover .dm-led,
  .pn-card:hover .led,
  .device:hover .led,
  .beacon:hover .led{
    transform:none;
    animation:none;
  }
  /* hover 改 padding 会触发布局(比 transform 贵得多) */
  .dm:hover .dm-link{ padding-left:0; }
}