/* ==========================================================================
   页面入场动画样式：整页淡入 + 轻微上浮，配合 /static/page-enter.js 使用。
   由 page-enter.js 在解析阶段给 <html> 打上 .pe-active，
   动画结束（或降级路径）后打上 .pe-done，避免一直挂着 will-change 影响性能。

   设计要点：
   - 默认时长/位移全部走 CSS 变量，可在页面里覆盖，也能被 JS 参数覆盖。
   - 用 transform + opacity，不触发布局，移动端也稳。
   - 首屏内容错开出现（stagger），靠 --pe-index 控制每条延迟。
   - 卡片「分布浮出」：容器里的卡片逐张上浮淡入，见文件末尾 .pe-card。
   - 时长刻意放长（默认 900ms + 130ms 错开），让浮出过程看得清楚、不显仓促。
   ========================================================================== */

html.pe-active body {
    opacity: 0;
    transform: translateY(var(--pe-shift, 24px));
}

html.pe-active body.pe-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--pe-duration, 900ms) var(--pe-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--pe-delay, 0ms),
        transform var(--pe-duration, 900ms) var(--pe-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--pe-delay, 0ms);
}

/* 动画期间提升为独立合成层；结束后由 .pe-done 撤掉，避免长期占用显存 */
html.pe-active.pe-running body {
    will-change: opacity, transform;
}

/* ---- 首屏元素错开出场 ----
   给元素加 data-pe-stagger，或直接加类 .pe-item，即可参与错开队列。
   延迟由 JS 写入 --pe-index（0,1,2...），也可手写 style="--pe-index:2"。 */
html.pe-active .pe-item {
    opacity: 0;
    transform: translateY(var(--pe-item-shift, 24px));
}

html.pe-active .pe-item.pe-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--pe-duration, 900ms) var(--pe-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) calc(var(--pe-delay, 0ms) + var(--pe-item-delay, 130ms) * var(--pe-index, 0)),
        transform var(--pe-duration, 900ms) var(--pe-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) calc(var(--pe-delay, 0ms) + var(--pe-item-delay, 130ms) * var(--pe-index, 0));
}

/* ---- 卡片分布浮出 ----
   由 page-enter.js 的 PageEnter.reveal(容器) 给一张张卡片临时加上 .pe-card：
   每张卡片错开 --pe-card-stagger 依次从下方浮起并淡入。
   用 animation（而不是 transition）是因为卡片往往是渲染后才插入 DOM 的，
   animation 不需要「先藏起来再切类」的两帧配合，天然支持重播。
   动画结束后 JS 会摘掉 .pe-card，避免 animation-fill-mode 长时间压住 hover 的 transform。 */
@keyframes pe-card-rise {
    from {
        opacity: 0;
        transform: translateY(var(--pe-card-shift, 28px)) scale(var(--pe-card-scale, 0.96));
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pe-card {
    animation: pe-card-rise var(--pe-card-duration, 900ms) var(--pe-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
    animation-delay: calc(var(--pe-card-delay, 0ms) + var(--pe-card-stagger, 130ms) * var(--pe-index, 0));
    will-change: opacity, transform;
}

/* ---- 可访问性：用户要求减少动态效果时，一律不做动画 ---- */
@media (prefers-reduced-motion: reduce) {
    html.pe-active body,
    html.pe-active body.pe-in,
    html.pe-active .pe-item,
    html.pe-active .pe-item.pe-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .pe-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}