/* =========================================
   Splash Screen 主容器
========================================= */
#splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #050505; 
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1;
    transform-origin: 0% 50%;
    will-change: opacity, transform;
    transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1),
                opacity 1.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, 
                visibility 1.5s;
}

/* =========================================
   Splash 背景图
========================================= */
#splash-screen img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    max-width: 100vw; max-height: 85vh; 
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: cinematicZoom 6s linear forwards;
    z-index: 1;
}

@keyframes cinematicZoom {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.05); }
}

/* =========================================
   左右两侧文字区域 (桌面端逻辑)
========================================= */
.splash-side {
    position: absolute;
    top: 46%; 
    transform: translateY(-50%);
    z-index: 10;
    color: #f5e7c4;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.splash-left { left: calc(50% - 32%); }
.splash-right { right: calc(50% - 32%); }

.splash-symbol { font-size: 2.2rem; margin-bottom: 5px; font-weight: 200; opacity: 0.8; }
.splash-title { font-size: 1.5rem; font-weight: 400; margin-bottom: 15px; letter-spacing: 4px; font-family: "Noto Serif SC", serif; }
.splash-lines { font-size: 0.95rem; line-height: 2; opacity: 0.8; font-weight: 300; letter-spacing: 1px; font-family: "Noto Serif SC", serif; }

/* =========================================
   底部标题区域 (桌面端逻辑)
========================================= */
.splash-bottom {
    position: absolute;
    bottom: 7.5%; left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    width: 100%;
}

.splash-main-title { font-size: 2.4rem; margin-bottom: 8px; letter-spacing: 8px; font-weight: 400; font-family: "Noto Serif SC", serif; color: #f7e5c0; }
.splash-sub-title { font-size: 0.9rem; opacity: 0.7; letter-spacing: 12px; font-weight: 300; }

/* 桌面端英文适配 */
html[lang="en"] .splash-left { left: calc(50% - 38%); }
html[lang="en"] .splash-right { right: calc(50% - 38%); }
html[lang="en"] .splash-main-title { font-size: 2.1rem; }

/* =========================================
   手机端适配 (仅针对解释文案下移优化)
========================================= */
@media (max-width: 768px) {
    #splash-screen img {
        max-height: 100vh;
        border-radius: 0;
    }

    /* 侧边文字容器：保持在环形中位线 */
    .splash-side {
        top: 48%; 
        text-shadow: 0 0 8px rgba(0,0,0,1);
    }

    /* 贴边处理 */
    .splash-left { 
        left: 2% !important; 
        align-items: flex-start; 
        padding-left: 5px;
    }

    .splash-right { 
        right: 2% !important; 
        align-items: flex-end; 
        padding-right: 5px;
    }

    .splash-symbol { 
        font-size: 1.1rem; 
        margin-bottom: 2px; 
    }

    /* 标题：保留现状 (大小和位置不动) */
    .splash-title {
        font-size: 0.8rem; 
        letter-spacing: 1px;
        white-space: nowrap; 
        margin-bottom: 0; /* 这里的间距由下方的 margin-top 控制 */
    }

    /* 【核心修改】详细文案：通过大幅度 margin-top 整体下移 */
    /* 这会让这三行字沉到无限符号圆环的下方 */
    .splash-lines {
        font-size: 0.6rem; 
        line-height: 1.4;
        opacity: 0.75;
        margin-top: 40px; /* 增加这个数值，直到文字完全避开发光环形 */
    }

    /* 底部标题位置：保持在黑边区域 */
    .splash-bottom {
        bottom: 12%; 
    }

    .splash-main-title {
        font-size: 1.5rem;
        letter-spacing: 3px;
        margin-bottom: 4px;
    }

    .splash-sub-title {
        font-size: 0.7rem;
        letter-spacing: 4px;
    }

    /* =========================================
       手机端英文模式额外微调
    ========================================= */
    /* 英文单词较长，标题字号稍作微调以适应单行，文案加大下移力度 */
    html[lang="en"] .splash-title {
        font-size: 0.7rem; 
        letter-spacing: 0.5px;
    }

    html[lang="en"] .splash-lines {
        font-size: 0.55rem;
        /* 英文标题占地稍大，文案再往下多推一点点 */
        margin-top: 45px; 
    }

    html[lang="en"] .splash-main-title {
        font-size: 1.3rem;
    }
}

/* 针对隐藏效果的样式 */
.splash-hidden {
    transform: perspective(2000px) rotateY(-75deg) translateX(-20%);
    transform: translateX(-100%) scale(0.95);
    opacity: 0 !important;
    visibility: hidden;
}
body.splash-active { overflow: hidden; }