/* ============================================================================
   COMPONENT: PRELOADER
   ============================================================================ */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-body, #fff); /* 与背景色一致 */
    z-index: var(--layer-loader); /* 确保在最顶层 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 消失时的过渡效果 */
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.6s step-end;
}

/* 隐藏状态（通过 JS 添加此类） */
#preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-wrap {
    width: 40vw; /* 进度条宽度 */
    max-width: 80%;
}

.loader-text {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading, sans-serif); /* 使用你的标题字体 */
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
    color: var(--color-text-main, #000);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.loader-track {
    width: 100%;
    height: 4px; /* 极细线条 */
    background-color: rgba(0,0,0,0.1); /* 浅灰轨道 */
    position: relative;
    overflow: hidden;
}

#loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* 初始宽度 */
    background-color: var(--color-text-main, #000); /* 深色进度 */
    transition: width 0.1s linear; /* 平滑增长 */
}