/* ============================================================
 * assets/page-transition.css —— 跨页过渡 + 顶部加载进度条
 * ------------------------------------------------------------
 * 1. 跨页视图过渡（View Transitions API，跨文档）
 *    · 仅同源导航生效；不支持该 API 的浏览器自动回退为普通跳转（不报错）
 *    · 旧页快照淡出 / 新页快照淡入 + 轻微上浮，配合各页 ui-motion.css 的入场
 *    · 个别链接退出过渡：加 data-no-transition，或在 JS 里置
 *      window.__lgcNoTransition = true（外链/新窗口/下载已自动排除）
 * 2. 顶部加载进度条（配合 page-transition.js）
 *    html.lgc-loading        → 进度条出现（宽 0）
 *    html.lgc-loading.lgc-bar-start → 涨到 82%
 *    html.lgc-loading.lgc-bar-done  → 补满 100% 并淡出
 * 3. 降级：prefers-reduced-motion: reduce 时不显示进度条、不播放快照动画
 * 接入：由 api/appearance.php 统一输出，无需各页单独引入
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. 跨页视图过渡
 * ---------------------------------------------------------- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: lgc-vt-out 180ms cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(root) {
    animation: lgc-vt-in 240ms cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes lgc-vt-out {
    to { opacity: 0; }
}

@keyframes lgc-vt-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* 支持跨页过渡的浏览器：关掉 body 自带的入场淡入，
   避免与快照动画叠加成"双重淡入"（首次直接打开页面时也不再淡入） */
@supports (view-transition-name: none) {
    body,
    body.lgc-page-load {
        animation: none !important;
    }
}

/* ------------------------------------------------------------
 * 2. 顶部加载进度条
 * ---------------------------------------------------------- */
html.lgc-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    z-index: 2147483000;
    pointer-events: none;
    background: linear-gradient(90deg, #6FC0EC, #4a9eff);
    box-shadow: 0 0 6px rgba(74, 158, 255, .55);
    border-radius: 0 2px 2px 0;
    opacity: 1;
    transition: width .45s cubic-bezier(.1, .8, .2, 1);
}

html.lgc-loading.lgc-bar-start::before {
    width: 82%;
}

html.lgc-loading.lgc-bar-done::before {
    width: 100%;
    opacity: 0;
    transition: width .18s linear, opacity .3s ease .12s;
}

/* ------------------------------------------------------------
 * 3. 降级
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.lgc-loading::before {
        display: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

@media print {
    html.lgc-loading::before {
        display: none !important;
    }
}