/*--------------会员端---------------*/
#loader-wrapper-full {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: #fff;
    z-index: 9999;
    /*animation: showAfter1s 100ms linear forwards;*/
}

/* ========== 文字笔画填充核心样式 ========== */
.text-stroke-fill {
    position: relative;
    display: inline-block; /* 适配文字宽度，无外层容器 */
    font-size: 64px; /* 文字越大，填充效果越明显 */
    font-weight: 800; /* 粗体笔画更清晰 */
    color: var(--main-color); /* 默认文字为黑色 */
}

    /* 红色填充层（伪元素，叠加在原文字上方） */
    .text-stroke-fill::before {
        content: attr(data-text); /* 复用原文字内容，保证完全重合 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 核心：仅在笔画内显示红色背景 */
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent; /* 填充层文字透明，只显示背景 */
        /* 红色渐变：左侧红色，右侧透明（实现逐步填充） */
        background-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 50%, transparent 100%);
        background-size: 200% 100%; /* 背景放大2倍，为动画预留空间 */
        background-position: 0 0;
        /* 循环填充动画 */
        animation: strokeFillRed var(--animation-duration) ease-in-out infinite;
        z-index: 1; /* 填充层在原文字上方 */
    }

/* 红色笔画填充关键帧 */
@keyframes strokeFillRed {
    0% {
        background-position: 0 0; /* 初始：红色在外侧，文字显示黑色 */
    }

    80% {
        background-position: -100% 0; /* 80%进度：红色覆盖整个笔画 */
    }

    100% {
        background-position: -100% 0; /* 收尾：保持填充后重置 */
    }
}

/* 定义隐藏+延迟显示的动画 */
@keyframes showAfter1s {
    0% {
        display: none;
    }
    /* 初始状态：隐藏 */
    99% {
        display: none;
    }
    /* 前99%的时间保持隐藏 */
    100% {
        display: flex;
    }
    /* 最后1%的时间显示（block可根据元素类型调整） */
}