/* ==========================================================================
   future.css · 科技感视觉层（全站统一增强，后加载不覆盖既有版式）
   1) 顶部阅读进度条   2) 数字滚动   3) 按钮流光   4) 卡片扫光
   5) Hero 光带 + 雷达扫描   6) 国际权威信源条   7) 双语小标强化
   ========================================================================== */

/* ---------- 1. 顶部阅读进度条 ---------- */
.fx-progress{position:fixed;top:0;left:0;z-index:101;height:2px;width:100%;
  pointer-events:none;background:rgba(255,255,255,.05)}
.fx-progress>i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#0028A0 0%,#0240C8 45%,#FFE800 100%);
  box-shadow:0 0 14px rgba(255,232,0,.45)}

/* ---------- 2. 数字滚动 ---------- */
.fx-num{font-variant-numeric:tabular-nums}

/* ---------- 3. 主按钮流光 ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:fxSheen 5s ease-in-out infinite}
.btn-primary:hover::after{animation-duration:1.6s}
@keyframes fxSheen{0%{left:-70%}55%,100%{left:150%}}

/* ---------- 4. 卡片扫光 ---------- */
.metric-card{overflow:hidden}
.metric-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.10) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.metric-card:hover::after{transform:translateX(130%)}

/* ---------- 5. Hero 光带 + 雷达扫描 ---------- */
.hero{overflow:hidden}
.hero::after{content:"";position:absolute;left:-25%;top:-35%;width:70%;height:170%;
  pointer-events:none;filter:blur(26px);
  background:linear-gradient(115deg,transparent 38%,rgba(2,64,200,.20) 50%,transparent 62%);
  animation:fxSweep 18s ease-in-out infinite alternate}
@keyframes fxSweep{from{transform:translateX(0) rotate(8deg)}to{transform:translateX(55%) rotate(8deg)}}

.fx-radar{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,232,0,.10)}
.fx-radar::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,232,0,.20),rgba(255,232,0,0) 26%);
  animation:fxScan 6s linear infinite}
.fx-radar::after{content:"";position:absolute;inset:19%;border-radius:50%;
  border:1px dashed rgba(127,176,255,.20)}
@keyframes fxScan{to{transform:rotate(360deg)}}

/* ---------- 6. 国际权威信源条 ---------- */
.fx-sources{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  padding:14px 18px;border-radius:12px;
  background:linear-gradient(90deg,rgba(2,40,160,.42),rgba(2,64,200,.14) 60%,transparent);
  border:1px solid rgba(255,255,255,.08);border-left:2px solid var(--yellow)}
.fx-src-label{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--yellow);
  white-space:nowrap}
.fx-src-list{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.fx-src-list a{font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.8px;
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;
  padding:2px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.fx-src-list a:hover{color:var(--white);border-color:var(--yellow)}
.fx-src-note{font-size:11px;color:var(--text-muted);margin-left:auto}

/* ---------- 7. 双语小标强化（国际化） ---------- */
.eyebrow-bilingual .en{letter-spacing:2px;text-transform:uppercase;opacity:.85}
.sec-head .sec-title,.blk-title{letter-spacing:-.4px}

/* ---------- 8. 滚动视差（首页首屏轻微位移） ---------- */
.fx-parallax{will-change:transform}

/* ---------- 9. 国际权威动态 GLOBAL BRIEF（gb-*） ---------- */
.gb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gb-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 18px 16px;
  border-radius:14px;text-decoration:none;
  background:linear-gradient(160deg,rgba(2,40,160,.46),rgba(8,28,78,.34));
  border:1px solid rgba(255,255,255,.09);overflow:hidden;
  transition:transform .25s,border-color .25s,background .25s}
.gb-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--yellow),rgba(255,232,0,.15))}
.gb-card:hover{transform:translateY(-4px);border-color:rgba(255,232,0,.42);
  background:linear-gradient(160deg,rgba(2,64,200,.52),rgba(8,28,78,.40))}
.gb-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gb-src{font-family:var(--font-num);font-size:12px;font-weight:800;letter-spacing:1.2px;
  color:var(--yellow);padding:2px 9px;border-radius:6px;
  background:rgba(255,232,0,.10);border:1px solid rgba(255,232,0,.24)}
.gb-date{font-family:var(--font-num);font-size:11px;color:var(--text-muted);letter-spacing:.6px}
.gb-title{margin:0;font-family:var(--font-num);font-size:13.5px;font-weight:600;line-height:1.55;
  color:var(--white);letter-spacing:.1px}
.gb-cn{margin:0;font-size:12px;line-height:1.78;color:var(--text-muted);flex:1}
.gb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;
  padding-top:11px;border-top:1px dashed rgba(255,255,255,.12)}
.gb-tag{font-size:11px;color:var(--text-secondary);padding:2px 8px;border-radius:999px;
  background:rgba(127,176,255,.10);border:1px solid rgba(127,176,255,.20)}
.gb-more{font-size:11.5px;font-weight:700;color:var(--yellow);display:inline-flex;align-items:center;
  gap:4px;white-space:nowrap}
.gb-more i{font-style:normal;transition:transform .22s}
.gb-card:hover .gb-more i{transform:translateX(4px)}
.gb-note{margin-top:20px;font-size:11.5px;line-height:1.75;color:var(--text-muted);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
@media (max-width:1100px){
  .gb-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gb-grid{grid-template-columns:1fr}
  .gb-title{font-size:13px}
}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .fx-sources{padding:12px 14px;gap:8px 12px}
  .fx-src-note{margin-left:0;flex:1 1 100%}
  .fx-radar{width:78%}
}
@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.hero::after,.fx-radar::before{animation:none}
}
