/* ============================================================
   液态玻璃动效层 · liquid-glass.css
   ------------------------------------------------------------
   加载顺序：必须在 css/style.css、css/glass-theme.css、
   css/home-liquid.css 之后（index.html 里排在最后）。

   这一层只做两件现有文件没做的事：
     1. 光学层 —— 边缘流光环（conic-gradient + @property 角度）
     2. 动效层 —— 生长 / 收缩 / 按压 所需的挂载类与过渡

   它**不改**已有材质配方。style.css:3781 那套（blur 26 + 三段对角
   渐变 + 四边 inset 高光）已经被 12 个选择器依赖，glass-theme.css:354
   的导航轨道是另一套分级配方。这里再声明 background 只会把它们降级。

   三条硬护栏（与 glass-theme.css 文件头同源，改这里前先读）：
     1. letter-spacing 绝不作用于阿语 —— 这里一条都不写。
     2. 阿语行高 ≥1.6 —— 这里不动 line-height。
     3. 一律逻辑属性 —— 但 ::after 的 inset:0 是四边等距，与方向无关，
        因此安全；流光角度在 RTL 岛内单独镜像。
   ============================================================ */

/* ────────────────────────────────────────────────
   0. 可动画的自定义属性
   ------------------------------------------------------------
   @property 让 --lg-angle 变成 <angle> 类型，CSS 才能对它做 transition。
   不支持 @property 的引擎（老 Android WebView）只是拿不到角度过渡，
   静态环仍然存在 —— 属于可接受的降级，不是崩坏。
   ──────────────────────────────────────────────── */
@property --lg-angle {
    syntax: '<angle>';
    /* 必须 inherits:true —— 环画在 ::after 上，而 ::after 的继承父就是宿主元素。
       写成 false 的话伪元素只拿 initial-value，宿主上设的角度根本传不下去。 */
    inherits: true;
    initial-value: 118deg;
}

@property --lg-glint {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.55;
}

:root {
    /* 边缘流光：亮环色与强度。深色玻璃上必须收一档，否则像描了一圈白漆 */
    --lg-ring: rgba(255, 255, 255, 0.88);
    --lg-ring-dim: rgba(255, 255, 255, 0.30);

    /* 三档高度：静置 / 悬浮 / 贴地。只给还没定义阴影的表面用，
       已有配方的元素走自己的 box-shadow，不在这里覆盖 */
    --lg-shadow-rest: 0 10px 30px rgba(31, 58, 47, 0.12);
    --lg-shadow-lift: 0 20px 48px rgba(31, 58, 47, 0.18);

    /* 动效时长：用于非弹簧的纯 CSS 过渡（环、阴影、按压）。
       位置/尺寸一律由 js/liquid-glass.js 用弹簧积分，不走这里 */
    --lg-ring-dur: 620ms;
    --lg-press-dur: 140ms;
}

/* ────────────────────────────────────────────────
   1. 边缘流光环
   ------------------------------------------------------------
   做法：不在元素上画 border（会改尺寸），而是叠一层 inset:0 的伪元素，
   用 conic-gradient 绕一圈，再用 mask 挖掉内容区，只留 1px 环。

   为什么值得：iOS 26 的玻璃「有厚度」主要靠边缘那一道随角度移动的
   镜面高光。静态 inset 高光（现有配方）只能表达"受光"，表达不了
   "光在动"。

   ⚠ 只挂 .lg-ring 类的元素才有这一层。不按标签批量套，避免和
   265KB 的 style.css 里既有伪元素打架（已核对：目标元素均未占用 ::after）。
   ──────────────────────────────────────────────── */
.lg-ring {
    /* 刻意**不**写 position:relative：宿主自己已有定位（.phrase-popover 是 fixed，
       .nav-thumb 是 absolute），这里改 position 会把滑块从绝对定位打回文档流。
       给未定位的元素挂本类前，自己先给它 position:relative。 */
}

.lg-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--lg-angle),
        var(--lg-ring) 0deg,
        rgba(255, 255, 255, 0.10) 70deg,
        rgba(255, 255, 255, 0) 140deg,
        rgba(255, 255, 255, 0) 250deg,
        var(--lg-ring-dim) 320deg,
        var(--lg-ring) 360deg);
    -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;
    pointer-events: none;
    opacity: calc(var(--lg-glint) + 0.35);
    transition: opacity var(--lg-ring-dur) ease, --lg-angle var(--lg-ring-dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 悬停：高光沿边缘走四分之一圈并变亮。这是"玻璃在你手下响应"的信号，
   也是唯一允许常驻的循环感来源（一次性，不循环播放） */
.lg-ring:hover::after,
.lg-ring:focus-within::after,
.lg-ring.lg-lit::after {
    --lg-angle: 262deg;
    opacity: 0.95;
}

/* ⚠ 这里刻意**不写** [dir="rtl"] 的 --lg-angle 覆盖。
   伪元素自己的声明优先级高于从宿主继承来的值，一旦在这里写死角度，
   js/nav-glass.js 按滑块位置算出的角度就再也进不来 —— 现象是环永远朝同一个方向，
   "光跟着玻璃走"整条效果失效。RTL 的镜像在 JS 侧按计算后的 direction 做。 */

/* ────────────────────────────────────────────────
   2. 材质档位（只补现有配方没覆盖的表面）
   ------------------------------------------------------------
   四档面积分级，与 glass-theme.css:349「越大的表面越厚」同一条原则：
     .lg-surface —— 小卡片 / 浮层（模糊 20，白 0.55）
     .lg-paper   —— 阅读页纸白面（高 tint，保正文可读）
     .lg-sheet   —— 抽屉（底部大圆角，顶部高光更亮）
     .lg-chrome  —— 导航轨道（深绿，已有配方，这里只做标记类）
   ──────────────────────────────────────────────── */
.lg-surface {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(255, 255, 255, 0.34) 48%,
        rgba(255, 255, 255, 0.50) 100%);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 12px 34px rgba(31, 58, 47, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* 阅读页纸白面：底色刻意保持高 tint（≥0.94），只加边缘光学与抬升阴影。
   低 alpha 会让密集阿语正文透上来，直接毁掉可读性 —— 视频里那张卡片
   本身就是近实底，别把"像玻璃"理解成"能看穿" */
.lg-paper {
    --lg-ring: rgba(255, 255, 255, 0.95);
    --lg-ring-dim: rgba(214, 200, 165, 0.55);
    box-shadow:
        0 12px 34px rgba(90, 74, 40, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 手机抽屉：底部圆角更大，顶部一条亮边表示"从屏幕下沿长出来" */
.lg-sheet {
    border-start-start-radius: 22px;
    border-start-end-radius: 22px;
}

/* ────────────────────────────────────────────────
   3. 动效挂载类
   ------------------------------------------------------------
   .lg-anim 只在动画期间挂 will-change，结束后由 JS 摘掉。
   常驻 will-change 会在 WebView 上白占合成层内存，元素一多直接掉帧。
   ──────────────────────────────────────────────── */
.lg-anim {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

/* 抬升态：JS 在 show 完成后加上，用来表达"落定" */
.lg-shown {
    box-shadow: var(--lg-shadow-rest);
}

/* 按压光学响应：位移交给 JS（弹簧），这里只负责高光变亮与轻微内缩。
   只给交互控件用，不要给整块浮层用 —— 浮层有自己的生长动画 */
.lg-press {
    transition: transform var(--lg-press-dur) cubic-bezier(0.34, 1.4, 0.64, 1);
}

.lg-press:active {
    transform: scale(0.97);
    --lg-glint: 1;
}

/* ────────────────────────────────────────────────
   3.5 导航滑块：边缘流光跟着滑块走
   ------------------------------------------------------------
   角度由 js/nav-glass.js 按滑块中心位置写进宿主的 --lg-angle，
   环本身的过渡在 ::after 上（见 §1）。这里只做两件事：
     · 把环的过渡压到 320ms，与滑块位移同速 —— 否则光会滞后于玻璃
     · 深绿玻璃上白色环必须收一档，0.88 会像描了一圈白漆
   ──────────────────────────────────────────────── */
.nav-thumb {
    --lg-ring-dur: 320ms;
    --lg-ring: rgba(255, 255, 255, 0.52);
    --lg-ring-dim: rgba(255, 255, 255, 0.10);
}

/* ────────────────────────────────────────────────
   3.6 底部抽屉（竖屏）
   ------------------------------------------------------------
   面板材质仍是纸面（style.css:9642 明确要求不覆盖背景：抽屉要跟随纸面主题），
   所以这里只补"从屏幕下沿升起来"这件事留下的痕迹：更大的顶部圆角 +
   顶部一条亮边。位移由 js/app.js 的 openTempSheet/closeTempSheet 播放。
   ──────────────────────────────────────────────── */
@media (orientation: portrait) {
    .reading-view.temp-sheet-on .temp-vocab-panel {
        border-start-start-radius: 22px;
        border-start-end-radius: 22px;
        box-shadow:
            0 -18px 48px rgba(18, 20, 18, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    body.dark .reading-view.temp-sheet-on .temp-vocab-panel {
        box-shadow:
            0 -18px 48px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* ────────────────────────────────────────────────
   3.7 全站玻璃浮层的边缘流光
   ------------------------------------------------------------
   这五个面由 js/liquid-glass.js 的 autoEnhance() 在启动时补上 .lg-ring 类
   （不写进 HTML：.novel-card 是运行时模板生成的，写死会漏）。
   .study-box 原本没有定位，::after 的 inset:0 会锚到定位祖先 .study-overlay 上，
   画成一整屏的白边 —— 所以这里必须补 position:relative。
   ——流光强度按面积分档：卡片越大，白环越淡。 */
.study-box {
    position: relative;
}

.word-popover,
.question-float,
.study-box {
    --lg-ring: rgba(255, 255, 255, 0.70);
    --lg-ring-dim: rgba(255, 255, 255, 0.18);
}

.export-menu {
    --lg-ring: rgba(255, 255, 255, 0.60);
    --lg-ring-dim: rgba(255, 255, 255, 0.12);
}

/* ────────────────────────────────────────────────
   4. 阅读页划选弹层：只加光学层，不动 tint
   ------------------------------------------------------------
   style.css:3896 把这里改成 rgba(255,253,246,.96) + backdrop-filter:none，
   注释写明"杜绝正文透出"。那个决定是对的（视频里卡片本身也是近实底），
   所以本层不碰 background / backdrop-filter，只补边缘流光与阴影。
   选择器写成 .reading-view .phrase-popover 是为了与 3896 同权重、后加载覆盖。
   ──────────────────────────────────────────────── */
.reading-view .phrase-popover {
    box-shadow:
        0 12px 34px rgba(90, 74, 40, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 宽度改为内容自适应（对齐视频：短选区时卡片窄、长选区时到 360 上限）。
   style.css:1924 写死 360px，视频里明显不是恒宽 —— 这是"形变"能被看见的前提：
   宽度恒定时，js/liquid-glass.js 的 morph() 永远量不到差值。
   上限仍保 360px，pp-body 里出现解析结果时不会撑破版面。 */
.phrase-popover {
    width: auto;
    min-width: 268px;
    max-width: min(360px, calc(100vw - 24px));
}

/* 弹层内的三个 tab 也是"玻璃上的按钮"，
   按下时要有自己的光学响应，否则整块玻璃只有最外层在动 */
.pp-tab {
    position: relative;
    transition:
        transform var(--lg-press-dur) cubic-bezier(0.34, 1.4, 0.64, 1),
        background-color 180ms linear,
        border-color 180ms linear,
        box-shadow 180ms linear;
}

.pp-tab:active {
    transform: scale(0.965);
}

/* ────────────────────────────────────────────────
   5. 暗色模式
   ------------------------------------------------------------
   与 style.css:5260 / 5393 的覆盖结构对齐：暗色下玻璃是深灰，
   边缘高光必须降到 0.12 白，否则像描了白漆。
   ──────────────────────────────────────────────── */
body.dark {
    --lg-ring: rgba(255, 255, 255, 0.30);
    --lg-ring-dim: rgba(255, 255, 255, 0.06);
    --lg-shadow-rest: 0 10px 30px rgba(0, 0, 0, 0.42);
    --lg-shadow-lift: 0 20px 48px rgba(0, 0, 0, 0.52);
}

body.dark .lg-surface {
    background: linear-gradient(135deg,
        rgba(48, 56, 50, 0.62) 0%,
        rgba(32, 38, 34, 0.38) 48%,
        rgba(40, 47, 42, 0.52) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.dark .lg-paper {
    --lg-ring-dim: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ────────────────────────────────────────────────
   6. 降级：三条独立信号（与 glass-theme.css:534 同一策略）
   ──────────────────────────────────────────────── */

/* 6.1 引擎不支持 backdrop-filter：半透明会直接透出下层文字，
   玻璃必须转实色，边缘环保留（它是纯叠色，不依赖模糊） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-surface {
        background: #fffdf9;
        border-color: var(--border);
    }

    body.dark .lg-surface {
        background: #232a24;
        border-color: rgba(255, 255, 255, 0.10);
    }
}

/* 6.2 用户要求减少半透明：玻璃转霜白实色，可读性优先 */
@media (prefers-reduced-transparency: reduce) {
    .lg-surface {
        background: #fffdf9;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.dark .lg-surface {
        background: #232a24;
    }
}

/* 6.3 用户要求减少动效：只停"表演"，终态照常切换。
   角度过渡、按压缩放、流光全部停掉；位置与显隐仍由 JS 立即置终态
   （JS 侧读同一个 media query，走 no-anim 分支）。 */
@media (prefers-reduced-motion: reduce) {
    .lg-ring::after {
        transition: none;
    }

    .lg-press,
    .lg-press:active,
    .pp-tab,
    .pp-tab:active {
        transition: none;
        transform: none;
    }

    .lg-anim {
        will-change: auto;
    }
}

/* 6.4 高对比：靠描边不靠模糊 */
@media (prefers-contrast: more) {
    .lg-surface {
        background: #fff;
        border: 2px solid var(--text-primary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .lg-ring::after {
        display: none;
    }
}