*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

font-family:
"Helvetica Neue",
"Arial",
"Microsoft YaHei",
sans-serif;

color:#111;

line-height:1.6;

}


/* =====================
导航
===================== */

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: .4s ease;
}

.logo-small img {
    width: 90px;
    filter: invert(1);
}

/* 导航容器 */
.top-nav nav {
    display: flex;
    align-items: center;
}

/* 1. 链接变成上下排列的小盒子 */
.top-nav nav a.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin-left: 45px;
    gap: 4px; /* 中英文的上下间距 */
    transition: transform 0.3s ease;
}

/* 2. 中文样式 */
.nav-cn {
    color: #ddd;
    font-size: 16px;
    letter-spacing: 2px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 3. 英文样式 */
.nav-en {
    color: #ddd;
    font-size: 10px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: Arial, sans-serif;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* 4. 默认透明背景下的悬停交互 (微微上浮 + 亮起) */
.top-nav nav a.nav-item:hover {
    transform: translateY(-3px); 
}

.top-nav nav a.nav-item:hover .nav-cn {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.top-nav nav a.nav-item:hover .nav-en {
    color: white;
    opacity: 1;
}

/* 5. 默认透明背景下的当前版块高亮 */
.top-nav nav a.nav-item.active .nav-cn {
    color: white;
    font-weight: 600;
}

.top-nav nav a.nav-item.active .nav-en {
    color: white;
    opacity: 0.9;
}


/* ================================ 
   滚动后的毛玻璃状态 
================================ */

.top-nav.scrolled {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.top-nav.scrolled .logo-small img {
    filter: none;
}

/* 滚动后：文字自动变深色以适应白底 */
.top-nav.scrolled nav a.nav-item .nav-cn {
    color: #666; 
}

.top-nav.scrolled nav a.nav-item .nav-en {
    color: #888; 
}

/* 滚动后：悬停变成纯黑，且去掉发光 */
.top-nav.scrolled nav a.nav-item:hover .nav-cn,
.top-nav.scrolled nav a.nav-item:hover .nav-en {
    color: #000;
    text-shadow: none; 
}

/* 滚动后：当前高亮变成深色 */
.top-nav.scrolled nav a.nav-item.active .nav-cn,
.top-nav.scrolled nav a.nav-item.active .nav-en {
    color: #111;
    font-weight: 600;
}



/* =====================
Hero
===================== */


.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

overflow:hidden;

color:white;

}



/* =====================
Hero 背景 (Apple Pro 极简黑质感)
===================== */

.hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #050505; /* 极其深邃的黑灰底色 */
    
    /* 细线空间网格：极淡的背景坐标网格 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px; 
    background-position: center center;
    z-index: 1;
    overflow: hidden;
}

/* 极淡的噪点纹理 */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05; 
    z-index: 2;
    pointer-events: none;
}

/* 极慢的光晕移动 */
.hero-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 50%);
    z-index: 3;
    pointer-events: none;
    animation: slowLight 18s ease-in-out infinite alternate;
}

/* 建筑图纸的细线 (横线) */
.arch-line-x {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
    z-index: 4;
    animation: lineGlow 8s ease-in-out infinite alternate;
}

/* 建筑图纸的细线 (竖线) */
.arch-line-y {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12) 50%, transparent);
    z-index: 4;
    animation: lineGlow 8s ease-in-out infinite alternate-reverse;
}

/* 动画：光晕的缓慢呼吸与位移 */
@keyframes slowLight {
    0% { transform: scale(1) translate(-2%, -2%); opacity: 0.8; }
    100% { transform: scale(1.3) translate(2%, 2%); opacity: 1; }
}

/* 动画：十字线的微微闪烁 */
@keyframes lineGlow {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}


/* =====================
下面是你原本保留的文字和内容样式 (原封不动)
===================== */

.hero-content {
    position: relative;
    z-index: 10; /* 这里我稍微把层级调高到了10，确保文字一定在网格和十字线上方 */
}

.hero-logo {
    width: 90px;
    margin-bottom: 25px;
    filter: brightness(0) invert(1);
    animation: fadeUp 1.5s ease;
}

.hero h1 {
    font-size: 64px;
    letter-spacing: 12px;
    margin: 20px 0;
    animation: fadeUp 1.5s ease .3s both;
}

.english {
    font-size: 18px;
    letter-spacing: 8px;
    animation: fadeUp 1.5s ease .6s both;
}

.hero p {
    font-size: 18px;
    letter-spacing: 3px;
    margin-top: 30px;
    animation: fadeUp 1.5s ease .9s both;
}

.scroll {
    margin-top: 80px;
    letter-spacing: 4px;
    animation: fadeUp 1.5s ease 1.2s both;
}



@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}





/* =====================
项目
===================== */

.projects{
background:#f7f7f5;
padding:140px 8%;
}

.title{
margin-bottom:80px;
}

.title h2{
font-size:42px;
font-weight:300;
letter-spacing:8px;
}

.title p{
margin-top:15px;
color:#777;
}

/* 单列高级作品展示 */

.project-list{
display:block;
}

.project{
margin-bottom:160px;
overflow:hidden;
}

.project-number{
font-size:14px;
letter-spacing:5px;
color:#888;
margin-bottom:30px;
}

/* 
💡 修改：滚动浮现动画现在应用于图片的父容器 `.project-image`，
不再直接应用于 `img`。这能让动画逻辑分开。
*/
.project-image{
height:650px;
overflow:hidden;
border-radius:0; /* 保持硬朗的设计，如果需要丝滑边缘可以加比如 8px */
/* 安全动画初始状态（从下浮现） */
transform:translateY(40px);
/* 滚动进入浮现的过渡时间，可以保持 1s */
transition:transform 1s ease;
}

/* 
💡 核心新增：专门用于鼠标悬停放大的图片设置
*/
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* 用于鼠标悬停放大的默认状态 */
transform: scale(1);
/* 
🔥 丝滑的关键在这里：
1. 使用 0.4s 的过渡时间，比滚动动画快，更符合交互感。
2. cubic-bezier(0.16, 1, 0.3, 1) 是一个非常平滑、优雅的贝塞尔曲线，
移入和移出时都会应用这个丝滑的过渡。
*/
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 
💡 修改：鼠标移入效果。专门用于放大图片，不改变 translateY 状态。
*/
.project:hover .project-image img {
/* 将稍微放大倍数从 1.05 增加到 1.1，让效果更清晰且依然优雅 */
transform: scale(1.1);
}

.project-info{
margin-top:35px;
display:flex;
justify-content:space-between;
align-items:center;
}

.project-info h3{
font-size:38px;
font-weight:300;
letter-spacing:3px;
/* 动画 */
opacity:0;
transform:translateY(30px);
transition:all .8s ease .2s;
}

.project-info p{
font-size:14px;
letter-spacing:3px;
color:#777;
/* 动画 */
opacity:0;
transform:translateY(20px);
transition:all .8s ease .4s;
}

/* 
💡 修改：滚动出现动画，现在应用于父级图片容器 `.project-image`
*/
.project.show .project-image {
transform:translateY(0);
}

.project.show h3,
.project.show p{
opacity:1;
transform:translateY(0);
}





/* =====================
AI
===================== */


.lab{

background:#111;

color:white;

padding:140px 8%;

}



.lab h2,
.blog h2,
.about h2{

font-size:42px;

font-weight:300;

letter-spacing:8px;

}


.lab p{

color:#888;

margin-top:15px;

}




/* =====================
BLOG
===================== */


.blog{

padding:140px 8%;

}


.post {
    padding: 40px 0;
    border-bottom: 1px solid #ddd;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 添加顺滑的过渡效果 */
    cursor: pointer;
    position: relative;
}

/* 鼠标悬停时的整体效果：轻微右移、背景变灰、底边框加深 */
.post:hover {
    padding-left: 25px;
    background: #fafafa;
    border-bottom-color: #111; 
}

.post span {
    color: #999;
    transition: color 0.3s ease;
}

.post h3 {
    margin-top: 15px;
    font-size: 30px;
    font-weight: 300;
    transition: all 0.3s ease;
}

/* 悬停时数字和标题的颜色加深，标题产生轻微位移 */
.post:hover span {
    color: #111;
}

.post:hover h3 {
    color: #333;
    transform: translateX(5px);
}



/* =====================
ABOUT
===================== */


.about{

background:#f7f7f5;

padding:140px 20px;

text-align:center;

}



.about h3{

margin-top:40px;

font-size:48px;

font-weight:300;

}



.about p{

margin-top:20px;

color:#666;

}





footer{

background:#080808;

color:#777;

padding:50px;

text-align:center;

}

/* =====================
   新增：AI实验室与微信二维码样式
===================== */

/* 消除超链接的默认样式（去掉下划线的蓝字） */
a.post {
    text-decoration: none;
    display: block; 
    color: inherit; 
}

/* AI 实验室因为是黑底色，需要适配暗色系悬停效果 */
.lab .post {
    border-bottom: 1px solid #333; 
}
.lab .post span {
    color: #666;
}
.lab .post h3 {
    color: #ddd;
}

/* 鼠标悬停在 AI 实验室列表上的发亮效果 */
.lab .post:hover {
    background: #1a1a1a; 
    border-bottom-color: #555;
}
.lab .post:hover span {
    color: #aaa;
}
.lab .post:hover h3 {
    color: #fff;
}

/* 微信二维码样式 */
.wechat-qr {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wechat-qr img {
    width: 180px; 
    height: 180px;
    object-fit: cover;
    border-radius: 12px; /* 圆角增加亲和力 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 柔和的卡片阴影 */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 鼠标悬停二维码微微放大 */
.wechat-qr img:hover {
    transform: scale(1.05); 
}

.wechat-qr p {
    margin-top: 15px;
    font-size: 13px;
    color: #888;
    letter-spacing: 2px;
}




/* =====================
手机
===================== */


@media(max-width:900px){


.top-nav{

padding:25px 5%;

}


.top-nav nav a.nav-item{

margin-left:15px;

}


.project-image{

height:400px;

}



.project-info{

display:block;

}



.project-info h3{

font-size:28px;

margin-bottom:15px;

}



.hero h1{

font-size:38px;

}


.title h2,
.lab h2,
.blog h2,
.about h2{

font-size:30px;

}


}

html {
    scroll-behavior: smooth;
}

/* =====================
   子页面：项目详情页专属样式
===================== */

/* 去除包裹项目的 a 标签默认下划线和颜色变异 */
a.project-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 子页面的背景色 */
.sub-page-body {
    background: #f7f7f5;
}

/* 顶部返回导航 */
.sub-nav {
    padding: 30px 8%;
    display: flex;
    justify-content: flex-start;
    background: #f7f7f5;
}

.back-btn {
    color: #555;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 3px;
    transition: color 0.3s ease;
}

.back-btn:hover {
    color: #111;
    font-weight: bold;
}

/* 头部文字排版 */
.project-header {
    padding: 60px 8% 80px;
    text-align: center;
}

.project-meta {
    font-size: 12px;
    letter-spacing: 5px;
    color: #999;
    margin-bottom: 25px;
}

.project-title {
    font-size: 38px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #111;
    margin-bottom: 15px;
}

.project-subtitle {
    font-size: 18px;
    font-weight: 300;
    color: #666;
    letter-spacing: 1px;
}

/* 图片画廊：纵向极简排版 */
.project-gallery {
    padding: 0 8% 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* 每张图之间的间距 */
}

.project-gallery img {
    width: 100%;
    max-width: 1200px; /* 限制最大宽度，在超大带鱼屏上也不会显得图片过于夸张 */
    height: auto;
    border-radius: 2px;
    /* 增加一个非常极其微弱的阴影，让图片像是印在纸上 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03); 
}

/* =====================
   子页面：文章(NOTES)专属排版
===================== */
.article-container {
    max-width: 800px; /* 限制版心宽度，最适合阅读 */
    margin: 0 auto;
    padding: 20px 8% 120px;
}

.article-header {
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 40px;
}

.article-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin: 40px 0 20px;
    letter-spacing: 2px;
}

.article-content p {
    font-size: 16px;
    line-height: 2; /* 宽行距，呼吸感强 */
    color: #444;
    margin-bottom: 25px;
    text-align: justify; /* 文本两端对齐 */
}

.article-content img {
    width: 100%;
    border-radius: 4px;
    margin: 30px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* =====================
   子页面：实验(LAB)专属排版
===================== */
.lab-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 8% 120px;
}

.lab-intro {
    background: #fff;
    padding: 50px;
    border-radius: 8px;
    margin-bottom: 60px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* 高级悬浮卡片感 */
}

.lab-intro h3 {
    font-size: 16px;
    letter-spacing: 3px;
    color: #111;
    margin-bottom: 20px;
    border-left: 3px solid #111;
    padding-left: 15px;
}

.lab-intro p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 15px;
}

/* =====================
   专门为文章(Notes/Lab)内部的多图并排展示增加的网格样式
===================== */
.article-content .project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    padding: 0; /* 抵消原有的左右 8% padding */
    flex-direction: unset; /* 取消原有的竖向排列 */
}

.article-content .project-gallery img {
    width: 100%;
    max-width: 100%; /* 覆盖原来的 1200px 限制 */
    height: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.article-content .project-gallery img:hover {
    transform: translateY(-5px);
}