/* ==========================================================================
   页面加载动画样式，对应 /static/page-loader.js，两种形态共用一层全屏遮罩。
   JS 在解析阶段注入 .pl-overlay 节点，无需改动 body 结构。

   bar 形态（主页）：左侧一条向下填充的进度条 + 贴着头部下移的百分比数字。
     结束时百分比原地隐藏，隐藏完再让进度条向右铺满整屏，随后淡出、卡片动画接上。
   spinner 形态（其余页面）：屏幕正中的一个简约转圈，无百分比。

   遮罩不再是「一块不透明实色」，而是：
     主题背景图（与 body 的 bg_url 同源）+ 一层色罩 + 中心环境辉光。
   色罩整体压得较深，保证加载时的专注度；中心辉光负责让画面不死板。

   配色完全跟随主题变量：
     --accent-primary / --accent  -> 进度条、百分比、转圈颜色
     --pl-glow                    -> 辉光颜色（默认取主题色，可单独覆盖）

   可覆盖变量：
     --pl-tint        色罩颜色/不透明度（越大遮罩越深）
     --pl-bg-image    遮罩背景图
     --pl-glow        辉光颜色
     --pl-bar         进度条宽度（默认 10px）
     --pl-fade        淡出时长（由 JS 同步为 --pl-fade）
     --pl-pct-hide    百分比原地隐藏时长（由 JS 同步，0 = 瞬间消失）
     --pl-expand      百分比隐藏后铺满整屏的时长（由 JS 同步）
     --pl-spin-size   转圈直径（默认 42px）
     --pl-spin-speed  转圈一圈的时长（默认 760ms）
   ========================================================================== */

/* ---- 主题化默认值 ----
   背景图与 config.py 的 name_to_bk 保持同源：
     黑白棕 -> [bg.png, ""]            （默认 :root）
     淡青   -> [bg_light.png, theme-light] */
:root {
    --pl-bg-image: url('/static/bg.png');
    /* 统一色罩：加载遮罩不做中心透亮，整块压深，保证加载时的专注度。
       0.34 -> 0.52，比原来明显更深，但仍能透出一点背景插画。 */
    --pl-tint: rgba(18, 14, 16, 0.52);
    --pl-glow: #e8b8c0;
}

.theme-light {
    --pl-bg-image: url('/static/bg_light.png');
    /* 同样走统一色罩，只为压住背景、突出加载指示 */
    --pl-tint: rgba(28, 44, 40, 0.46);
    --pl-glow: #7fb7a4;
}

.pl-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    background-color: var(--pl-bg, #14121a);
    /* 两层：一层较深的统一色罩，再主题背景图；图片加载失败时也还有底色兜底 */
    background-image:
        linear-gradient(var(--pl-tint, rgba(18, 14, 16, 0.52)), var(--pl-tint, rgba(18, 14, 16, 0.52))),
        var(--pl-bg-image, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    opacity: 1;
    transition: opacity var(--pl-fade, 420ms) ease;
    -webkit-tap-highlight-color: transparent;
}

/* 环境辉光：屏幕正中一团柔和的主题色光晕。
   screen 混合只提亮不压暗，叠在偏暗的插画上就是"发光"；轻微呼吸让它是活的。 */
.pl-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
        rgba(232, 184, 192, 0.30) 0%,
        rgba(232, 184, 192, 0) 58%);
    mix-blend-mode: screen;
    animation: pl-breathe 3.6s ease-in-out infinite;
}

@keyframes pl-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* 现代浏览器让辉光跟随主题色 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .pl-overlay::before {
        background: radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--pl-glow, var(--accent-primary, #8C5F4E)) 44%, transparent) 0%,
            transparent 58%);
    }
}

/* 淡出中：不再拦截点击，避免拖慢首屏交互 */
.pl-overlay.pl-hide {
    opacity: 0;
    pointer-events: none;
}

/* 淡出结束：彻底从渲染树移除 */
.pl-overlay.pl-gone {
    display: none;
}

/* ---- bar 形态：左侧轨道，进度自上而下生长 ---- */
.pl-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--pl-bar, 10px);
    background: var(--pl-track, rgba(128, 128, 128, 0.18));
    /* 加载到 100% 后 JS 给遮罩加 .pl-overlay--expand，
       宽度从一条细条平滑地向右铺满整屏 */
    transition: width var(--pl-expand, 520ms) cubic-bezier(0.22, 0.8, 0.24, 1);
}

.pl-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4)));
    /* 基础发光：不支持 color-mix 的浏览器也能看到一圈光 */
    box-shadow: 0 0 16px var(--pl-glow, var(--accent-primary, #7fb7a4));
}

/* 进度条多层发光，越往外越淡，像一根发亮的光带 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .pl-fill {
        box-shadow:
            0 0 8px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 90%, transparent),
            0 0 24px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 60%, transparent),
            0 0 56px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 38%, transparent);
    }
}

/* 百分比：贴在进度条头部右侧，top 由 JS 每帧写入，随进度一起下移；
   两端各留出半个字高，避免贴边被裁切。数字也带一层辉光。 */
.pl-percent {
    position: absolute;
    left: calc(var(--pl-bar, 10px) + 22px);
    top: 0;
    transform: translateY(-50%);
    color: var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4)));
    font-size: clamp(1.9rem, 6vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 18px var(--pl-glow, var(--accent-primary, #7fb7a4));
}

/* 轨道用主题色的低透明度版本，现代浏览器优先走 color-mix */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .pl-track {
        background: color-mix(in srgb, var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4))) 18%, transparent);
    }
    .pl-percent {
        text-shadow:
            0 0 14px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 75%, transparent),
            0 0 40px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 45%, transparent);
    }
}

/* ---- bar 结束衔接：百分比原地隐藏 → 进度条向右铺满整屏 ----
   加载补到 100% 后 JS 分两步给遮罩加类：
     1. .pl-overlay--expand      —— 百分比原地淡出，只改 opacity、不位移；
     2. .pl-overlay--expand-fill —— 等百分比彻底消失后，.pl-track 宽度从
        --pl-bar 涨到 100vw，实心的 .pl-fill 随之向右铺满整屏；
   铺满动画走完 JS 才派发淡出信号，page-enter 的卡片动画正好接在
   「进度条铺满整屏 → 整块主题色淡去」之后，形成一次连贯的交接。 */
.pl-overlay--expand .pl-percent {
    opacity: 0;
    /* 只改 opacity：位置仍由基础样式的 translateY(-50%) 决定，数字不位移 */
    transition: opacity var(--pl-pct-hide, 200ms) ease;
}

.pl-overlay--expand-fill .pl-track {
    width: 100vw;
    will-change: width;
}

/* 铺满整屏后辉光已无意义，顺手收掉，避免大面积阴影每帧重绘 */
.pl-overlay--expand-fill .pl-fill {
    box-shadow: none;
    transition: box-shadow var(--pl-expand, 520ms) ease;
}

/* ---- spinner 形态：屏幕中央一个简约转圈，但带发光 ---- */
.pl-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pl-spin-size, 42px);
    height: var(--pl-spin-size, 42px);
    margin: calc(var(--pl-spin-size, 42px) / -2) 0 0 calc(var(--pl-spin-size, 42px) / -2);
    border-radius: 50%;
    border: 3px solid var(--pl-track, rgba(128, 128, 128, 0.22));
    border-top-color: var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4)));
    box-shadow: 0 0 16px var(--pl-glow, var(--accent-primary, #7fb7a4));
    animation: pl-spin var(--pl-spin-speed, 760ms) linear infinite;
    will-change: transform;
}

/* 转圈外圈的呼吸光晕：半径略大于圆环，错开相位的缩放让"光"有扩散感 */
.pl-spinner::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(232, 184, 192, 0.38) 0%,
        rgba(232, 184, 192, 0) 70%);
    animation: pl-pulse 2.2s ease-in-out infinite;
}

@keyframes pl-spin {
    to { transform: rotate(360deg); }
}

@keyframes pl-pulse {
    0%, 100% { transform: scale(0.88); opacity: 0.5; }
    50%      { transform: scale(1.18); opacity: 1; }
}

/* 转圈的底环与光晕都跟随主题色 */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .pl-spinner {
        border-color: color-mix(in srgb, var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4))) 22%, transparent);
        border-top-color: var(--pl-color, var(--accent-primary, var(--accent, #7fb7a4)));
        box-shadow:
            0 0 12px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 85%, transparent),
            0 0 34px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 55%, transparent),
            0 0 72px color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 35%, transparent);
    }
    .pl-spinner::after {
        background: radial-gradient(circle,
            color-mix(in srgb, var(--pl-glow, var(--accent-primary, #7fb7a4)) 46%, transparent) 0%,
            transparent 70%);
    }
}

/* ---- 可访问性说明 ----
   这里原本有一条 @media (prefers-reduced-motion: reduce) 把所有过渡/动画关掉。
   它现在是多余的，而且有害：是否跳过动画完全由 JS 的
   config.respectReducedMotion 决定——若 JS 决定照常播放（默认），
   这条 CSS 却仍会把淡出、铺满、呼吸等过渡掐掉，导致动画「播了但很硬」。

   因此这里不再用媒体查询兜底。想要真正的无障碍降级，请设：
     window.PageLoader.config({ respectReducedMotion: true });
   JS 会直接不注入遮罩，页面按原样呈现。 */