/* ==========================================================================
   MB01 · Liquid Glass（液态玻璃）渐进增强层
   --------------------------------------------------------------------------
   设计参照 iOS 液态玻璃材质：折射、镜面高光、边缘增厚、饱和度提升、液态形变。
   用法：本文件不改任何模板，挂到 public/include.html 后即可让
        .mb-nav / .mb-glass / .mb-card / .mb-btn / 弹窗 等自动获得玻璃质感。

   性能约定（重要）：
     · 完整版 .lg-glass  —— 含 backdrop-filter + 边缘折射，只用在少量面板
     · 轻量版 .lg-lite   —— 无 backdrop-filter，只有高光与描边，用于影片卡这种大量元素
     · 深折射 .lg-deep   —— 额外挂 SVG 位移滤镜，仅用于 Hero / 弹窗等极少数元素
   ========================================================================== */

:root{
  /* 玻璃材质参数（改这里即可整体调校） */
  --lg-blur:      18px;                    /* 基础模糊半径 */
  --lg-sat:       180%;                    /* 背后色彩饱和度提升 */
  --lg-bright:    1.08;                    /* 亮度提升，模拟玻璃透光 */
  --lg-tint:      rgba(255,255,255,.055);  /* 玻璃本体色 */
  --lg-tint-2:    rgba(255,255,255,.018);  /* 渐变另一端 */
  --lg-rim:       rgba(255,255,255,.42);   /* 边缘镜面高光强度 */
  --lg-rim-soft:  rgba(255,255,255,.10);   /* 边缘次级反射 */
  --lg-spec:      rgba(255,255,255,.16);   /* 跟随指针的高光 */
  --lg-shadow:    0 10px 34px rgba(2,6,23,.5);
  --lg-radius:    var(--radius);

  /* 液态形变用的有机圆角（hover 时过渡，制造"液体"流动感） */
  --lg-blob:      62% 38% 46% 54% / 52% 44% 56% 48%;
  --lg-blob-2:    44% 56% 62% 38% / 56% 52% 48% 44%;
}

/* ==========================================================================
   一、核心玻璃体
   ========================================================================== */

/* 共用：折射模糊 + 体积阴影 + 边缘高光（不碰背景色，避免破坏深色底） */
.lg-glass,
.mb-nav,
.mb-glass,
.mb-drawer,
.mac_pop{
  position:relative;
  border-radius:var(--lg-radius);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 var(--lg-rim),          /* 顶面镜面高光 */
    inset 0 -1px 0 var(--lg-rim-soft),    /* 底面反射 */
    inset 1px 0 0 rgba(255,255,255,.06),  /* 左缘 */
    inset -1px 0 0 rgba(255,255,255,.06); /* 右缘 */
  isolation:isolate;
}

/* 只有「浅玻璃面板」才叠白色渐变。
   导航条 / 抽屉 / 弹窗各自带着深色底（保证文字可读），这里绝不能覆盖，
   否则深色底被换掉后文字会糊在背景上。 */
.lg-glass,
.mb-glass{
  background-image:linear-gradient(
    150deg,
    var(--lg-tint) 0%,
    var(--lg-tint-2) 46%,
    rgba(255,255,255,.03) 100%
  );
  border:1px solid rgba(255,255,255,.10);
}

/* 边缘折射层：Apple 液态玻璃在边缘处弯折更多光，这里用一层「只在边缘可见」
   的强模糊 + 高饱和来模拟。mask 让中间透明、边缘不透明。 */
.lg-glass::after,
.mb-glass::after,
.mac_pop::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  -webkit-backdrop-filter:blur(6px) saturate(240%) brightness(1.15);
  backdrop-filter:blur(6px) saturate(240%) brightness(1.15);
  -webkit-mask:radial-gradient(115% 115% at 50% 50%, transparent 58%, #000 100%);
  mask:radial-gradient(115% 115% at 50% 50%, transparent 58%, #000 100%);
  opacity:.9;
}

/* 边缘光描边：沿四周渐变的 1px 亮线（左上最亮，右下最弱，模拟固定光源） */
.lg-glass::before,
.mb-glass::before,
.mac_pop::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(
    145deg,
    var(--lg-rim) 0%,
    rgba(255,255,255,.06) 26%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.05) 74%,
    rgba(255,255,255,.22) 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;
}

/* ==========================================================================
   二、镜面高光跟随指针
   JS 会把 --lg-x / --lg-y 写进元素（百分比），高光随之移动
   ========================================================================== */
/* 高光层由 JS 注入（<i class="lg-spec__light">），无需改模板。
   面板：z-index:-1 → 浮在玻璃背景之上、文字之下（.mb-glass 有 isolation 保证）
   卡片：z-index:1  → 盖在海报之上、标题之下（.mb-card__body 已是 z-index:2） */
.lg-spec__light{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(
    var(--lg-spec-size,240px) circle at var(--lg-x,50%) var(--lg-y,0%),
    var(--lg-spec), rgba(255,255,255,.05) 42%, transparent 70%
  );
  mix-blend-mode:screen;
}
.mb-glass > .lg-spec__light,
.lg-glass > .lg-spec__light,
.mb-nav > .lg-spec__light{ z-index:-1; }
.mb-card > .lg-spec__light,
.lg-lite > .lg-spec__light{ z-index:1; }

.lg-spec:hover > .lg-spec__light,
.lg-spec.is-lit > .lg-spec__light,
.mb-card:hover > .lg-spec__light,
.mb-glass:hover > .lg-spec__light{ opacity:1; }

/* 轻量替代：不加 DOM，直接用伪元素（用于没法插子元素的场景） */
.lg-spec-pseudo::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(
    var(--lg-spec-size,220px) circle at var(--lg-x,50%) var(--lg-y,0%),
    var(--lg-spec), transparent 68%
  );
}
.lg-spec-pseudo:hover::after{ opacity:1; }

/* ==========================================================================
   三、轻量版：影片卡等大量元素
   刻意不用 backdrop-filter——几十个卡各来一层实时模糊会明显掉帧。
   用「渐变底色 + 顶面高光 + 对角流光」在视觉上同样通透。
   ========================================================================== */
.lg-lite,
.mb-card{
  position:relative;
  isolation:isolate;
}
.lg-lite::before,
.mb-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    150deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.05) 30%,
    rgba(255,255,255,0) 55%,
    rgba(34,211,238,.16) 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;
  transition:opacity .3s ease;
  opacity:.75;
}
.lg-lite:hover::before,
.mb-card:hover::before{ opacity:1; }

/* 卡片的流光扫过（悬停时一条高光斜着划过，强化"玻璃反光"） */
.lg-lite::after,
.mb-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    115deg,
    transparent 34%,
    rgba(255,255,255,.16) 47%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.16) 53%,
    transparent 66%
  );
  transform:translateX(-120%);
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}
.lg-lite:hover::after,
.mb-card:hover::after{ transform:translateX(120%); }

/* ==========================================================================
   四、深折射：SVG 位移滤镜（仅少量元素）
   真正让背后的星空/海报产生"透过玻璃被扭曲"的感觉
   ========================================================================== */
.lg-deep{
  -webkit-backdrop-filter:url(#lgRefract) blur(16px) saturate(170%);
  backdrop-filter:url(#lgRefract) blur(16px) saturate(170%);
}

/* 玻璃表面的磨砂微粒（静态噪声，作为图片渲染一次，开销极低） */
.lg-frost::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   五、液态形变
   ========================================================================== */

/* 有机圆角过渡：hover 时圆角在几组 blob 值间流动，像液面在动 */
.lg-blob{
  transition:border-radius .7s cubic-bezier(.34,1.2,.5,1), transform .5s cubic-bezier(.34,1.2,.5,1);
}
.lg-blob:hover{
  border-radius:var(--lg-blob);
  transform:translateY(-3px) scale(1.012);
}
.lg-blob:active{
  border-radius:var(--lg-blob-2);
  transform:translateY(-1px) scale(.995);
}

/* 液态融合：同级元素靠得很近时边缘互相"吸引"（需 JS 打 .is-near） */
.lg-merge{ transition:transform .45s cubic-bezier(.22,1,.36,1), border-radius .45s ease; }
.lg-merge.is-near{
  transform:translate3d(var(--lg-px,0), var(--lg-py,0), 0) scale(1.02);
  border-radius:var(--lg-blob);
}

/* 受压时整体轻微收缩，模拟液体被挤压 */
.lg-press{ transition:transform .18s cubic-bezier(.34,1.2,.5,1); }
.lg-press:active{ transform:scale(.975); }

/* 3D 倾斜：反射随视角偏移（由 JS 写 transform，短过渡做平滑） */
.lg-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .18s ease-out;
}
@media (prefers-reduced-motion: reduce){ .lg-tilt{ transition:none; } }

/* ==========================================================================
   六、按钮 / 输入框 的玻璃化
   ========================================================================== */
.lg-btn,
.mb-btn--ghost{
  position:relative;
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 4px 14px rgba(2,6,23,.35);
}
.lg-btn::before,
.mb-btn--ghost::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 45%, rgba(255,255,255,.16));
  -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;
}
.lg-btn:hover,
.mb-btn--ghost:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(59,130,246,.3);
}

/* 输入框：玻璃凹槽感（内凹阴影 + 顶部暗边） */
.lg-field,
.mb-input{
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  backdrop-filter:blur(8px) saturate(130%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,255,255,.07);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.lg-field:focus,
.mb-input:focus{
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.22),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 0 0 3px rgba(34,211,238,.16),
    0 0 22px rgba(59,130,246,.22);
}

/* ==========================================================================
   七、导航条的滚动状态
   静止时更透（像浮在内容上），滚动时变实（提高可读性）
   ========================================================================== */
.mb-nav{
  -webkit-backdrop-filter:blur(10px) saturate(150%) brightness(1.02);
  backdrop-filter:blur(10px) saturate(150%) brightness(1.02);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.mb-nav.is-scrolled{
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.1);
  backdrop-filter:blur(26px) saturate(190%) brightness(1.1);
  box-shadow:
    0 10px 34px rgba(2,6,23,.55),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* ==========================================================================
   八、降级与可访问性
   ========================================================================== */

/* 浏览器不支持 backdrop-filter：退化为不透明玻璃，保证文字可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg-glass,
  .mb-nav,
  .mb-glass,
  .mb-drawer,
  .mac_pop{
    background-image:linear-gradient(150deg, rgba(17,26,58,.94), rgba(10,14,39,.96)) !important;
  }
  .lg-glass::after,
  .mb-glass::after,
  .mac_pop::after{ display:none; }
}

/* 用户要求减少透明度 / 省电模式：关闭所有实时模糊 */
@media (prefers-reduced-transparency: reduce){
  .lg-glass,.mb-nav,.mb-glass,.mb-drawer,.mac_pop,.lg-btn,.mb-btn--ghost,.lg-field,.mb-input{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background-image:linear-gradient(150deg, rgba(17,26,58,.95), rgba(10,14,39,.97)) !important;
  }
}

/* 减少动效：关掉流光与形变，保留静态玻璃外观 */
@media (prefers-reduced-motion: reduce){
  .lg-lite::after,.mb-card::after{ display:none; }
  .lg-blob,.lg-merge,.lg-press{ transition:none !important; }
  .lg-blob:hover{ transform:none; }
  .lg-spec > .lg-spec__light{ transition:none; }
}

/* 移动端：降低模糊半径（GPU 压力大），并直接关掉第二层边缘折射 */
@media (max-width:768px){
  :root{ --lg-blur:12px; --lg-sat:150%; --lg-shadow:0 6px 20px rgba(2,6,23,.45); }
  /* 每个玻璃元素上同时跑两层 backdrop-filter 会让小屏掉帧，移动端只保留主层 */
  .lg-glass::after,.mb-glass::after,.mac_pop::after{ display:none; }
}

/* 打印：完全去玻璃 */
@media print{
  .lg-glass,.mb-nav,.mb-glass,.mb-card{
    background:#fff !important; color:#000 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    box-shadow:none !important;
  }
  .lg-lite::after,.mb-card::after,.lg-glass::before,.mb-glass::before{ display:none !important; }
}