/* 防止初始渲染闪烁 */

#vioneko-loading-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000;

    background-size: cover;

    background-position: center;

    z-index: 999999;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 1;

    transition: opacity 0.5s ease-out;

    /* 防止初始渲染时的闪烁 */

    visibility: visible !important;

}



#vioneko-loading-screen.fade-out {

    opacity: 0;

    pointer-events: none;

}



.loading-container {

    text-align: center;

    width: 80%;

    max-width: 600px;

    position: relative;

}



.loading-man-container {

    position: relative;

    height: 0;

    margin-bottom: 40px;

    /* 防止容器高度变化导致的跳动 */

    min-height: 80px;

}



.loading-man {

    position: absolute;

    left: 0;

    transform: scaleX(-1); /* 水平翻转 */

    bottom: 0; /* 默认与进度条对齐 */

    /* 确保图片不会在加载时闪烁 */

    opacity: 1 !important;

    visibility: visible !important;

    transition: left 0.1s linear; /* 添加平滑移动 */

}



.loading-bar-container {

    margin-bottom: 20px;

}



.loading-bar {

    width: 100%;

    height: 20px;

    background-color: #333;

    border-radius: 10px;

    overflow: hidden;

    position: relative;

    margin-bottom: 10px;

}



/* 全新的条纹动画实现 */

.loading-progress {

    height: 100%;

    width: 0%;

    border-radius: 10px;

    position: relative;

    /* 关键：添加平滑的宽度过渡 */

    transition: width 0.1s linear !important;

    /* 移除之前的背景设置，使用新的动画方法 */

    background: transparent;

    overflow: hidden;

}



/* 使用伪元素创建条纹效果 */

.loading-progress::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        repeating-linear-gradient(

            45deg,

            var(--progress-color1, #8B00FF),

            var(--progress-color1, #8B00FF) 8px,

            var(--progress-color2, #FFFFFF) 8px,

            var(--progress-color2, #FFFFFF) 16px

        );

    background-size: 22px 22px;

    animation: stripeFlow 0.8s linear infinite;

    border-radius: 10px;

}



/* 添加第二层条纹创造更丰富的效果 */

.loading-progress::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        repeating-linear-gradient(

            -45deg,

            transparent,

            transparent 6px,

            rgba(255, 255, 255, 0.2) 6px,

            rgba(255, 255, 255, 0.2) 12px

        );

    background-size: 16px 16px;

    animation: stripeFlowReverse 0.6s linear infinite;

    border-radius: 10px;

}



/* 条纹流动动画 - 主要条纹 */

@keyframes stripeFlow {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: 22px 0;

    }

}



/* 反向流动动画 - 次要条纹 */

@keyframes stripeFlowReverse {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: -16px 0;

    }

}



.loading-percentage {

    color: #fff;

    font-size: 18px;

    font-weight: bold;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}



.loading-text {

    color: #fff;

    font-size: 16px;

    margin-top: 10px;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

}



/* 新增的耐心等待提示 */

.loading-hint {

    color: #c69c6d;

    font-size: 14px;

    margin-top: 15px;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

    font-style: italic;

    animation: hintPulse 3s ease-in-out infinite;

    line-height: 1.4;

}



@keyframes hintPulse {

    0%, 100% { opacity: 0.7; }

    50% { opacity: 1; }

}



/* 文字动画效果 */

.loading-text.typing {

    border-right: 2px solid #fff;

    white-space: nowrap;

    overflow: hidden;

    width: 0;

    animation: typing 3s steps(40, end) forwards, blink-caret 0.75s step-end infinite;

}



@keyframes typing {

    from { width: 0 }

    to { width: 100% }

}



@keyframes blink-caret {

    from, to { border-color: transparent }

    50% { border-color: #fff }

}



.loading-text.jump span {

    display: inline-block;

    animation: jump 1.5s infinite;

}



.loading-text.jump span:nth-child(2) {

    animation-delay: 0.1s;

}



.loading-text.jump span:nth-child(3) {

    animation-delay: 0.2s;

}



.loading-text.jump span:nth-child(4) {

    animation-delay: 0.3s;

}



.loading-text.jump span:nth-child(5) {

    animation-delay: 0.4s;

}



@keyframes jump {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



.loading-text.fade {

    animation: fade 2s infinite;

}



@keyframes fade {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.3; }

}



.loading-text.glow {

    animation: glow 2s ease-in-out infinite;

}



@keyframes glow {

    0%, 100% { 

        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #8B00FF, 0 0 20px #8B00FF;

    }

    50% { 

        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8B00FF, 0 0 40px #8B00FF;

    }

}



.loading-text.wave span {

    display: inline-block;

    animation: wave 2s infinite;

}



.loading-text.wave span:nth-child(2) {

    animation-delay: 0.1s;

}



.loading-text.wave span:nth-child(3) {

    animation-delay: 0.2s;

}



.loading-text.wave span:nth-child(4) {

    animation-delay: 0.3s;

}



.loading-text.wave span:nth-child(5) {

    animation-delay: 0.4s;

}



@keyframes wave {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



/* 优化故障提示样式 - 放在加载动画下方 */

.vioneko-fallback-overlay {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    z-index: 1000001;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding: 20px;

    box-sizing: border-box;

    opacity: 0;

    transform: translateY(100px);

    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.vioneko-fallback-overlay.show {

    opacity: 1;

    transform: translateY(0);

}



.vioneko-fallback-content {

    background: rgba(0, 0, 0, 0.92);

    padding: 25px 30px;

    border-radius: 16px;

    text-align: center;

    max-width: 450px;

    width: 100%;

    border: 2px solid rgba(139, 0, 255, 0.4);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(10px);

    transform: translateY(20px);

    transition: all 0.4s ease-out;

}



.vioneko-fallback-overlay.show .vioneko-fallback-content {

    transform: translateY(0);

}



.vioneko-fallback-text {

    color: #fff;

    font-size: 16px;

    margin-bottom: 20px;

    line-height: 1.5;

    font-weight: 500;

}



#vioneko-fallback-btn {

    background: linear-gradient(45deg, #8B00FF, #9B30FF);

    color: white;

    border: none;

    padding: 12px 25px;

    border-radius: 10px;

    cursor: pointer;

    font-size: 15px;

    font-weight: bold;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(139, 0, 255, 0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 0 auto;

    min-width: 200px;

    position: relative;

    overflow: hidden;

}



#vioneko-fallback-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: left 0.5s;

}



#vioneko-fallback-btn:hover::before {

    left: 100%;

}



#vioneko-fallback-btn:hover {

    background: linear-gradient(45deg, #9B30FF, #AB60FF);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(139, 0, 255, 0.6);

}



#vioneko-fallback-btn:active {

    transform: translateY(0);

    box-shadow: 0 2px 8px rgba(139, 0, 255, 0.4);

}



.fallback-icon {

    width: 18px;

    height: 18px;

    object-fit: contain;

    filter: brightness(0) invert(1);

    transition: transform 0.3s ease;

}



#vioneko-fallback-btn:hover .fallback-icon {

    transform: scale(1.1);

}



/* 强制关闭动画 */

#vioneko-loading-screen.force-close {

    opacity: 0;

    transition: opacity 0.4s ease-out;

}



/* 确保移动端初始设置正确 */

@media (max-width: 768px) {

    .loading-man-container {

        min-height: 100px;

    }

    

    .loading-man {

        height: 100px !important;

        bottom: -10px !important;

    }

    

    .loading-percentage {

        font-size: 16px;

    }

    

    .loading-text {

        font-size: 14px;

    }

    

    .loading-hint {

        font-size: 13px;

        margin-top: 12px;

    }

    

    /* 移动端故障提示优化 */

    .vioneko-fallback-overlay {

        padding: 15px;

    }

    

    .vioneko-fallback-content {

        padding: 20px 25px;

        max-width: 400px;

    }

    

    .vioneko-fallback-text {

        font-size: 15px;

        margin-bottom: 18px;

    }

    

    #vioneko-fallback-btn {

        padding: 10px 20px;

        font-size: 14px;

        min-width: 180px;

    }

    

    .fallback-icon {

        width: 16px;

        height: 16px;

    }

}



@media (max-width: 480px) {

    .loading-man {

        height: 80px !important;

        bottom: -10px !important;

    }

    

    .loading-bar {

        height: 15px;

    }

    

    .loading-percentage {

        font-size: 14px;

    }

    

    .loading-text {

        font-size: 12px;

    }

    

    .loading-hint {

        font-size: 12px;

        margin-top: 10px;

    }

    

    .vioneko-fallback-overlay {

        padding: 10px;

    }

    

    .vioneko-fallback-content {

        padding: 18px 20px;

        border-radius: 14px;

        max-width: 350px;

    }

    

    .vioneko-fallback-text {

        font-size: 14px;

        margin-bottom: 16px;

    }

    

    #vioneko-fallback-btn {

        padding: 8px 16px;

        font-size: 13px;

        min-width: 160px;

        gap: 8px;

    }

    

    .fallback-icon {

        width: 14px;

        height: 14px;

    }

}



/* 小屏幕特殊处理 */

@media (max-width: 360px) {

    .vioneko-fallback-content {

        padding: 15px 18px;

        max-width: 320px;

    }

    

    .vioneko-fallback-text {

        font-size: 13px;

        margin-bottom: 14px;

    }

    

    #vioneko-fallback-btn {

        min-width: 140px;

        font-size: 12px;

    }

}