/*!
 * 全站滚动动画系统 v1.0.0
 *
 * 提供：
 *  - [data-anim] 系列入场预设（fade / fade-up / fade-down / fade-left / fade-right / zoom-up）
 *  - 顶部固定进度条
 *  - Hero 背景轻量视差容器规则
 *
 * 设计原则：
 *  - 仅使用 transform + opacity，避免触发 layout / paint
 *  - 动画时长与延迟通过 CSS 变量注入，便于 JS 按 index 单独覆盖
 *  - prefers-reduced-motion: reduce 时全局兜底直接显示终态
 */

/* ============== [data-anim] 入场预设 ============== */

[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity var(--apap-anim-duration, 520ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--apap-anim-delay, 0ms),
        transform var(--apap-anim-duration, 520ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--apap-anim-delay, 0ms);
}

[data-anim="fade"]       { transform: none; }
[data-anim="fade-up"]    { transform: translate3d(0, 24px, 0); }
[data-anim="fade-down"]  { transform: translate3d(0, -24px, 0); }
[data-anim="fade-left"]  { transform: translate3d(24px, 0, 0); }
[data-anim="fade-right"] { transform: translate3d(-24px, 0, 0); }
[data-anim="zoom"]       { transform: scale(0.94); }
[data-anim="zoom-up"]    { transform: translate3d(0, 16px, 0) scale(0.96); }

[data-anim].is-in-view {
    opacity: 1;
    transform: none;
}

/* 触发后释放合成层提示，避免长期占用 GPU 内存 */
[data-anim].is-in-view {
    will-change: auto;
}

/* ============== 顶部滚动进度条 ============== */

.apap-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.apap-scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--apap-color-accent, #014098), var(--apap-color-accent-dark, #00317d));
    transform-origin: left center;
    transition: width 80ms linear;
    will-change: width;
}

/* 沉浸式页眉模式下进度条仍贴顶 0；如果需要让出 sticky header 高度，可在主题里覆盖 .apap-scroll-progress { top: var(--apap-header-h); } */

/* ============== Hero 背景视差工具类 ============== */

.apap-parallax-bg {
    will-change: transform;
    transition: transform 80ms linear;
}

/* ============== prefers-reduced-motion 兜底 ============== */

@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .apap-scroll-progress-bar {
        transition: none !important;
    }
    .apap-parallax-bg {
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* ============== 紧凑视口下的微调 ============== */

@media (max-width: 600px) {
    [data-anim="fade-up"]    { transform: translate3d(0, 16px, 0); }
    [data-anim="fade-down"]  { transform: translate3d(0, -16px, 0); }
    [data-anim="fade-left"]  { transform: translate3d(16px, 0, 0); }
    [data-anim="fade-right"] { transform: translate3d(-16px, 0, 0); }
    [data-anim="zoom-up"]    { transform: translate3d(0, 12px, 0) scale(0.97); }
}