/* ============================================================
   液态玻璃工具包 · Liquid Glass Kit v1.0
   配套：liquid-glass.js
   ------------------------------------------------------------
   解决什么问题：
     大多数所谓「液态玻璃」只是「半透明卡片 + backdrop-filter:blur()」，
     看起来像一块磨砂塑料板。真正的玻璃感来自四个要素：
       ① 背景模糊 + 饱和度提升（折射）
       ② 斜向的透明渐变（玻璃厚度不均）
       ③ 指针位置的镜面高光（光在玻璃表面移动）
       ④ 边缘一圈折射亮线 + 内侧高光（玻璃的厚度截面）

   怎么用：
     1) <head> 里引入本文件，且必须排在你自己的主题变量之后
     2) 面板容器加 class="lg"，浮层（导航/弹层/抽屉）加 class="lg-float"
     3) 小控件（标签、徽标、输入框、按钮）加 class="lg-flat" —— 刻意不做模糊
     4) v5.8.13 起：面板档（.lg）也不做模糊 —— 见下方 --lg-blur 说明；模糊只保留给浮层（.lg-float）
     4) 数字/文字压不住时，给文字区包一层 class="lg-scrim"

   ⚠ 本文件内置了性能约束（模糊半径、层数、混合模式）。
     请勿为了「更玻璃」而自行加大 blur 半径或添加 mix-blend-mode，
     那会直接导致移动端滚动掉帧，原因见文件末尾「性能铁律」注释。
   ============================================================ */

/* ---------- 1. 令牌：深色（默认） ---------- */
:root{
  /* v5.8.13：面板档不模糊。面板背后只有那张 position:fixed 的平滑渐变背景，
     对它做 blur() 几乎不产生视觉差异（模糊平滑渐变≈原样），但每帧都要真金白银重算一遍，
     是滚动掉帧的主因。浮层档（顶栏/建议框/模态框）背后是真实滚动内容，模糊有意义，故保留。 */
  --lg-blur:0px;                  /* 面板档：不模糊（原 14px） */
  --lg-blur-float:18px;           /* 浮层模糊半径，上限建议 20px */
  --lg-sat:160%;
  --lg-bri:1.06;
  --lg-bg-a:.17;                  /* 玻璃渐变的高光端透明度 */
  --lg-bg-b:.055;                 /* 玻璃渐变的暗端透明度 */
  --lg-border:rgba(255,255,255,.22);
  --lg-rim-a:rgba(255,255,255,.85);   /* 边缘折射：亮端 */
  --lg-rim-b:rgba(255,255,255,.05);   /* 边缘折射：暗端 */
  --lg-spec:rgba(255,255,255,.30);    /* 镜面高光强度 */
  --lg-shadow:0 14px 46px -14px rgba(4,6,18,.70),0 3px 12px -4px rgba(4,6,18,.42);
  --lg-inset:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 1px rgba(255,255,255,.09);
  --lg-solid:rgba(18,22,42,.88);      /* 不支持 backdrop-filter 时的兜底底色 */
  --lg-flat-bg:rgba(255,255,255,.07);
  --lg-radius:20px;
}

/* ---------- 2. 令牌：浅色 ----------
   玻璃在亮背景上极易「消失」——这是改版最容易翻车的地方。
   浅色主题必须：底色更不透明、边框更亮、外阴影改成冷灰而非黑色、
   并且要有一条偏冷的暗端折射线，否则卡片会糊成一片白。 */
.light,.theme-light,body.light{
  --lg-bg-a:.34;
  --lg-bg-b:.14;
  --lg-border:rgba(255,255,255,.80);
  --lg-rim-a:rgba(255,255,255,.92);
  --lg-rim-b:rgba(110,132,175,.20);
  --lg-spec:rgba(255,255,255,.50);
  --lg-bri:1.02;
  --lg-sat:176%;
  --lg-shadow:0 14px 40px -14px rgba(30,45,80,.42),0 3px 10px -4px rgba(30,45,80,.22);
  --lg-inset:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(110,132,175,.14);
  --lg-solid:rgba(255,255,255,.86);
  --lg-flat-bg:rgba(255,255,255,.46);
}

/* ---------- 3. 玻璃本体 ----------
   镜面高光直接做成 background 的第一层，而不是 ::before 伪元素。
   好处：不产生额外合成图层、不需要 isolation/负 z-index，
   因此在既有项目里套用不会踩到层叠上下文的坑。 */
.lg,.lg-float{
  position:relative;
  border-radius:var(--lg-radius);
  border:1px solid var(--lg-border);
  background-color:transparent;
  background-image:
    radial-gradient(360px circle at var(--lg-mx,50%) var(--lg-my,-42%),
      var(--lg-spec),transparent 64%),
    linear-gradient(147deg,
      rgba(255,255,255,var(--lg-bg-a)) 0%,
      rgba(255,255,255,var(--lg-bg-b)) 36%,
      rgba(255,255,255,calc(var(--lg-bg-b) * .5)) 60%,
      rgba(255,255,255,var(--lg-bg-a)) 100%);
  box-shadow:var(--lg-shadow),var(--lg-inset);
}

/* ⚠️ v5.9.1 重要修正：面板档**彻底不做 backdrop-filter**。
   此前写的是 blur(var(--lg-blur))，而 --lg-blur 已经是 0px —— 但 **blur(0px) 不是空操作**：
   它依然会为每一块面板建立一个「后台采样层」。首页有 14 块面板 ⇒ 14 个 backdrop 根，
   移动端就会表现为「内容明明在 DOM 里、却没有被绘制出来」（用户真机截图实证：上滑后
   主卡片顶部整片空白，而同一时刻 DOM 里城市名与温度都还在）。
   设计本意自 v5.8.13 起就是「面板不模糊」，这次把「不模糊」真正落实为「不做后台滤镜」。
   代价（诚实记录）：面板失去对背景的 saturate/brightness 增益，观感会比之前**略微朴一些**；
   换来整页后台采样层从 14 个降到 0（模糊只留给浮层，全站仅 3 个）。 */

/* 浮层（顶部导航、弹层、抽屉）：固定或大面积移动，单独一档 */
.lg-float{
  -webkit-backdrop-filter:blur(var(--lg-blur-float)) saturate(var(--lg-sat)) brightness(var(--lg-bri));
  backdrop-filter:blur(var(--lg-blur-float)) saturate(var(--lg-sat)) brightness(var(--lg-bri));
}

/* 边缘折射亮线：只给浮层和少数大面板，避免每个卡片多一层遮罩合成 */
.lg-float::after,.lg-rim::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(142deg,var(--lg-rim-a),rgba(255,255,255,.08) 26%,
    rgba(255,255,255,.03) 55%,rgba(255,255,255,.06) 72%,var(--lg-rim-b) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.62;
}
/* 用 .lg-rim 时请确保容器自身可创建层叠上下文（position:relative 即可） */

/* ---------- 4. 小控件：刻意不做模糊 ----------
   小面积元素上加 backdrop-filter，视觉收益极低，
   但每个都是一次独立的后台模糊采样，几十个叠起来就是掉帧主因。 */
.lg-flat{
  background:var(--lg-flat-bg);
  border:1px solid var(--lg-border);
  border-radius:12px;
  transition:background .3s,border-color .3s;
}

/* ---------- 5. 数字/文字可读性护罩 ----------
   天气站是数字密集页面。玻璃会降低文字与背景的对比度，
   大号温度、预警正文这类关键信息必须额外压一层暗纱。 */
.lg-scrim{
  background:linear-gradient(180deg,rgba(4,7,18,.46),rgba(4,7,18,.20));
  border-radius:inherit;
}
.light .lg-scrim{
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.38));
}

/* ---------- 6. 可选：液态色团 ----------
   玻璃要「有东西可折射」才像玻璃。若你的页面背景是纯色或低对比，
   在背景之上、内容之下放一层缓慢漂移的色团，玻璃立刻有体积感。
   注意：只用 transform 动画（走合成器），不要动 background-position。 */
.lg-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.7}
.lg-blobs i{position:absolute;display:block;border-radius:50%}
.lg-blobs .b1{width:62vmax;height:62vmax;left:-20vmax;top:-16vmax;
  background:radial-gradient(circle,rgba(126,150,255,.40),rgba(126,150,255,.11) 46%,transparent 72%);
  animation:lgDrift1 46s ease-in-out infinite}
.lg-blobs .b2{width:54vmax;height:54vmax;right:-18vmax;top:20vmax;
  background:radial-gradient(circle,rgba(255,140,170,.32),rgba(255,140,170,.09) 48%,transparent 74%);
  animation:lgDrift2 58s ease-in-out infinite}
.lg-blobs .b3{width:58vmax;height:58vmax;left:4vmax;bottom:-22vmax;
  background:radial-gradient(circle,rgba(126,222,192,.26),rgba(126,222,192,.07) 48%,transparent 74%);
  animation:lgDrift3 52s ease-in-out infinite}
@keyframes lgDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vmax,6vmax,0) scale(1.12)}}
@keyframes lgDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-9vmax,-5vmax,0) scale(.95)}}
@keyframes lgDrift3{0%,100%{transform:translate3d(0,0,0) scale(.97)}50%{transform:translate3d(6vmax,-7vmax,0) scale(1.13)}}

/* 滚动期间暂停色团动画：把 GPU 时间让给滚动合成 */
html.lg-scrolling .lg-blobs i{animation-play-state:paused}

/* ---------- 7. 降级与无障碍 ---------- */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .lg,.lg-float{background-image:none;background:var(--lg-solid)}
  .lg-float::after,.lg-rim::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-blobs i{animation:none}
  .lg,.lg-float,.lg-flat{transition:none}
}
/* 触屏设备不要用 hover 变换，否则点击后会「粘」住悬停态 */
@media (hover:none){
  .lg-hover:hover{transform:none!important}
}

/* ---------- 8. 轻量模式：弱机兜底 ----------
   由 liquid-glass.js 通过 <html class="lg-lite"> 切换。
   关掉全部后台模糊与混合类效果，保留版式与配色。 */
html.lg-lite .lg,html.lg-lite .lg-float{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background-image:none;background:var(--lg-solid)}
html.lg-lite .lg-float::after,html.lg-lite .lg-rim::after{display:none}
html.lg-lite .lg-blobs{display:none}

/* ============================================================
   性能铁律（改版时请逐条遵守，这些是移动端掉帧的直接原因）
   ------------------------------------------------------------
   1. 模糊半径：面板 ≤16px，浮层 ≤20px。
      在 DPR=3 的手机上，14px 相当于 42 物理像素的模糊半径，
      已经是可观开销；写到 30px 就是 90 物理像素，必卡。
   2. 不要用 will-change 批量提升图层。
      给 N 个全屏元素加 will-change 会强制常驻 N 张全屏纹理。
   3. 不要用全屏 mix-blend-mode（overlay/screen 等）。
      它会让整个视口每帧多一次全屏混合，并打断图层化。
   4. 不要对图片做运行时 filter:blur()。
      需要模糊底衬，就预先烘一张小图（160px 宽足够）。
   5. 触摸滑动时不要响应 pointermove 去改样式。
      手指拖动会高频派发 pointermove，每次都触发重绘 —— 这是最隐蔽的掉帧源。
      正确做法：pointerType === 'touch' 的 pointermove 一律忽略，
      只保留 pointerdown（轻触点亮）。鼠标才做跟随，且用 rAF 节流。
   6. 滚动主循环里不要逐帧读取 offsetTop / scrollHeight。
      这类读取会强制同步布局。必须缓存，只在 resize / load 时重算。
   7. 全屏常驻动画越少越好。缓慢漂移的色团可以留，
      但不要在大图层上再叠永不停止的缩放/旋转。
   8. 能给少数元素的效果（边缘折射、镜面高光），不要给所有元素。
   ============================================================ */