/* ========================================== */
/* 全局基础样式与 Apple 官网级质感设置 */
/* ========================================== */

/* 🌟 移动端汉堡菜单样式修复 - 使用 !important 强制覆盖 Tailwind CDN 默认生成的类，确保菜单在手机上能正常定位、弹出和隐藏 */
#mobile-menu {
    right: 16px !important; /* 距离屏幕右侧 16px 边距 */
    top: 88px !important; /* 距离屏幕顶部 88px，正好避开固定的顶部导航栏 */
    width: min(280px, calc(100vw - 32px)) !important; /* 限制菜单最大宽度，防止在小屏幕上溢出屏幕边缘 */
    max-width: calc(100vw - 32px) !important;
    left: auto !important; /* 清除默认的 left 定位，强制靠右对齐 */
    transform-origin: top right !important; /* 设定缩放动画的基准点为“右上角”，这样菜单弹出时会有从按钮处展开的视觉效果 */
}

/* 菜单展开时的状态：完全不透明、允许鼠标/触摸点击、可见、采用 flex 布局对齐元素 */
#mobile-menu[data-menu-open="true"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
}

/* 菜单收起时的状态：完全透明、禁止任何点击交互、隐藏不占据空间 */
#mobile-menu[data-menu-open="false"],
#mobile-menu {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important;
}

/* 移动端菜单弹出时的半透明全屏背景遮罩设定 */
#mobile-menu-overlay {
    right: 0 !important;
    left: 0 !important;
    top: 80px !important; /* 同样贴着导航栏底部开始往下铺满 */
}

/* 遮罩展开：可见并允许点击（用户点击遮罩空白处即可关闭菜单） */
#mobile-menu-overlay[data-menu-open="true"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
}

/* 遮罩收起：隐藏并禁止交互 */
#mobile-menu-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important;
}

/* 网页全局基础设定 */
body { 
    /* 使用苹果原生系统字体栈... */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    /* ⚠️ 已经删除了 overflow-x: hidden; */
    background-color: #fbfbfd; 
    color: #1d1d1f; 
}

/* 导航栏毛玻璃特效 (Apple 风格) */
.apple-nav { 
    background: rgba(255, 255, 255, 0.65); /* 半透明白色背景 */
    backdrop-filter: saturate(180%) blur(40px); /* 核心魔法！高斯模糊+饱和度提升，打造类似 iOS 系统的高级通透毛玻璃效果 */
    -webkit-backdrop-filter: saturate(180%) blur(40px); /* 兼容 Safari 浏览器的毛玻璃渲染 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 底部加一条极细极浅的半透明分割线，增加立体层次感 */
}

/* 360度产品交互区域：隐藏系统默认的鼠标指针，完全交由我们在 JS 里写的 GSAP 高级魔法光标来接管 */
.scrub-section { 
    cursor: none; 
}

/* ========================================== */
/* 右侧产品切换器 (悬浮小圆点) 精密交互设置 */
/* ========================================== */
.product-btn {
    position: relative; /* 设置相对定位，为下面的 ::after 伪元素提供绝对定位的参考坐标系 */
}

/* 🌟 UX (用户体验) 优化魔法：创建一个向四周外扩 20px 的隐形“点击热区” */
/* 解决小圆点太小、用户的鼠标或手指很难精确点中的痛点。虽然视觉上看不见它，但碰到了这个扩大后的区域就算点击。 */
.product-btn::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    border-radius: 50%; /* 隐形热区也是圆形的 */
    cursor: pointer; /* 鼠标移入热区就会变成小手 */
}

/* 按钮被选中（当前正在展示的产品）时的发光激活特效 */
.product-btn.active {
    border-color: #f10c0c; /* 边框变成色 */
    background-color: rgba(226, 28, 28, 0); /* 内部填充色 */
    transform: scale(1.1); /* 视觉上微微放大 1.1 倍，突出当前产品，引导视觉焦点 */
} 

/* ========================================== */
/* 🌟 魔法光标悬浮交互特效 (实心毛玻璃光晕版) */
/* ========================================== */

/* 当光标移动到可点击元素（如按钮、小圆点）上时的状态（.is-hovering 类名由 JS 动态添加） */
#magic-cursor.is-hovering {
    width: 40px !important; /* 光标瞬间膨胀放大到 60px 宽 */
    height: 40px !important; /* 光标瞬间膨胀放大到 60px 高，形成一个包围底座的形态 */
    border-color: transparent !important; /* 1. 彻底干掉那根生硬廉价的实线边框 */
    background-color: rgba(243, 239, 239, 0.137) !important; /* 2. 填充一层极其通透的浅色底色 */
    backdrop-filter: blur(6px) !important; /* 3. 保留并稍微加重毛玻璃质感，像磨砂玻璃一样温柔地罩在按钮上 */
    box-shadow: 0 4px 24px rgba(240, 235, 235, 0.2) !important; /* 4. 增加一层微弱的底部发光阴影，增强 3D 悬浮感 */
}

/* 悬浮交互时，魔法光标中心原来的那个“小白点”平滑缩小并隐藏，把中心位置让给底部的真实按钮 */
#magic-cursor.is-hovering > div {
    transform: scale(0) !important; /* 尺寸缩放到 0，平滑消失 */
    opacity: 0 !important; /* 透明度变为 0（彻底不可见） */
}
/* 当鼠标放在核心大按钮上时，优雅地隐藏魔法光标，把舞台让给按钮 */
#magic-cursor.is-hidden {
    opacity: 0 !important;
}
#magic-cursor.is-hidden > div {
    opacity: 0 !important;
}
/* ========================================== */
/* 🌟 智能环境感知导航栏 (自动黑白反色机制) */
/* ========================================== */

/* 1. 默认状态 (页面在白底/浅色背景)：文字深色，胶囊深色玻璃 */
#desktop-nav-menu {
    color: #1d1d1f; /* 基础文字深灰 */
    transition: color 0.4s ease; /* 文字颜色切换时的柔和过渡 */
}
#nav-capsule {
    background-color: rgba(0, 0, 0, 0.04) !important; /* 极浅的高级黑玻璃 */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* 2. 深色模式状态 (当 JS 探测到下方是黑色背景时触发)：文字纯白，胶囊亮色玻璃 */
#desktop-nav-menu.is-dark {
    color: #ffffff !important; 
}
#desktop-nav-menu.is-dark #nav-capsule {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 亮透白玻璃 */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
/* ========================================== */
/* 🌟 高级导航栏下划线 (页面滚动位置追踪指示器) */
/* ========================================== */
.desktop-nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 20px;
    right: 20px;
    height: 1px;
    background-color: currentColor;
    border-radius: 2px;
    transform: scaleX(0) translateZ(0); 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* 🌟 只保留 JS 滚动追踪的激活状态。把 :hover 删掉，鼠标指上去就不会再有下划线了！ */
.desktop-nav-link.is-active-nav::after {
    transform: scaleX(1) translateZ(0);
}

/* ========================================== */
/* 🌟 终极修复：电脑端左侧筛选栏完美吸顶 (防遮挡) */
/* ========================================== */
@media (min-width: 1024px) {
    #filter-sidebar {
        position: -webkit-sticky !important; /* 兼容 Safari */
        position: sticky !important;         /* 开启吸顶 */
        top: 100px !important;               /* 核心：在距离顶部 100px 的地方稳稳停住，完美避开导航栏 */
        max-height: calc(100vh - 120px) !important; /* 限制最高高度 */
        align-self: flex-start !important;   /* 核心开关：允许 flex 布局下的子元素吸顶 */
        overflow-y: auto !important;         /* 内部内容太多时出现独立滚动条 */
    }
}
/* 彻底隐藏移动端丑陋的滚动条，保留丝滑滚动功能 */
::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* ========================================== */
/* 🌟 手机端菜单激活状态的小下划线 */
/* ========================================== */
.is-active-mobile .mobile-nav-text {
    color: #cc292b !important; /* 文字变红 */
}
.mobile-nav-text::after {
    content: '';
    position: absolute;
    bottom: -6px; /* 🌟 呼吸感：距离文字更远一点 (从 -4px 改为 -6px) */
    left: 0;
    width: 100%;
    height: 1px; /* 🌟 高级感核心：从 2px 砍到 1px，极致纤细 */
    background-color: #cc292b; /* 保持品牌红 */
    /* 1px 的线不需要圆角，直接去掉 border-radius，更显干练锐利 */
    transform: scaleX(0); 
    transform-origin: left; 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.is-active-mobile .mobile-nav-text::after {
    transform: scaleX(1); /* 激活时展开红线 */
}