/* ============================================================
   液态玻璃材质层
   加载顺序：tokens.css → style.css → ui-refined.css → glass.css
   本文件只做「覆盖」，不改动既有规则本身，删除本文件即完全回滚。
   ============================================================ */

/* 令牌全部定义在 tokens.css 的「玻璃材质 Glass」分组，本文件只做引用 */

/* ============================================================
   一、页头玻璃
   原来是 rgba(255,255,255,.92) + backdrop-filter:none
   现在改为半透明白 + 20px 模糊，滚动时能看到内容从下方透上来
   ============================================================ */
.site-header{
  background:var(--glass-light-fill);
  border-bottom:1px solid var(--glass-light-line);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .3s ease,box-shadow .3s ease;
}
.site-header.scrolled{
  background:var(--glass-light-fill-scrolled);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 30px -22px rgba(16,46,73,.45);
}

/* ============================================================
   二、深色玻璃区块
   用法：<section class="section section--deep section--glass">
   在浅色页面中间插一段深蓝，用来承载玻璃卡片
   ============================================================ */
.section.section--glass{
  position:relative;
  background:
    radial-gradient(760px 420px at 10% -12%,rgba(56,180,222,.34),transparent 62%),
    radial-gradient(640px 420px at 94% 112%,rgba(232,115,40,.18),transparent 58%),
    var(--grad-deep);
  color:rgba(255,255,255,.86);
  overflow:hidden;
}
/* 卡片背后必须有「东西」可模糊，否则玻璃只是一块半透明色。
   这层光斑就是被玻璃吃掉的内容。 */
.section.section--glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 360px at 16% 62%,rgba(72,196,236,.50),transparent 68%),
    radial-gradient(420px 300px at 50% 74%,rgba(232,115,40,.30),transparent 70%),
    radial-gradient(520px 360px at 84% 58%,rgba(140,225,255,.38),transparent 68%),
    radial-gradient(300px 220px at 62% 26%,rgba(255,255,255,.12),transparent 70%);
}
.section.section--glass > .container{position:relative;z-index:1}
/* 一道斜向光带，玻璃压在它上面时会出现明暗过渡，这是「玻璃感」最强的一层 */
.section.section--glass::after{
  content:"";position:absolute;left:-8%;right:-8%;top:44%;height:150px;
  background:linear-gradient(96deg,
    transparent 0%,
    rgba(150,230,255,.20) 28%,
    rgba(255,255,255,.16) 46%,
    rgba(150,230,255,.14) 64%,
    transparent 100%);
  transform:rotate(-7deg);
  filter:blur(26px);
  pointer-events:none;
}

/* 标题与说明文字 */
.section.section--glass h2,
.section.section--glass h3{color:var(--glass-fg)}
.section.section--glass h2 em{color:var(--brand-soft)}
.section.section--glass .sec-head p{color:rgba(255,255,255,.72)}
.section.section--glass .sec-head .eyebrow{color:var(--brand-soft)}
.section.section--glass .sec-head .eyebrow::before{background:linear-gradient(90deg,transparent,var(--brand-soft))}
.section.section--glass .sec-head .eyebrow::after{background:linear-gradient(90deg,var(--accent),transparent)}

/* ---------- 玻璃卡片 ---------- */
.section.section--glass .adv-card{
  background:var(--glass-fill);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-spec),var(--glass-spec-dim),var(--glass-depth);
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease,border-color .35s ease;
}
.section.section--glass .adv-card:hover{
  transform:translateY(-5px);
  background:var(--glass-fill-hover);
  border-color:var(--glass-line-hover);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,.72),
    inset -1px -1px 0 rgba(255,255,255,.24),
    0 34px 64px -30px rgba(6,28,48,.85);
}
.section.section--glass .adv-card h3{color:var(--glass-fg)}
.section.section--glass .adv-card p{color:rgba(255,255,255,.78)}
.section.section--glass .adv-card .a-no{color:rgba(255,255,255,.13)}
.section.section--glass .adv-card .a-icon{
  background:rgba(255,255,255,.15);
  color:var(--glass-fg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* ---------- 玻璃数据块 ---------- */
.section.section--glass .counters{gap:20px}
.section.section--glass .counter{
  padding:28px 18px 24px;
  background:var(--glass-fill);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:var(--glass-spec),var(--glass-spec-dim),var(--glass-depth);
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease,border-color .35s ease;
}
.section.section--glass .counter:hover{
  transform:translateY(-4px);
  background:var(--glass-fill-hover);
  border-color:var(--glass-line-hover);
}
.section.section--glass .counter b,
.section.section--glass .counter b i,
.section.section--glass .counter b [data-count]{color:var(--glass-fg)}
.section.section--glass .counter b i{color:var(--brand-soft)}
.section.section--glass .counter > span{color:rgba(255,255,255,.74)}
.section.section--glass .counter::before{
  background:linear-gradient(90deg,var(--brand-soft),var(--accent));
}

/* ============================================================
   三、降级：不支持 backdrop-filter 时退化为实色，绝不白屏
   ============================================================ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(255,255,255,.97)}
  .site-header.scrolled{background:var(--canvas)}
  .section.section--glass .adv-card,
  .section.section--glass .counter{background:var(--glass-solid)}
}

/* 系统开启「降低透明度」时关闭玻璃 */
@media (prefers-reduced-transparency:reduce){
  .site-header{background:rgba(255,255,255,.97)}
  .section.section--glass .adv-card,
  .section.section--glass .counter{
    background:var(--glass-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* 移动端降档：模糊半径减半，省 GPU */
@media (max-width:760px){
  .site-header{
    backdrop-filter:blur(10px) saturate(1.4);
    -webkit-backdrop-filter:blur(10px) saturate(1.4);
  }
  .section.section--glass .adv-card,
  .section.section--glass .counter{
    backdrop-filter:blur(10px) saturate(1.4);
    -webkit-backdrop-filter:blur(10px) saturate(1.4);
  }
}