/* ==========================================================================
   1. 全局基础与字体 (Global Base)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
    background-color: transparent; 
    overflow-y: scroll; 
    margin: 0;
}

/* === 全局固定背景层 === */
#fixed-background-layer { 
    position: fixed; top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    z-index: -1; 
    background-image: url('../img/Gemini_Generated_Image_nqbjz8nqbjz8nqbj.png'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
}

/* === 背景透明度工具类 === */
.bg-white-80 { background-color: rgba(246, 252, 255, 0.5); }
.bg-white-30 { background-color: rgba(246, 252, 255, 0.3); }
.bg-white-card { background-color: rgba(255, 255, 255, 0.75); }
.bg-black-end { background-color: rgba(217, 236, 254, 0.5); }
.bg-gray100-80 { background-color: rgba(246, 252, 255, 0.7); }

/* ==========================================================================
   2. 导航栏 (Navigation)
   ========================================================================== */
.text-color { color: rgba(0, 0, 0, 0.6); cursor: pointer; transition: color 0.3s; }
.text-color:hover { color: #63b9ff; }

.nav-item-active { 
    color: rgb(45, 45, 45) !important; 
    font-weight: 800 !important; 
    position: relative; 
}
.nav-item-active::after { 
    content: ''; position: absolute; bottom: -8px; left: 0; 
    width: 100%; height: 2px; background-color: rgb(45, 45, 45); 
}

#mobile-menu .nav-item-active::after { display: none !important; }
#mobile-menu .nav-item-active { background-color: rgba(255, 255, 255, 0.5); }

#lang-switch-desktop, #lang-switch-mobile { 
    border: none !important; 
    font-weight: 700; 
    background: transparent; 
    padding: 0; 
    font-size: 1rem; 
    color: #000000 !important; 
}

/* ==========================================================================
   3. 页脚 (Footer)
   ========================================================================== */
#contact { 
    background-image: url('../img/Gemini_Generated_Image_me5c34me5c34me5c.png'); 
    background-size: cover; 
    background-position: center center; 
    background-color: #1a202c; 
    position: relative; 
}
.footer-text-shadow { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); }
.footer-logo { width: 100px; height: auto; display: block; margin: 0 auto; }

.partner-logo { 
    height: 60px; 
    width: auto; 
    transition: opacity 0.3s; 
}
.partner-logo:hover { opacity: 0.7; }

/* ==========================================================================
   4. 图片查看器 (Modal & Toolbar) - [最终修复版]
   ========================================================================== */
.js-modal { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.95); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; 
    cursor: default; 
    opacity: 0; 
    transition: opacity 0.3s; 
    overflow: hidden; 
    
    /* [关键] 禁止浏览器默认的双击缩放手势 */
    touch-action: none; 
    -ms-touch-action: none;
}

.js-modal.active { display: flex; opacity: 1; }

.js-modal-image { 
    /* [关键] 改用 max-width/height，允许图片保留自然像素密度 */
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    
    /* 允许交互 */
    pointer-events: auto !important; 
    
    /* 使用 2D 变换，过渡设快一点 */
    transition: transform 0.1s linear; 
    
    /* 强制高质量渲染 */
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: high-quality;
    
    cursor: default;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
}

/* 交互状态类 */
.js-modal-image.can-drag { cursor: grab; }
.js-modal-image.is-dragging { cursor: grabbing; transition: none !important; }

/* === 工具栏样式 (支持显示/隐藏过渡) === */
.image-toolbar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    
    /* 背景透明度 0.4 */
    background-color: rgba(0, 0, 0, 0.4); 
    
    padding: 8px 20px;
    border-radius: 50px;
    z-index: 10001;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    /* 菜单切换过渡 */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.tool-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;

    /* [关键] 禁止按钮上的手势缩放和点击高亮 */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tool-btn:hover { 
    background-color: rgba(255, 255, 255, 0.2); 
    transform: scale(1.1); 
    color: #fff;
}
.tool-btn:active { transform: scale(0.95); }

/* 关闭按钮高亮 */
.close-btn { color: #ff8787; }
.close-btn:hover { background-color: rgba(255, 71, 71, 0.3); color: #ff6b6b; }

/* 文字说明位置 */
#modalCaption { 
    position: absolute; 
    bottom: 110px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    padding: 6px 14px; 
    border-radius: 4px; 
    font-size: 14px; 
    text-align: center; 
    max-width: 90%; 
    pointer-events: none; 
    opacity: 0; 
    /* 增加 transition 以支持淡入淡出 */
    transition: opacity 0.3s ease; 
    z-index: 10000; 
}
/* 注意：这里的 opacity 由 JS 控制显示隐藏 */
.js-modal.active #modalCaption { opacity: 1; }

/* 加载动画 */
.loading-spinner { position: absolute; width: 40px; height: 40px; border: 4px solid rgba(200, 200, 200, 0.3); border-radius: 50%; border-top-color: #63b9ff; animation: spin 1s ease-in-out infinite; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   5. Index 页面特有样式
   ========================================================================== */
/* [新增修复] 首页巨幕文字阴影 */
.hero-text-enhanced {
    text-shadow: 0px 0px 15px #4e4e4e;
}

.video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
.video-container video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; display: none; }
.video-placeholder { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; background-color: #1a202c; color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 0.5s; }
.video-placeholder img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
@media (orientation: landscape) { .video-container .landscape-placeholder { display: flex; } .video-container .portrait-placeholder { display: none; } #hero { align-items: center; padding-bottom: 0; } }
@media (orientation: portrait) { .video-container .landscape-placeholder { display: none; } .video-container .portrait-placeholder { display: flex; } #hero { align-items: flex-end; padding-bottom: 5rem; } #hero .z-content { transform: translateY(-50%); } }
.z-content { z-index: 10; }

.art-image-fixed-height { height: 50vh; width: auto; max-width: none; object-fit: cover; transition: transform 0.3s; }
.art-image-responsive { max-height: 90vh; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.3s; }
.art-image-wrapper { overflow-x: visible; display: flex; justify-content: center; width: 100%; max-height: 90vh; }
#art-2 .art-image-responsive, #art-2 .art-image-wrapper { max-height: 60vh; }
#about .art-image-responsive, #about .art-image-wrapper { max-height: 50vh; }
.video-max-wrapper { max-height: 90vh; width: 100%; overflow: hidden; box-sizing: border-box; }
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; width: 100%; overflow: hidden; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ==========================================================================
   6. Tour / Honor / Art / Privacy 页面特有样式
   ========================================================================== */
.timeline-container { position: relative; }
.timeline-border { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background-color: rgba(150, 150, 150, 0.3); }
@media (min-width: 768px) { .timeline-border { left: 140px; } }

.timeline-year { font-family: 'Inter', sans-serif; font-weight: 700; color: #1a202c; transition: all 0.3s; display: inline-block; }
.timeline-year-2022 { color: #4b5563; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background-color: white; border: 2px solid #cbd5e1; position: absolute; left: -4px; top: 10px; z-index: 10; transition: all 0.3s; }
@media (min-width: 768px) { .timeline-dot { left: 136px; } }

.group:hover .timeline-year, .active-year .timeline-year { color: #2e9aff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); }
.group:hover .timeline-dot, .active-year .timeline-dot { border-color: #2e9aff; background-color: #2e9aff; transform: scale(1.2); }
.active-year .timeline-dot { width: 14px; height: 14px; left: -6px; }
@media (min-width: 768px) { .active-year .timeline-dot { left: 133px; } }

.bg-white-card { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.group:not(.no-hover-shadow):hover .bg-white-card { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: #2e9aff; }
.active-year .bg-white-card { border-color: #2e9aff; }
.border-brand-blue-dark { border-color: #2e9aff !important; }
.bg-brand-blue-dark { background-color: #2e9aff; }
.text-brand-blue-dark { color: #2e9aff !important; }
.special-hover:hover .bg-white-card { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.grid-2-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-items: stretch; }
.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: stretch; }

.book-card { transition: all 0.3s ease; border: 1px solid transparent; }
.book-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: rgba(99, 185, 255, 0.3); }

.honor-list { position: relative; }
.honor-list::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 9px; width: 1px; background-color: #cbd5e1; z-index: 0; }
.honor-item { position: relative; padding-left: 2rem; border-left: none; transition: all 0.3s ease; padding-bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; }
.honor-item::before { content: ''; position: absolute; left: 5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background-color: white; border: 2px solid #cbd5e1; transition: all 0.3s ease; z-index: 1; }
.honor-item:hover::before { background-color: #2e9aff; border-color: #2e9aff; transform: scale(1.3); }
.honor-year { color: #2e9aff; font-weight: 800; margin-bottom: 0.25rem; display: inline-block; min-width: 100px; white-space: nowrap; flex-shrink: 0; }

.marquee-wrapper { width: 100%; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.marquee-track { display: flex; gap: 1.5rem; width: max-content; flex-wrap: nowrap; animation: scroll 30s linear infinite; padding: 1rem 0; padding-right: 1.5rem; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-card { position: relative; flex-shrink: 0; min-width: 160px; height: 220px; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); background-color: #f3f4f6; cursor: pointer; transition: transform 0.3s ease; }
.marquee-card:hover { transform: scale(1.05); z-index: 10; }
.marquee-card img { width: auto; height: 100%; display: block; }

.image-caption { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); display: flex; align-items: flex-end; padding: 1rem; opacity: 1; pointer-events: none; z-index: 10; }
.image-caption p { color: white; font-size: 0.875rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.auction-card { transition: all 0.3s ease; border: 1px solid transparent; }
.auction-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); border-color: rgba(99, 185, 255, 0.3); }
.auction-badge { background-color: #2e9aff; color: white; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; position: absolute; top: 10px; right: 10px; z-index: 10; border-radius: 2px; }
.auction-item { transition: opacity 0.3s ease, transform 0.3s ease; }
.auction-item-img { object-fit: contain !important; width: 100%; height: 100%; background: #f3f4f6; }

@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 40s linear infinite; }
.marquee-content { display: flex; width: max-content; flex-wrap: nowrap; white-space: nowrap; }

.bg-white-90 { background-color: rgba(255, 255, 255, 0.9); }
.privacy-content h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #1a202c; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; }
.privacy-content p, .privacy-content li { margin-bottom: 1rem; line-height: 1.75; color: #4a5568; }
.privacy-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }

/* 懒加载与适配器 */
.image-container-adaptive { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background-color: #f3f4f6; overflow: hidden; }
.tour-image-adaptive { width: 100%; height: 100%; object-fit: cover; display: block; }
.lazy-image { opacity: 0; transition: opacity 0.6s ease-out; position: relative; z-index: 1; }
.lazy-image.loaded { opacity: 1; }

/* ==========================================================================
   7. 品牌色与通用工具类 (Brand Colors) - [新增修复]
   ========================================================================== */
.bg-brand-blue { background-color: #2e9aff !important; }
.text-brand-blue { color: #2e9aff !important; }
.hover-text-brand-blue:hover { color: #2e9aff !important; }