/* ============================================================================
   COMPONENT: FULLSCREEN MENU
   Dependency: design-tokens.css (必须先加载设计令牌)
   Structure: BEM (Block__Element--Modifier)
   ============================================================================ */

/* 1. COMPONENT TOKENS (Local Scope)
   ------------------------------------------------------------------
   我们将组件的属性映射到全局 Design Tokens。
   如果未来设计系统调整，这里会自动继承变化。
   ------------------------------------------------------------------
*/
:root {
  /* [Color] */
  /* 使用全局定义的背景色或特定遮罩色 */
  --menu-bg-backdrop: rgba(30, 30, 30, 0.5); /* 稍微加深以保证可读性 */
  --menu-text-color: var(--color-bg-surface); /* 反色：在深色背景上使用浅色文字 */
  --menu-accent-color: var(--color-primary);  /* 使用全局品牌主色 */
  
  /* [Button Styling] */
  --trigger-bg: var(--color-primary);
  --trigger-line: var(--color-text-main);
  
  /* [Dimensions & Spacing] */
  /* 按钮大小：通常固定，保证手指触控区域 (44px+) */
  --trigger-size: 56px;
  /* 按钮边距：与全局页面边距一致，确保视觉对齐 */
  --trigger-offset: var(--space-md);
  
  /* 菜单项间距：使用全局的大号间距 */
  --menu-item-gap: var(--space-md);
  
  /* [Typography] */
  /* 菜单字体：可以使用特定的展示字体，或全局标题字体 */
  --menu-font-family: var(--font-brand), var(--font-sans);
  --menu-font-size: var(--text-2xl); /* 对应全局定义的 H1/Display 级别流体字号 */

  /* [Z-Index] - 引用全局层级系统 */
  --z-index-menu: var(--layer-overlay);
  --z-index-trigger: var(--layer-modal); /* 确保按钮在最上层 */
}

/* 2. BLOCK: MENU TRIGGER
   ------------------------------------------------------------------
*/
.menu-trigger {
  /* Position: 跟随全局页面边距 */
  position: fixed;
  top: var(--trigger-offset);
  right: var(--trigger-offset);
  z-index: var(--z-index-trigger);
  
  width: var(--trigger-size);
  height: var(--trigger-size);
  
  background-color: var(--trigger-bg);
  border: none;
  cursor: pointer;
  
  /* 增加点击反馈的过渡 */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-trigger:hover {
  transform: scale(1.05);
}

.menu-trigger:active {
  transform: scale(0.95);
}

/* Icon Lines */
.menu-trigger__icon,
.menu-trigger__icon::before,
.menu-trigger__icon::after {
  position: absolute;
  left: 10%; /* 稍微收缩线条宽度，更精致 */
  width: 80%;
  height: 2px;
  background-color: var(--trigger-line);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-trigger__icon {
  top: 50%;
  background-color: transparent; /* 中心定位点透明 */
}

.menu-trigger__icon::before {
  content: '';
  top: 0;
  transform: rotate(90deg);
}

.menu-trigger__icon::after {
  content: '';
  top: 0;
  transform: rotate(0deg);
}

/* State: Active (X Close) */
.menu-trigger.is-active .menu-trigger__icon::before {
  left: 0%;
  width: 100%;
  transform: rotate(45deg);
}

.menu-trigger.is-active .menu-trigger__icon::after {
  left: 0%;
  width: 100%;
  transform: rotate(-45deg);
}


/* 3. BLOCK: FULLSCREEN MENU
   ------------------------------------------------------------------
*/
.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-menu);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: var(--menu-bg-backdrop);
  backdrop-filter: blur(12px); /* 稍微增加模糊度提升质感 */
  -webkit-backdrop-filter: blur(12px);
  
  /* Animation Basics */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), /* 更平滑的 ease-out */
    visibility 0.4s step-end; /* 确保动画结束才隐藏 */
}

/* State: Open */
.fullscreen-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0%);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.7, 0, 0.2, 1),
    visibility 0s step-start; /* 立即显示 */
}


/* 4. ELEMENTS: CONTENT
   ------------------------------------------------------------------
*/
.fullscreen-menu__list {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  
  /* 使用 Flex 列布局来控制垂直间距 */
  display: flex;
  flex-direction: column;
  gap: var(--menu-item-gap);
}

.fullscreen-menu__item {
  display: block;
  overflow: hidden;
}

.fullscreen-menu__link {
  position: relative;
  display: inline-block;
  padding: 0 var(--space-xs); /* 使用全局小间距 */
  
  font-family: var(--menu-font-family);
  font-size: var(--menu-font-size);
  line-height: var(--leading-tight); /* 标题通常行高较小 */
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--menu-text-color);
}

/* 装饰性下划线/进度条 */
.fullscreen-menu__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    /* 高度也应该相对字号，或者使用固定细线，这里保持原设计的粗线条风格 */
    height: 0.4em;
    background: var(--menu-accent-color);
    z-index: 0;
    opacity: 0.8;
    
    transform: translateY(-50%) scaleX(0);
}

/* 当鼠标悬停在链接上时 */
.fullscreen-menu__link:hover::before {
  /* 1. 展开 */
  transform: translateY(-50%) scaleX(1);
  
  /* 2. 设定展开方向：从左向右 */
  transform-origin: left;
  
  /* 3. 过渡动画 */
  transition: transform 0.3s ease;
}