/* ===== ECHO V2.1 页面切换与交互增强样式 ===== */

/* ---------- 1. 页面切换淡入淡出效果 ---------- */
html {
    /* 防止页面切换时的白屏闪烁 */
    background-color: var(--bg-primary, #F5F2EA);
}

body {
    /* 初始状态：完全透明 */
    opacity: 0;
    /* 使用较长的过渡时间营造温润感 */
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity;
}

/* 页面加载完成后的可见状态 */
body.is-visible {
    opacity: 1;
}

/* pageshow 事件触发的淡入 */
body.is-page-show {
    animation: pageFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 离开页面时的淡出效果 */
body.is-leaving {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- 2. 返回顶部按钮样式 ---------- */
.back-to-top {
    position: fixed;
    right: 5vw;
    bottom: calc(5vh + 80px); /* 位于铸造按钮上方 */
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #EDE9DE);
    border: 0.5px solid var(--gold-light, #C9B896);
    border-radius: 2px;
    cursor: pointer;
    z-index: 998;
    /* 初始隐藏状态 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    /* 极简风格 */
    font-family: var(--font-display, 'LXGW WenKai', serif);
    font-size: 1rem;
    color: var(--ink-light, #7A756D);
    letter-spacing: 0.1em;
}

/* 显示状态 */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 悬停效果 - 如宣纸晕染 */
.back-to-top:hover {
    background: var(--bg-tertiary, #E5E1D4);
    border-color: var(--gold-primary, #A68B5B);
    color: var(--ink-deep, #2A2825);
    transform: translateY(-2px);
}

/* 点击效果 */
.back-to-top:active {
    transform: translateY(0) scale(0.95);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        right: 20px;
        bottom: calc(20px + 72px);
        font-size: 0.9rem;
    }
}

/* ---------- 3. 图片加载淡墨色占位效果 ---------- */
/* 图片容器 */
.img-container {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-tertiary, #E5E1D4);
}

/* 淡墨色占位背景 */
.img-placeholder {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(
            135deg,
            var(--bg-tertiary, #E5E1D4) 0%,
            var(--bg-secondary, #EDE9DE) 50%,
            var(--bg-tertiary, #E5E1D4) 100%
        );
    /* 如宣纸纹理般的微渐变 */
    background-size: 200% 200%;
    animation: inkShimmer 2s ease-in-out infinite;
}

@keyframes inkShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 实际图片 - 初始透明 */
.img-fade {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片加载完成后的淡入 */
.img-fade.is-loaded {
    opacity: 1;
}

/* 占位符在图片加载完成后淡出 */
.img-container.has-loaded .img-placeholder {
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

/* ---------- 4. 平滑滚动行为 ---------- */
html {
    scroll-behavior: smooth;
}

/* 针对不支持 scroll-behavior 的浏览器的回退 */
@supports not (scroll-behavior: smooth) {
    /* JavaScript 会处理 */
}

/* ---------- 5. 通用过渡增强 ---------- */
/* 链接和按钮的过渡统一 */
a, button {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* ---------- 6. 减少动效偏好支持 ---------- */
@media (prefers-reduced-motion: reduce) {
    body,
    body.is-page-show,
    .back-to-top,
    .back-to-top.is-visible,
    .img-fade,
    .img-placeholder {
        transition: none;
        animation: none;
    }
    
    body {
        opacity: 1;
    }
    
    .back-to-top {
        transform: none;
    }
    
    .img-fade {
        opacity: 1;
    }
    
    html {
        scroll-behavior: auto;
    }
}