/* 
 * 平衡流畅体验样式
 * balanced-smooth.css
 * 保留必要图标，为logo添加流畅动态效果
 */

/* ===== 1. 基础优化 ===== */
/* 启用原生平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 优化滚动性能 */
body {
    /* 简化滚动条 */
    scrollbar-width: thin;
    scrollbar-color: #D4AF37 rgba(0, 0, 0, 0.2);
}

/* 简化Webkit滚动条 */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

body::-webkit-scrollbar-thumb {
    background: #D4AF37;
    border-radius: 4px;
}

/* ===== 2. Logo流畅动态效果 ===== */
/* 为logo添加流畅、不跳动的动态效果 */
.logo {
    /* 启用硬件加速，确保流畅 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.logo img {
    /* 流畅的悬停效果 */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center center;
    
    /* 优化渲染 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 鼠标悬停时的流畅效果 */
.logo:hover img {
    transform: scale(1.05) rotate(2deg) !important;
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.4)) brightness(1.1) !important;
}

/* 点击时的微动效果 */
.logo:active img {
    transform: scale(0.98) !important;
    transition-duration: 0.2s !important;
}

/* ===== 3. 导航栏优化（保留图标） ===== */
/* 保持导航栏静态，避免滚动跳动 */
.header {
    /* 固定样式，轻微滚动变化 */
    background: rgba(0, 0, 0, 0.92) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    
    /* 流畅的滚动变化 */
    transition: background-color 0.8s ease, box-shadow 0.8s ease !important;
}

/* 轻微滚动效果 */
.header.scrolled {
    background: rgba(0, 0, 0, 0.96) !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.6) !important;
}

/* 导航图标保留和优化 */
.nav a i,
.footer-section a i {
    /* 保留图标，添加流畅效果 */
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-right: 8px !important;
}

/* 导航图标悬停效果 */
.nav a:hover i,
.footer-section a:hover i {
    transform: scale(1.2) !important;
    color: #D4AF37 !important;
}

/* 活动状态的图标 */
.nav a.active i {
    color: #FFD700 !important;
    transform: scale(1.1) !important;
}

/* ===== 4. 底部固定栏优化（保留图标） ===== */
.footer {
    /* 保持底部样式 */
    background: rgba(20, 15, 10, 0.95) !important;
    
    /* 图标优化 */
    .footer-section i {
        color: #D4AF37 !important;
        margin-right: 10px !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-section a:hover i {
        transform: translateX(3px) !important;
        color: #FFD700 !important;
    }
}

/* ===== 5. 内容区域优化 ===== */
/* 移除不必要的特效，保留基本功能 */
.image-container,
.image-container-single {
    /* 基本样式 */
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    
    /* 轻微悬停效果 */
    transition: transform 0.4s ease !important;
}

.image-container:hover,
.image-container-single:hover {
    transform: translateY(-2px) !important;
}

/* 图片基本效果 */
.image-container img,
.image-container-single img {
    transition: transform 0.6s ease !important;
}

.image-container:hover img,
.image-container-single:hover img {
    transform: scale(1.02) !important;
}

/* ===== 6. 返回顶部按钮优化 ===== */
#backToTop {
    /* 基本样式 */
    background: linear-gradient(45deg, #D4AF37, #8B0000) !important;
    color: white !important;
    
    /* 流畅显示/隐藏 */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
}

#backToTop.visible {
    opacity: 0.9 !important;
    transform: translateY(0) scale(1);
}

#backToTop:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
}

/* ===== 7. 模态框优化 ===== */
.image-overlay-full {
    /* 流畅显示 */
    transition: opacity 0.4s ease !important;
    animation: fadeIn 0.4s ease !important;
}

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

/* ===== 8. 移动端优化 ===== */
@media (max-width: 768px) {
    /* 移动端简化效果 */
    body {
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
    }
    
    /* 移动端logo效果简化 */
    .logo:hover img {
        transform: scale(1.03) !important;
    }
    
    /* 移动端导航图标 */
    .nav a i,
    .footer-section a i {
        margin-right: 6px !important;
    }
}

/* ===== 9. 性能优化 ===== */
/* 确保动态效果不影响性能 */
.logo,
.nav a i,
#backToTop {
    will-change: transform;
}

/* 限制重绘区域 */
.logo img {
    /* 隔离变换，减少重绘 */
    isolation: isolate;
}

/* ===== 10. 关键声明 ===== */
/* 此样式表提供：
   1. 流畅的logo动态效果
   2. 保留所有必要图标
   3. 优化性能的过渡和动画
   4. 平衡的视觉体验 */