/**
 * 语言加载状态样式
 * 用于优化UI加载时显示翻译key的问题
 */

/* 语言加载状态下的通用样式 */
.language-loading {
    /* 为所有可能显示翻译key的元素添加微妙的过渡效果 */
}

.language-loading [id*="title"],
.language-loading [id*="text"], 
.language-loading [id*="link"],
.language-loading .btn-text,
.language-loading nav a {
    transition: opacity 0.2s ease;
}

/* 语言加载时的骨架屏效果（可选） */
.language-loading.skeleton-mode [id*="title"],
.language-loading.skeleton-mode [id*="text"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    color: transparent;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 暗色主题支持 */
[data-theme="dark"] .language-loading.skeleton-mode [id*="title"],
[data-theme="dark"] .language-loading.skeleton-mode [id*="text"] {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* 语言切换指示器（可选） */
.language-switch-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 10000;
    transform: translateY(-100px);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.language-switch-indicator.show {
    transform: translateY(0);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .language-switch-indicator {
        top: 10px;
        right: 10px;
        font-size: 11px;
        padding: 6px 10px;
    }
}