/* --- global.css --- */
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    overflow: hidden; background-color: #000; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    transition: background-color 0.8s ease;
}

.bg-container, .top-container, #universe { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh; 
    transition: filter 0.6s ease;
}
.mesh-layer, .top-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; transition: opacity 1s ease; }
.mesh-layer { animation: meshBreathe 12s infinite ease-in-out; }
@keyframes meshBreathe { 0%, 100% { transform: scale(1.1); } 50% { transform: scale(1.25); } }

.dark-bg { background-image: url('../images/bg-dark.png'); opacity: 1; }
.light-bg { background-image: url('../images/bg-light.png'); opacity: 0; }
.top-dark { background-image: url('../images/top-dark.png'); opacity: 1; z-index: 10; }
.top-light { background-image: url('../images/top-light.png'); opacity: 0; z-index: 10; }
.light-mode .dark-bg, .light-mode .top-dark { opacity: 0; }
.light-mode .light-bg, .light-mode .top-light { opacity: 1; }

body.menu-open .bg-container, body.menu-open #universe, body.menu-open .top-container, body.menu-open .hero-container {
    filter: blur(2px); 
    pointer-events: none;
}

.lamp-toggle {
    position: fixed; top: 0; left: 0; width: 200px; height: 65vh; z-index: 900;
    transform: scale(0.7); transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.click-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 200; cursor: pointer;
}

.layer-part { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: contain; background-repeat: no-repeat; background-position: center top; 
    transition: opacity 0.1s steps(1); 
    pointer-events: none; 
}

.eye-dark { background-image: url('../images/eye-dark.png'); }
.eye-light { background-image: url('../images/eye-light.png'); }
.line-dark { background-image: url('../images/line-dark.png'); }
.line-light { background-image: url('../images/line-light.png'); }
.han-dark { background-image: url('../images/han-dark.png'); }
.han-light { background-image: url('../images/han-light.png'); }

.line-group, .han-group { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: top center; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lamp-toggle:hover .line-group { transform: scaleY(1.02); }
.lamp-toggle:hover .han-group { transform: translateY(10px); }

.lamp-toggle:active .eye-dark, .lamp-toggle:active .eye-light { transform: scaleY(1.1) scaleX(0.92); transform-origin: top center; transition: transform 0.1s ease-out; }
.lamp-toggle:active .line-group { transform: scaleY(1.02) translateY(8px); transition: transform 0.1s ease-out; }
.lamp-toggle:active .han-group { transform: translateY(17px); transition: transform 0.1s ease-out; }

.eye-light, .line-light, .han-light { opacity: 0; }
.light-mode .eye-dark, .light-mode .line-dark, .light-mode .han-dark { opacity: 0; }
.light-mode .eye-light, .light-mode .line-light, .light-mode .han-light { opacity: 1; }

.hero-container {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 100; pointer-events: none; width: 100%;
}
.main-title {
    pointer-events: auto; color: white; font-size: 150px; letter-spacing: 50px; 
    margin: 0; padding-left: 50px; font-weight: 100; cursor: pointer; text-decoration: none;
    transition: opacity 0.5s ease, color 0.8s ease; line-height: 1.1;
}
.description { color: rgba(255, 255, 255, 0.6); font-size: 14px; letter-spacing: 6px; text-transform: uppercase; margin: 20px 0 60px 0; font-weight: 300; }
.sub-nav { pointer-events: auto; display: flex; justify-content: center; gap: 60px; }
.nav-item { color: white; text-decoration: none; font-size: 14px; letter-spacing: 6px; text-transform: uppercase; position: relative; transition: color 0.8s ease; }
.nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: white; transition: width 0.3s ease; }
.nav-item:hover::after { width: calc(100% - 6px); }

/* --- global.css 修正部分 --- */

/* 1. 菜单背景板：统一时间与曲线 */
.menu-overlay {
    position: fixed; 
    top: 0; 
    right: -450px; 
    width: 400px; 
    height: 100%;
    background: rgba(0, 0, 0, 0.03); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    z-index: 500; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    padding-left: 60px; 
    padding-bottom: 25vh; 
    box-sizing: border-box;
    /* 🚀 核心：设置统一的 transition */
    transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5); 
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-overlay.active { 
    right: 0; 
}
.menu-links { display: flex; flex-direction: column; gap: 40px; }
.menu-link {
    color: white; 
    text-decoration: none; 
    font-size: 32px; 
    font-weight: 200;
    letter-spacing: 10px; 
    text-transform: uppercase; 
    position: relative; 
    display: inline-block; 
    width: fit-content; 
    
    
    /* 初始状态：在右边 30px 处，全透明 */
    opacity: 0; 
    transform: translateX(30px);
    
    /* 🚀 核心：这里的参数必须与 .menu-overlay 完全一致 */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 菜单激活时，文字状态 */
.menu-overlay.active .menu-link { 
    opacity: 1; 
    transform: translateX(0); 
    /* 🚀 确保激活时也没有额外的延迟，大家一起起步 */
}
.menu-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: white; transition: width 0.3s ease; }
.menu-link:hover::after { width: calc(100% - 10px); }
.menu-link:hover { opacity: 0.7; }

.menu-footer { position: absolute; bottom: 60px; color: rgba(255, 255, 255, 0.3); font-size: 10px; line-height: 2; letter-spacing: 3px; text-transform: uppercase; }

.light-mode .main-title, .light-mode .nav-item, .light-mode .menu-link { color: black; }
.light-mode .description, .light-mode .menu-footer { color: rgba(0, 0, 0, 0.4); }
.light-mode .nav-item::after, .light-mode .menu-link::after { background-color: black; }
.light-mode .menu-overlay { background: rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.05); }

.top-right-util { position: fixed; top: 45px; right: 55px; z-index: 501; }
.burger-icon { width: 30px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.burger-icon span { width: 100%; height: 2px; background: white; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.burger-icon:not(.active):hover span:first-child { width: 80%; }
.burger-icon:not(.active):hover span:last-child { width: 80%; transform: translateX(8px); }
.burger-icon.active span:first-child { transform: translateY(6px) rotate(45deg); width: 100%; }
.burger-icon.active span:last-child { transform: translateY(-6px) rotate(-45deg); width: 100%; }
.light-mode .burger-icon span { background-color: black; }

@media (max-width: 768px) {
.lamp-toggle {
  width: 170px;
  height: 42vh;
  transform: scale(0.72);
  transform-origin: top left;
}

.top-right-util {
top: 20px;
right: 18px;
}

.menu-overlay {
  width: 78vw;
  right: -78vw;
  padding-left: 24px;
  padding-right: 20px;
  padding-bottom: 12vh;
}

.menu-links {
gap: 24px;
}

.menu-link {
font-size: 22px;
letter-spacing: 6px;
}

.menu-footer {
bottom: 28px;
left: 28px;
right: 28px;
font-size: 9px;
letter-spacing: 2px;
line-height: 1.8;
}

.hero-container {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}

.main-title {
font-size: clamp(42px, 14vw, 72px);
letter-spacing: 10px;
padding-left: 10px;
line-height: 1.05;
}

.description {
font-size: 10px;
letter-spacing: 3px;
margin: 14px 0 34px 0;
line-height: 1.7;
}

.sub-nav {
flex-wrap: wrap;
gap: 18px 22px;
}

.nav-item {
font-size: 11px;
letter-spacing: 3px;
}
}

html, body {
  overflow-x: hidden;
}