/**
 * 语言切换过渡效果 - 防止闪烁
 */

/* 初始隐藏状态 - 修复黑屏问题 */
html.language-loading body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    animation: languageLoadingTimeout 3s forwards; /* 3秒后强制显示 */
}

/* 强制显示的关键帧动画 - 防止永久黑屏 */
@keyframes languageLoadingTimeout {
    0%, 80% { opacity: 0; }
    100% { opacity: 1; }
}

/* 语言加载完成后显示 */
html.language-loaded body {
    opacity: 1;
}

/* 防止在语言切换时出现布局跳动 */
html.language-loading * {
    transition: none !important;
}

/* 语言切换动画 */
html.language-switching body {
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

/* 针对不同方向的语言（如阿拉伯语）的特殊处理 */
html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] .navbar,
html[lang="ar"] .nav-links,
html[lang="ar"] .footer-content {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .nav-links {
    flex-direction: row-reverse;
}

/* 防止字体加载时的闪烁 */
.font-loading {
    visibility: hidden;
}

.font-loaded {
    visibility: visible;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 语言选择器加载状态 */
.language-selector-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* 移动端优化 */
@media (max-width: 768px) {
    html.language-loading body {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }
    
    html.language-switching body {
        transition: opacity 0.15s ease-in-out;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    html.language-loading body {
        background: #0a0a0a;
    }
}

/* 减少动画的可访问性设置 */
@media (prefers-reduced-motion: reduce) {
    html.language-loading body,
    html.language-loaded body,
    html.language-switching body {
        transition: none;
        opacity: 1;
        animation: none; /* 禁用超时动画 */
    }
}