/* ==========================================================================
   沉浸光感材质 —— 网页版（HarmonyOS NEXT 风格）
   --------------------------------------------------------------------------
   每个 .glass 三层叠加，DOM 顺序必须是 edge → inner → glow → body：

     .edge   外圈描边：采样下层像素 → 模糊 → 提亮 → 形成"光感描边"
     .inner  内层主体：磨砂玻璃
     .glow   动态层：点光源高光（跟随指针）+ 描边热点

   描边宽度按**设备像素**给（--edge-px），圆弧才等宽；亮度是「乘法提亮 + 常数白光」
   两层，这样黄色亮区和深蓝暗区上的描边亮度差不多。
   详见 沉浸光感/README.md。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.glass {
  /* 圆角（单一来源：内层 = 圆角 - 描边宽，保证描边一圈等宽） */
  --radius: 28px;

  /* 描边：整数设备像素宽，2 是"够细且圆弧不断"的最小值 */
  --edge-px: 1;
  --edge-w: calc(var(--edge-px) * 1px / var(--dpr, 1));
  /* 环形遮罩多留 1 设备像素，多出来的一圈压在内层下面 → 交界处不留缝 */
  --edge-band: calc(var(--edge-w) + .5px / var(--dpr, 1));
  /* 描边采样必须**采模糊后的背景**：只给 1~2px 的模糊等于直接采样原图，saturate(2.2)
     一放大就是一道道硬色块。给足 18px 后，描边这一圈的颜色变化是平滑过渡的。 */
  --edge-blur: 18px;

  /* 乘法提亮 + 常数白光（白光靠 background 叠在 filter 输出上面实现） */
  --edge-bright: 1.586;   /* 再 +30%（原 1.22） */
  --edge-sat: 1.55;
  --edge-tint: rgba(255, 255, 255, .442);   /* 白光也 +30%（原 .34） */

  /* 内层：深色半透明，透光度就看这个 alpha */
  --inner-blur: 24px;
  --inner-bright: 1.06;
  --inner-sat: 1.4;
  --tint: rgba(18, 20, 28, .42);

  /* 光点 / 光斑（JS 写入） */
  --mx: 50%;
  --my: 50%;
  --glow-r: 220px;
  --hot-r: 136px;
  --light-a: 0;

  position: relative;
  border-radius: var(--radius);
  transition: transform .42s cubic-bezier(.2, 1.35, .38, 1);
}

.glass.is-pressed { transform: scale(.972); transition: transform .12s cubic-bezier(.3, 0, .2, 1); }

.glass > .edge,
.glass > .inner,
.glass > .glow { position: absolute; display: block; pointer-events: none; }

/* ---------- 内层毛玻璃 ---------- */
.glass > .inner {
  inset: var(--edge-w);
  border-radius: calc(var(--radius) - var(--edge-w));
  background: var(--tint);
  -webkit-backdrop-filter: blur(var(--inner-blur)) saturate(var(--inner-sat)) brightness(var(--inner-bright));
  backdrop-filter:         blur(var(--inner-blur)) saturate(var(--inner-sat)) brightness(var(--inner-bright));
}

/* ---------- 描边层 ----------
   必须画在 .inner 下面：这样它的 backdrop 只有连续背景，圆角处的描边才亮得均匀
   （画在上面时 backdrop = 背景 + 内层材质，卡片边界两侧不连续，圆弧中段会暗到消失）。 */
.glass > .edge {
  inset: 0;
  border-radius: var(--radius);
  padding: var(--edge-band);
  background: var(--edge-tint);
  -webkit-backdrop-filter: blur(var(--edge-blur)) saturate(var(--edge-sat)) brightness(var(--edge-bright));
  backdrop-filter:         blur(var(--edge-blur)) saturate(var(--edge-sat)) brightness(var(--edge-bright));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:         linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---------- 光点 ---------- */
.glass > .glow {
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle var(--glow-r) at var(--mx) var(--my),
      rgba(255, 255, 255, .26),
      rgba(255, 255, 255, .10) 34%,
      rgba(255, 255, 255, .03) 54%,
      transparent 72%);
}
.glass.is-lit > .glow { opacity: var(--light-a); }

/* 描边热点：同一束光落在边缘上。这层画在内层上面，所以遮罩用 edge-w 而不是 edge-band */
.glass > .glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: var(--edge-w);
  background: radial-gradient(circle var(--hot-r) at var(--mx) var(--my),
      #fff,
      rgba(255, 255, 255, .55) 42%,
      transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:         linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glass > .body { position: relative; height: 100%; }

/* 圆角档位 */
.glass.r-s { --radius: 18px; }
.glass.r-m { --radius: 22px; }
.glass.r-l { --radius: 28px; }
.glass.r-xl { --radius: 34px; }

/* 降级：不支持 backdrop-filter 时给不透明底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass > .inner { background: rgba(20, 23, 32, .86); }
  .glass > .edge  { background: rgba(255, 255, 255, .2); }
}