/* 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('modal.css');
@import url('contact.css');
@import url('services.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 处准备入场 */
}

/* 特殊处理：图片从左侧滑入 */
.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;
    /* 取消固定宽高及比例，改用自适应 */
    width: auto;
    height: auto;
    /* PC端限制：再次缩小一半，更精致 */
    max-width: 50vw;
    max-height: 50vh;
    min-width: 300px;
    /* 最小保护 */

    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;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* === 图片样式：固定尺寸裁剪 === */
.image-preview-inner img {
    /* 关键：图片自适应舞台，不再强制填满导致的裁剪 */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    /* 相对定位，不再绝对定位覆盖 */
    position: relative;

    object-fit: contain;
    /* 确保完整显示 */
    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: auto;
        max-width: 95vw;
        /* 移动端屏幕小，可以宽一点 */
        max-height: 85vh;
        height: auto;
    }
}

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

/* ============================================
   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;
}