/* ==================== H+美术馆首页样式 ==================== */
/* 本文件包含首页特定的样式和布局 */

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
        }

        body {
            font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
            background: white;
            overflow-x: hidden;
        }

        /* 主容器 - 响应式布局 */
        .main-wrapper {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            position: relative;
            background: white;
        }

        /* 1200px-1920px：流体布局（替代有害的transform scale） */
        @media screen and (min-width: 1200px) and (max-width: 1920px) {
            .main-wrapper {
                width: 100vw;
                max-width: 100vw;
                margin: 0;
                position: relative;
                /* 移除transform scale，使用自然流体布局 */
            }
            
            body {
                min-height: auto;
                /* 移除缩放相关的高度计算 */
            }
            
            /* Hero区域流体适配 */
            .hero {
                width: 100vw;
                height: clamp(600px, calc(100vh - 110px), 970px);
                max-height: 970px;
                min-height: 600px;
                position: relative;
                top: 110px;
            }
            
            /* 展览卡片流体布局 */
            .exhibitions-cards-container {
                width: calc(100vw - 100px);
                margin: 0 auto;
                overflow: hidden;
            }
            
            .exhibition-card {
                width: clamp(300px, 28.85vw, 553px);
                height: clamp(400px, 29.63vw, 568px);
                position: relative;
            }
            
            .exhibition-card img.card-image {
                width: 100%;
                height: clamp(200px, 18.9vw, 363px);
                object-fit: cover;
            }
            
            /* 箭头按钮流体定位 */
            .hero-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: clamp(36px, 2.5vw, 48px);
                height: clamp(36px, 2.5vw, 48px);
            }
            
            .hero-arrow.left {
                left: clamp(30px, 2.7vw, 52px);
            }
            
            .hero-arrow.right {
                right: clamp(30px, 2.7vw, 52px);
            }
            
            /* 指示器流体定位 */
            .hero-dots {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: clamp(20px, 1.56vw, 30px);
                display: flex;
                gap: clamp(16px, 1.25vw, 24px);
            }
            
            /* 内容区域流体高度 */
            .opening-hours,
            .exhibitions,
            .about,
            .location {
                width: 100vw;
                height: auto;
                min-height: clamp(600px, 41.67vw, 800px);
                position: relative;
                padding: clamp(48px, 3.33vw, 80px) 0;
            }
            
            /* Footer流体适配 */
            .footer {
                width: 100vw;
                height: auto;
                min-height: clamp(300px, 21.8vw, 419px);
                position: relative;
            }
            
            /* 字体大小流体适配 */
            .title-35 {
                font-size: clamp(24px, 1.82vw, 35px);
            }
            
            .title-30 {
                font-size: clamp(20px, 1.56vw, 30px);
            }
            
            .text-18 {
                font-size: clamp(14px, 0.94vw, 18px);
            }
            
            /* 间距流体适配 */
            .exhibitions-cards-wrapper {
                gap: clamp(40px, 4.17vw, 80px);
            }
        }

        /* 1200px-1920px 但屏幕高度小于900px时，减小banner */
        @media screen and (max-width: 1920px) and (min-width: 1200px) and (max-height: 900px) {
            .hero {
                height: calc(100vh - 110px); /* 小屏幕高度下自适应 */
                max-height: 800px;
            }
        }

        /* 大于1920px：居中显示，明确取消所有缩放 */
        @media screen and (min-width: 1921px) {
            html {
                font-size: 16px;
            }
            body {
                min-height: auto;
                transform: none;
                zoom: 1;
            }
            .main-wrapper {
                width: 1920px !important;
                max-width: 1920px !important;
                min-width: 1920px !important;
                transform: none !important;
                zoom: 1;
            }
        }
        
        /* 小于1200px */
        @media screen and (max-width: 1199px) {
            .main-wrapper {
                width: 100%;
                max-width: 100%;
                transform: none;
            }
        }

        /* 小于1200px：响应式流式布局 */
        @media (max-width: 1199px) {
            .main-wrapper {
                width: 100%;
            }

            .header {
                width: 100%;
                padding: 0 20px;
            }

            .header-logo {
                width: 80px;
                height: 60px;
                left: 20px;
            }

            .header-nav {
                display: none;
            }

            .header-lang {
                right: 20px;
                top: 15px;
            }

            .header-lang-divider {
                display: none;
            }

            .hero {
                width: 100%;
                height: 60vh;
                min-height: 400px;
            }

            .hero-arrow {
                display: none;
            }

            .hero-dots {
                left: 50%;
                transform: translateX(-50%);
            }

            .opening-hours,
            .exhibitions,
            .about,
            .location,
            .footer {
                width: 100%;
                height: auto;
                padding: 60px 20px;
                position: relative;
                top: auto !important;
            }

            .opening-hours > *,
            .exhibitions > *,
            .about > *,
            .location > *,
            .footer > * {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 20px;
            }

            .exhibition-card {
                width: 100%;
                max-width: 500px;
                margin: 0 auto 30px;
                position: relative !important;
                left: auto !important;
            }

            .title-35 {
                font-size: clamp(24px, 5vw, 35px);
            }

            .title-30 {
                font-size: clamp(20px, 4vw, 30px);
            }

            .text-18 {
                font-size: clamp(14px, 3vw, 18px);
            }
            
            /* 响应式卡片间距 */
            .exhibitions-cards-wrapper {
                gap: clamp(20px, 4vw, 80px);
            }
        }

        /* Hero轮播 */
        .hero {
            width: 100%;
            max-width: 1920px;
            height: calc(100vh - 110px); /* 视口高度减去header，自适应 */
            max-height: 970px; /* 最大高度970px */
            min-height: 600px; /* 最小高度600px */
            position: relative; /* 改为relative，避免绝对定位导致的布局问题 */
            margin: 0 auto; /* 居中 */
            overflow: hidden;
            z-index: 2;
            background: white; /* 白色背景 */
        }

        .hero-slide {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 0.8s ease;
            background: white; /* 添加白色背景 */
            z-index: 1; /* 默认层级 */
        }

        .hero-slide.active {
            opacity: 1;
            z-index: 2; /* 激活的banner在上层，确保能被点击 */
        }

        .hero-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 填满容器 */
            object-position: center; /* 居中显示 */
            display: block;
            pointer-events: none; /* 允许点击穿透到父元素 */
        }

        /* 淡入时模糊到清晰 */
        .hero-slide.active img {
            animation: clarifyImage 2.5s ease-out forwards;
        }

        @keyframes clarifyImage {
            0% {
                filter: blur(14px);
                transform: scale(1.04);
            }
            100% {
                filter: blur(0);
                transform: scale(1);
            }
        }

        /* 淡出时清晰到模糊 */
        .hero-slide.fade-out {
            z-index: 0; /* 淡出的banner在最底层 */
            pointer-events: none; /* 淡出时禁用点击 */
        }
        
        .hero-slide.fade-out img {
            animation: blurImage 0.8s ease-in forwards;
        }

        @keyframes blurImage {
            0% {
                filter: blur(0);
                transform: scale(1);
            }
            100% {
                filter: blur(8px);
                transform: scale(1.02);
            }
        }

        .hero-arrow {
            position: absolute;
            top: 50%; /* 垂直居中 */
            transform: translateY(-50%); /* 居中偏移 */
            width: 48px;
            height: 48px;
            cursor: pointer;
            background: transparent;
            border: none;
            z-index: 10;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .hero-arrow:hover {
            opacity: 1;
            transform: translateY(-50%) scale(1.2); /* 保持居中的同时放大 */
        }

        .hero-arrow.left {
            left: 52px;
        }

        .hero-arrow.right {
            right: 52px;
        }

        .hero-arrow img {
            width: 100%;
            height: 100%;
        }

        .hero-dots {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
            display: flex;
            gap: 24px; /* 增大间距 */
            z-index: 10;
        }

        .hero-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #999999; /* 默认灰色 */
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hero-dot.active {
            width: 10px;
            height: 10px;
            background: #3D3D3D; /* 深灰实心圆 */
            box-shadow: 0 0 0 3px rgba(211, 211, 211, 0.4); /* 减小外圈 */
        }

        /* 移除视差滚动 - 保持固定布局 */
        .parallax-section {
            position: absolute;
            width: 1920px;
        }

        /* 开放时间 */
        .opening-hours {
            width: 1920px;
            height: 656px;
            position: absolute;
            left: 0;
            top: min(calc(100vh), 1080px); /* 紧贴banner：视口高度或1080px取小值 */
            background: #E9E9E9;
            z-index: 100;
        }

        /* CSS绘制装饰线条（替代9.svg） */
        .opening-hours-divider {
            position: absolute;
            left: 60px;
            top: 132.5px;
            width: 1800px;
            height: 1px;
            background: #E0E0E0;
        }

        /* 展览活动 */
        .exhibitions {
            width: 1920px;
            height: 800px;
            position: absolute;
            left: 0;
            top: min(calc(100vh + 656px), 1736px); /* opening结束位置 */
            background: white;
            z-index: 100;
        }

        /* 展览卡片容器 */
        .exhibitions-cards-container {
            position: absolute;
            left: 49px;
            top: 158px;
            width: 1820px; /* 与底线同宽 */
            overflow: hidden;
        }

        .exhibitions-cards-wrapper {
            display: flex;
            gap: 80px; /* 固定间距80px */
            transition: transform 0.5s ease; /* 添加平滑过渡动画 */
        }

        .exhibition-card {
            position: relative; /* 改为相对定位 */
            flex-shrink: 0;
            width: 553px;
            height: 568px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .exhibition-card:hover {
            transform: translateY(-10px);
        }

        .exhibition-card img.card-image {
            width: 552px;
            height: 363px;
            pointer-events: none; /* 允许点击穿透到父元素 */
        }

        .exhibition-card .card-tag {
            position: absolute;
            left: 1px;
            top: 381px;
            display: flex;
            align-items: center;
            gap: 4px;
            pointer-events: none; /* 允许点击穿透到父元素 */
        }

        .exhibition-card .card-title {
            position: absolute;
            left: 0;
            top: 418px;
            width: 553px; /* 限制宽度 */
            pointer-events: none; /* 允许点击穿透到父元素 */
            overflow: hidden; /* 隐藏溢出 */
            white-space: nowrap; /* 不换行 */
            text-overflow: ellipsis; /* 显示省略号 */
        }

        .exhibition-card .card-date {
            position: absolute;
            left: 0;
            top: 468px;
            pointer-events: none; /* 允许点击穿透到父元素 */
        }

        /* 展览区域左右按钮 */
        .exhibitions-arrow {
            position: absolute;
            top: 54px; /* 与标题对齐 */
            width: 48px;
            height: 48px;
            cursor: pointer;
            background: transparent;
            border: none;
            z-index: 10;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .exhibitions-arrow:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .exhibitions-arrow.left {
            left: 1756px; /* 根据设计稿位置 */
        }

        .exhibitions-arrow.right {
            left: 1820px; /* 根据设计稿位置 */
        }

        .exhibitions-arrow img {
            width: 100%;
            height: 100%;
        }
        
        /* 底部指示器容器 */
        .exhibitions-indicator {
            position: absolute;
            left: 50px;
            top: 719px;
            width: 1820px;
            height: 2px;
        }
        
        /* 浅色固定底线 */
        .exhibitions-indicator-base {
            position: absolute;
            left: 0;
            top: 1px;
            width: 1820px;
            height: 1px;
            background: #E0E0E0;
        }
        
        /* 深色动态指示线 */
        .exhibitions-indicator-active {
            position: absolute;
            left: 0;
            top: 0;
            width: 553px; /* 单张卡片宽度 */
            height: 2px;
            background: #000000;
            transition: none; /* 无过渡动画 */
        }

        /* 箭头按钮禁用状态 */
        .hero-arrow.disabled,
        .exhibitions-arrow.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* 滚动触发动画 - 初始隐藏状态 */
        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* 滚动触发动画 - 激活状态 */
        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero图片保持视差效果 */
        .parallax-hero {
            transition: none;
        }

        /* 关于我们 */
        .about {
            width: 1920px;
            height: 800px;
            position: absolute;
            left: 0;
            top: min(calc(100vh + 1456px), 2536px); /* exhibitions结束位置 */
            background: #E9E9E9;
            z-index: 100;
        }

        /* 交通位置 */
        .location {
            width: 1920px;
            height: 800px;
            position: absolute;
            left: 0;
            top: min(calc(100vh + 2256px), 3336px); /* about结束位置 */
            background: white;
            z-index: 100;
        }

        /* Footer */
        .footer {
            width: 1920px;
            height: 419px;
            position: absolute;
            left: 0;
            top: min(calc(100vh + 3056px), 4136px); /* location结束位置 */
            background: #1a1a1a;
            z-index: 100;
        }

        /* 通用样式 */
        .title-35 {
            font-size: 35px;
            font-weight: 400;
            color: black;
        }

        .title-30 {
            font-size: 30px;
            font-weight: 400;
            color: black;
        }

        .text-18 {
            font-size: 18px;
            font-weight: 400;
            color: black;
        }

        .text-16 {
            font-size: 16px;
            font-weight: 400;
            color: #9E9E9E;
        }

        .text-14 {
            font-size: 14px;
            font-weight: 400;
            color: black;
        }