/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #120f0d; /* 深黑底色 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
    min-height: 100dvh;
    color: #f7efe8;
}

/* ============================================
   全新纯净版：回忆背景图层（强制置底、移除复杂混合）
   ============================================ */
#bg-photo-layer {
    position: fixed; /* 改为 fixed，确保死死钉在屏幕上 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* 强制设为负数，确保它在所有 stage 的最最底层 */
    
    /* 1. 临时网络测试图 */
    background-image: url("../assets/images/bg-photo.jpg"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 2. 柔焦模糊 */
    filter: blur(2.5px);
    
    /* 3. 调大透明度至 0.4（测试完毕后可以调低），不使用任何 mix-blend-mode 干扰 */
    opacity: 0.4; 
    
    pointer-events: none;
}

/* 遮罩层：只保留极淡的边缘暗影，绝不遮挡中心 */
#bg-photo-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        transparent 50%,
        rgba(18, 15, 13, 0.85) 100%
    );
    pointer-events: none;
}

#bg-photo-mobile-fill {
    display: none;
}

@media (max-width: 480px) {
    #bg-photo-mobile-fill {
        display: block;
        position: fixed;
        inset: -18px;
        z-index: 0;
        background: url("../assets/images/bg-photo.jpg") center / cover no-repeat;
        filter: blur(18px);
        opacity: 0.26;
        pointer-events: none;
    }

    #bg-photo-layer {
        z-index: 0;
        background-size: contain;
        background-position: center 30%;
        filter: none;
        opacity: 0.5;
    }
}

/* 氛围光容器 */
#ambient-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    pointer-events: none;
}

/* 动态彩色微粒样式 */
.ambient-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    filter: blur(2.5px);
    opacity: 0;
}

/* 页面阶段控制：强制取消这里的背景颜色 */
#envelope-stage {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background: transparent !important; /* 强制透明，防止遮挡底部的背景图！ */
    transition: opacity 0.8s ease;
}

.stage-hidden {
    opacity: 0;
    pointer-events: none;
}

.wax-seal:focus-visible,
.seal-card:focus-visible {
    outline: 2px solid #f4cf9b;
    outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}