/* Main CSS - 统一协调修复版 */
@import url('reset.css');
@import url('variables.css');
@import url('nav.css');
@import url('hero.css');
@import url('products.css');
@import url('categories.css');
@import url('contact.css');
@import url('footer.css');

/* ============================================
   1. 全局层级系统 (Z-Index System)
   规定：
   -1 : 雪花背景/Canvas
    1 : 页面内容 (#scroll-wrapper)
   50 : 导航栏 (Nav)
   100: 地图加载提示文字
   999: 图片预览弹窗 (Dialog)
   ============================================ */

/* ============================================
   1. 层级修正 (Z-Index Hierarchy)
   让内容永远浮在背景之上，就像首页一样
   ============================================ */

/* 背景：彻底打入冷宫 */
.background-layer,
.gradient-overlay,
#snow-background, 
.snow-background {
    position: fixed !important;
    inset: 0;
    z-index: -1 !important; /* 负数，确保在一切内容之下 */
    pointer-events: none !important; /* 绝对禁止挡鼠标 */
}

.gradient-overlay {
    background: linear-gradient(to bottom, 
        #111827 0%,  /* gray-900 */
        #000000 50%, /* black */
        #0a0a0a 100% /* luxury-black */
    );
}

#snow-background,
.snow-background {
    opacity: 0.8;
}

/* 内容容器：提升地位 */
#scroll-wrapper {
    position: relative;
    z-index: 10; /* 只要是正数，就比背景高 */
    width: 100%;
    height: auto;
    background: transparent;
    overflow: visible; /* 防止裁剪阴影 */
    transition: filter 0.3s ease;
}

/* 导航栏：高于内容 */
nav {
    z-index: 50;
}

/* ============================================
   2. 滚动与显示修复 (防白屏)
   ============================================ */

html {
    height: 100%;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; /* 回归原生 */
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
    display: none;
}

body {
    overflow: visible !important;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: var(--font-family-primary);
}

/* ============================================
   2. 翻页区块设置 (修复导航栏遮挡问题)
   ============================================ */

.snap-section {
    /* 顶部对齐 */
    scroll-snap-align: start;
    
    /* 强制翻页 */
    scroll-snap-stop: always;
    
    /* 默认高度 */
    min-height: 100vh;
    
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    
    overflow: visible;
    background: transparent;

    /* 🔥 核心修复：给所有页面顶部加 100px 的内边距 🔥 */
    /* 这样内容就会自动往下挪，不会被导航栏挡住 */
    padding-top: 100px; 
    padding-bottom: 50px; /* 底部也留点呼吸感 */
}

/* 
   🔥 特殊处理：首页 (Hero) 不需要避让 🔥
   首页通常是全屏大图居中，且导航栏在首页可能是透明的，
   或者首页内容本身就是垂直居中的，加了 padding 反而会歪。
*/
.hero.snap-section {
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .snap-section {
        min-height: 100dvh;
    }
    html {
        overflow-x: clip; 
    }
}

/* ============================================
   6. 场景式过渡动画系统 (Scene Transition)
   ============================================ */

/* 1. 基础样式与过渡 */
.reveal-item {
    /* 默认状态：完全可见，无位移 */
    opacity: 1;
    transform: none;
    
    /* 过渡效果只在“状态变化”时应用，由 JS 切换状态类 */
    transition: 
        opacity 0.8s ease-out,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        
    will-change: opacity, transform;
}

/* 2. 入场前状态 (is-active 之前) */
/* 页面尚未激活时，元素在下方隐藏，避免一开始就全部出现 */
.snap-section:not(.is-active) .reveal-item {
    opacity: 0;
    transform: translateY(80px); /* 从下方 80px 处准备入场 */
    pointer-events: none;
}

/* 特殊处理：图片从左侧滑入 */
.snap-section:not(.is-active) .reveal-image {
    transform: translateX(-100px) scale(0.9); /* 从左侧 -100px 处准备 */
    opacity: 0;
}

/* 3. 延迟控制 */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* 4. 首页动画特殊处理：保持简单的淡入上浮效果 */
.hero:not(.is-active) .reveal-item {
    opacity: 0;
    transform: translateY(30px);
}

/* ============================================
   3. 交互修正 (确保卡片能点)
   ============================================ */

.product-card, .category-card {
    position: relative;
    z-index: 20; /* 比普通文字更高 */
    cursor: pointer;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.01); /* 加一个极其微弱的背景，有时候能帮助浏览器捕获点击 */
}

/* 图片预览时的模糊背景 */
body.preview-open #scroll-wrapper {
    filter: brightness(0.8) blur(4px);
    pointer-events: none;
}

body.preview-open {
    overflow: hidden !important;
}

/* ============================================
   3. 图片预览弹窗 (Dialog) - 缩放动画版
   ============================================ */

.image-preview-dialog {
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    z-index: 2147483647 !important;
}

.image-preview-dialog:not([open]) {
    display: none;
}

/* 打开状态：全屏覆盖，最高层级 - 安全区布局 */
.image-preview-dialog[open] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    
    /* 关键修改：在弹窗左右加 padding，强行把内容往中间挤，给按钮留出安全区 */
    padding: 0 100px;
    box-sizing: border-box; /* 确保 padding 不会撑大 dialog */
    
    display: flex !important; /* 强制显示 */
    align-items: center;
    justify-content: center;
    
    z-index: 2147483647 !important; /* 全站最高 */
    pointer-events: auto !important; /* 必须能交互 */
    border: none;
    background: transparent;
    overflow: hidden;
    
    /* 关键：确保 dialog 本身不会创建新的堆叠上下文，影响子元素的 fixed 定位 */
    transform: none !important;
    will-change: auto;
}

/* 遮罩层：带渐变过渡 */
.image-preview-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
}

.image-preview-dialog.is-open::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

/* === 图片容器：禁止拦截点击 === */
.image-preview-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10000;
    pointer-events: none; /* 关键！容器不挡鼠标 */
}

/* === 【新增】移动舞台：专门用来做动画的容器 === */
.image-wrapper {
    position: relative;
    /* 固定宽高比：16:9（可根据实际需求调整，如 4:3、3:2 等） */
    width: 80vw;
    max-width: 1400px;
    aspect-ratio: 16 / 9; /* 固定比例，确保所有图片容器大小一致 */
    margin: 0 auto;
    
    /* 关键：给舞台加上动画效果 */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease;
    will-change: transform, opacity;
    
    /* 确保容器尺寸稳定，避免切换时跳动 */
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden; /* 裁剪超出部分 */
}

/* === 图片样式：固定尺寸裁剪 === */
.image-preview-inner img {
    /* 关键：图片填满整个固定容器，使用 cover 裁剪 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* 裁剪图片以填满容器，保持比例 */
    pointer-events: auto; /* 如果需要右键保存 */
    
    /* 视觉样式 */
    border: 3px solid var(--color-luxury-gold);
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.8),
        0 0 20px rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.9);
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    
    /* 关键：图片自己不再动了！由父容器 image-wrapper 控制动画 */
    transition: none !important;
    transform: none !important;
    opacity: 1 !important; /* 永远不透明，由父容器控制 */
}

/* 移动端适配：缩小容器尺寸 */
@media (max-width: 768px) {
    .image-wrapper {
        width: 90vw;
        aspect-ratio: 4 / 3; /* 移动端使用 4:3 比例 */
    }
}

/* ============================================
   图片预览按钮 - 已完全移除
   ============================================ */

/* ============================================
   4. 地图加载提示 (修复不消失问题)
   ============================================ */
.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* 高于地图iframe */
    background: rgba(10, 10, 10, 0.9);
    color: var(--color-secondary);
    padding: 10px 20px;
    border-radius: 4px;
    transition: opacity 0.5s;
    pointer-events: none;
}

.map-loading.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

/* ============================================
   5. 背景材质感 (噪点纹理)
   ============================================ */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 5;
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* ============================================
   6. 滚动防抖动补丁
   ============================================ */
body.is-animating,
body.is-animating html,
body.is-animating .snap-section {
    scroll-snap-type: none !important;
    scroll-snap-stop: normal !important;
    scroll-behavior: auto !important;
    pointer-events: none;
}

.map-footer {
    scroll-snap-align: end;
}