body.welcome-body { overflow: hidden; background: #000; }
.welcome-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 99999 !important; /* 🔧 拉到最高层级 */
  pointer-events: none; /* 保证蝴蝶画布不会挡住鼠标点击导航栏的事件 */
}

/* 背景与暗角 */
.hero-bg-container {
  position: absolute; inset: -5%; z-index: 0;
  background: radial-gradient(circle at center, #11151a 0%, #050608 100%);
  transform: scale(1.05);
  transition: transform 0.1s ease-out;
}
.hero-bg-container img {
  width: 100%; height: 100%; object-fit: cover;
  /* 把亮度提起来，对比度稍微加强一点点，画面更通透 */
  filter: brightness(0.85) contrast(1.05);
}
.welcome-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 把四周的黑色从 0.75 降到 0.3，中心降到 0，让它几乎完全透亮 */
  background: radial-gradient(circle at center, rgba(10, 5, 10, 0.05) 0%, rgba(10, 5, 10, 0.5) 100%);
}

/* 主体布局 */
.welcome-content {
  position: relative; z-index: 10; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(40px, 6vw, 80px); pointer-events: none;
  align-items: center;
}

/* 顶部区域（左右两端对齐） */
.welcome-header {
  display: flex;
  justify-content: space-between; /* 核心：让 Logo 在左，导航在右 */
  align-items: center;
  width: 100%;
  pointer-events: auto;
}

/* 左侧 Logo */
.welcome-logo {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  text-decoration: none;
}
.welcome-logo .logo-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* =========================================
   🔧 真正的通透毛玻璃（无灰底，纯透光）
   ========================================= */
.welcome-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 32px;

  /* 核心1：极低透明度的纯白，彻底告别灰色 */
  background: rgba(255, 255, 255, 0.06);

  /* 核心2：强化模糊，让背后的花朵变成抽象的色块 */
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);

  border-radius: 999px;

  /* 核心3：玻璃切边的高光（模拟光线折射） */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.3);

  /* 核心4：外侧阴影 + 内侧微光 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
  inset 0 0 15px rgba(255, 255, 255, 0.05);

  transition: all 0.4s ease;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1s forwards;
}

.welcome-nav:hover {
  background: rgba(255, 255, 255, 0.12); /* 悬停时稍微变亮 */
  border-top: 1px solid rgba(255, 255, 255, 0.9); /* 顶部高光更亮 */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3),
  inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 导航链接文字 */
.welcome-nav a {
  font-size: 14.5px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.3s ease;
  /* 文字加一点阴影，保证在通透的玻璃上依然清晰 */
  text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}
.welcome-nav a:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* =========================================
   中间主视觉（居中）
   ========================================= */
.welcome-main {
  margin: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.welcome-title {
  font-family: var(--font-serif); color: #fff; font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 1.1; letter-spacing: -.01em; font-weight: 500; margin-bottom: 32px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.welcome-title .line { display: block; opacity: 0; transform: translateY(40px); animation: titleReveal 1.4s var(--ease) .2s forwards; }
.welcome-title .line:nth-child(2) { animation-delay: .4s; }

.welcome-sub {
  font-size: clamp(16px, 1.5vw, 18px); color: rgba(255,255,255,0.9);
  max-width: 600px; line-height: 1.8; margin-bottom: 48px;
  opacity: 0; animation: fadeUp 1s var(--ease) .8s forwards;
}

.welcome-actions { display: flex; align-items: center; gap: 24px; opacity: 0; animation: fadeUp 1s var(--ease) 1.1s forwards; }

.btn-enter {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; border-radius: 999px;
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: all .4s var(--ease);
}
.btn-enter:hover { background: #fff; color: #000; box-shadow: 0 0 30px rgba(255,255,255,0.3); transform: translateY(-2px); }
.btn-enter svg { transition: transform .4s var(--ease); }
.btn-enter:hover svg { transform: translateX(4px); }

@keyframes titleReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.welcome-wrapper { position: absolute; inset: 0; transition: opacity .8s var(--ease); }
.welcome-wrapper.leaving { opacity: 0; pointer-events: none; }