@layer utilities {
  /* 渐变背景工具类 */
  .bg-gradient-top {
    @apply bg-gradient-to-b from-imx-gray-light to-imx-gray-medium;
  }
  /* 移动端菜单动画 */
  .menu-enter {
    transform: translateX(100%);
  }
  .menu-enter-active {
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
}

/* 全局设置默认中文字体 */
body {
  font-family: 'Source Han Sans CN', system-ui, sans-serif;
}
/* 移动端菜单过渡效果 */
.mobile-menu {
  transition: transform 0.3s ease-in-out;
}

/* 基础粘性定位设置 */
#mainNav {
    position: sticky;
    top: 0;
    z-index: 1000; /* 确保导航栏在其他内容上方 */
    background-color: transparent; /* 初始透明背景 */
}

/* 滚动时添加的样式类 */
#mainNav.scrolled {
    background-color: rgba(255, 255, 255, 0.85); /* 白色半透明背景 */
    backdrop-filter: blur(5px); /* 可选：添加模糊效果增强视觉体验 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选：添加轻微阴影 */
}

/* 确保下拉菜单在半透明背景上正常显示 */
#mainNav .group .absolute {
    z-index: 1001; /* 确保下拉菜单在导航栏上方 */
}