/**
 * VechooolHeader 共用样式（以首页 / about.css + index.css 为准）
 * /projects、/price、/contact 等子页只保留页面布局差异，header 不再各自重写。
 */

/* 全站：菜单/登录默认透明，is-ready 后淡入 */
#header-right-menu-btn,
#header-right-talk-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

html:not(.is-ready) #header-right-menu-btn,
html:not(.is-ready) #header-right-talk-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.is-ready #header-right-menu-btn,
html.is-ready:not(.is-auth) #header-right-talk-btn {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.2s;
}

#header.--menu-opened #header-container,
#header.--user-menu-opened #header-container {
  overflow: visible !important;
}

/* Mobile menu overlay: keep logo / header controls above #header-background scrim */
@media (max-width: 812px) {
  #header-container {
    position: relative;
  }

  #header-background {
    z-index: 0;
  }

  #header-logo,
  #header-leading,
  #header-right {
    position: relative;
    z-index: 2;
  }

  #header-menu {
    z-index: 1;
    top: 80px !important;
  }

  #header-user-menu {
    top: 80px !important;
    z-index: 4 !important;
  }

  #header.--user-menu-opened #header-logo,
  #header.--user-menu-opened #header-leading,
  #header.--user-menu-opened #header-right {
    z-index: 3 !important;
  }
}

/* --- Shell（仅子页）：菜单展开时不裁切；首页保持 Lusion 默认 overflow:hidden 做入场裁剪 --- */
html.is-projects-listing #header-container,
html.is-price-listing #header-container {
  overflow: visible !important;
}

html.is-projects-listing #header-leading,
html.is-projects-listing #header-right,
html.is-price-listing #header-leading,
html.is-price-listing #header-right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

html.is-projects-listing #header-right,
html.is-price-listing #header-right {
  pointer-events: auto;
  gap: 18px !important;
}

html.is-projects-listing #header-right-sound-btn,
html.is-projects-listing #header-right-talk-btn-placeholder,
html.is-price-listing #header-right-sound-btn,
html.is-price-listing #header-right-talk-btn-placeholder {
  display: none !important;
}

/* 内容页 html 可能被放大（如 /price），隔离 header 尺寸与 spacing */
html.is-projects-listing #header,
html.is-projects-listing #header-menu,
html.is-projects-listing #header-user-menu,
html.is-price-listing #header,
html.is-price-listing #header-menu,
html.is-price-listing #header-user-menu {
  font-size: 16px;
}

html.is-projects-listing #header,
html.is-price-listing #header {
  position: fixed;
  --base-padding-x: max(5vw, 40px);
  --base-padding-y: clamp(30px, 4vw, 50px);
  --header-size: clamp(16px, 1vw, 32px);
}

@media (max-width: 1000px) {
  html.is-projects-listing #header,
  html.is-price-listing #header {
    --base-padding-x: max(6vw, 60px);
  }
}

@media (max-width: 812px) {
  html.is-projects-listing #header,
  html.is-price-listing #header {
    --base-padding-x: 25px;
    --base-padding-y: 25px;
  }
}

@media (max-width: 380px) {
  html.is-projects-listing #header,
  html.is-price-listing #header {
    --base-padding-x: 15px;
    --base-padding-y: 15px;
    --header-size: clamp(12px, 1vw, 32px);
  }
}

/* 跳过 Lusion header 入场动画时，强制显示菜单/登录布局（透明度由上方 is-ready 规则控制） */
html.is-projects-listing #header-right-menu-btn,
html.is-projects-listing:not(.is-auth) #header-right-talk-btn,
html.is-price-listing #header-right-menu-btn,
html.is-price-listing:not(.is-auth) #header-right-talk-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

html.is-projects-listing #header-right-menu-btn-inner,
html.is-price-listing #header-right-menu-btn-inner,
html.is-projects-listing #header-right-talk-container,
html.is-price-listing #header-right-talk-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  min-height: 0;
}

html.is-projects-listing #header-right-menu-btn-text,
html.is-price-listing #header-right-menu-btn-text,
html.is-projects-listing #header-right-talk-btn-text,
html.is-price-listing #header-right-talk-btn-text {
  line-height: 1 !important;
}

html.is-projects-listing:not(.is-auth) #header-right-talk-btn,
html.is-price-listing:not(.is-auth) #header-right-talk-btn {
  background: var(--color-grey-blue);
  color: var(--color-white);
  overflow: hidden;
}

@media (hover: hover) {
  html.is-projects-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover,
  html.is-price-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover {
    background: var(--header-color, #0016ec);
    color: var(--project-details-btn-text-hover, #fff);
  }

  html.is-projects-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-dots,
  html.is-price-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-dots {
    transform: scale(0) translateZ(0);
  }

  html.is-projects-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-text,
  html.is-price-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-text {
    transform: translate3d(1.5em, 0, 0);
  }

  html.is-projects-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-arrow,
  html.is-price-listing:not(.is-auth)
    #header-right-talk-btn:not(.--is-contact-active):hover
    #header-right-talk-btn-arrow {
    transform: translateZ(0);
  }
}

@media (max-width: 812px) {
  html.is-projects-listing:not(.is-auth) #header-right-talk-btn,
  html.is-price-listing:not(.is-auth) #header-right-talk-btn {
    width: 3.2em;
    padding: 0;
  }
}

html.is-projects-listing.is-auth #header-user-menu-wrap,
html.is-price-listing.is-auth #header-user-menu-wrap {
  display: block;
}

html.is-projects-listing #header-center-project-back-btn,
html.is-price-listing #header-center-project-back-btn {
  display: none !important;
  pointer-events: none !important;
}

/* 返回按钮（leadingSlot / PricingBackButton） */
html.is-projects-listing .price-back-nav,
html.is-price-listing .price-back-nav {
  position: relative;
  padding: 0;
  pointer-events: none;
}

html.is-projects-listing .price-back-btn,
html.is-price-listing .price-back-btn {
  pointer-events: auto;
  background: #fff;
  color: #000;
  height: 45px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 21px 0 14px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(10, 12, 20, 0.06);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease,
    color 0.25s ease;
}

html.is-projects-listing .price-back-btn:hover,
html.is-price-listing .price-back-btn:hover {
  background: #1a2ffb;
  color: #fff;
}

html.is-projects-listing .price-back-btn:active,
html.is-price-listing .price-back-btn:active {
  transform: scale(0.97);
}

html.is-projects-listing .price-back-btn__icon,
html.is-price-listing .price-back-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.is-projects-listing .price-back-btn__icon svg,
html.is-price-listing .price-back-btn__icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

html.is-projects-listing .price-back-btn__label,
html.is-price-listing .price-back-btn__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

html.is-price-listing .price-back-btn--brand {
  background: #1a2ffb;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  min-width: 9.5rem;
  justify-content: center;
  padding: 0 21px;
}

html.is-price-listing .price-back-btn--brand:hover {
  background: #071bdf;
  color: #fff;
}