/* --- 全局与字体 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: #000;
    color: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Arial", sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 导航栏 (V2.0 不变) --- */
/* (此处省略导航栏 CSS) */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.main-nav.scrolled {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-brand {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.nav-brand:hover { opacity: 1; }
.nav-links {
    list-style: none;
    display: flex;
}
.nav-links li {
    margin-left: 35px;
}
.nav-links a {
    color: #a1a1a6;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}
.nav-links a:hover {
    color: #fff;
}


/* --- 主内容区 --- */
main { position: relative; z-index: 1; }

/* --- Section 1: Hero (V2.0 不变) --- */
/* (此处省略 Hero Section CSS) */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 40px;
}
.hero-content-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10,10,10,0.8) 0%, rgba(0,0,0,1) 100%);
    z-index: 1;
}
.hero-text-content {
    position: relative;
    z-index: 2;
}
.hero-title {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    line-height: 1.1;
}
.hero-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: revealChar 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero-title .char:nth-child(1) { animation-delay: 0.5s; }
.hero-title .char:nth-child(2) { animation-delay: 0.6s; }
.hero-title .char:nth-child(3) { animation-delay: 0.7s; }
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    font-weight: 400;
    color: #a1a1a6;
    margin-bottom: 25px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 1s 1.0s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-slogan {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #86868b;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 1s 1.3s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-down-prompt {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: transparent;
    overflow: hidden;
    z-index: 3;
    opacity: 0;
    animation: fadeIn 1s 1.8s forwards;
}
.scroll-down-prompt .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-100%);
    animation: slideDown 2.5s infinite cubic-bezier(0.7, 0, 0.3, 1);
    animation-delay: 1.8s;
}
/* (Hero 动画定义 - 此处省略) */
@keyframes revealChar { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideDown { 0% { transform: translateY(-100%); } 60% { transform: translateY(0); } 80% { transform: translateY(0); } 100% { transform: translateY(100%); } }


/* --- Section 2: 关于我 (Vision) (V2.1 样式基本不变) --- */
/* (此处省略 About Section CSS，与 V2.1 相同) */
.about { min-height: 110vh; background-color: #000; color: #a1a1a6; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: center; padding: 10vh 40px; }
.about-content-wrapper { width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr; align-items: flex-start; position: relative; }
.about-sticky-title { position: sticky; top: 20vh; height: fit-content; z-index: 1; text-align: left; padding-right: 5vw; align-self: start; }
.about-sticky-title h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; color: #fff; margin: 0; line-height: 1.2; opacity: 0; transform: translateY(20px); transition: opacity 1s 0.5s ease-out, transform 1s 0.5s ease-out; }
.about.visible .about-sticky-title h2 { opacity: 1; transform: translateY(0); }
.about-text-content { grid-column: 1 / -1; text-align: left; z-index: 2; }
.about-text-content .paragraph { margin-bottom: 2.5em; overflow: hidden; }
.about-text-content .line { font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 1.9; color: #86868b; margin-bottom: 0; overflow: hidden; }
.about-text-content .line .word { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.about.visible .about-text-content .line .word { opacity: 1; transform: translateY(0); }
@media (min-width: 992px) { .about-content-wrapper { grid-template-columns: minmax(300px, 0.7fr) 1.3fr; padding: 20vh 0; gap: 0 8vw; align-items: start; } .about-sticky-title { grid-column: 1 / 2; top: 25vh; padding-right: 0; } .about-text-content { grid-column: 2 / 3; } }

/*
 ===================================================================
   V3.0 重构: Section 3: 作品 (Work) - 单一聚焦式
 ===================================================================
*/
.work {
    background-color: #0d0d0f; /* 比纯黑稍亮 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 120px 40px; /* 增加上下 padding */
    min-height: 100vh; /* 确保至少一屏高 */
    display: flex; /* 使用 Flex 布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
}

.work-section-title { /* 板块标题 */
    font-size: clamp(2rem, 5vw, 3.5rem); /* 加大标题 */
    font-weight: 700;
    color: #fff;
    margin-bottom: 8vh; /* 加大与下方内容的间距 */
    text-align: center;
}

.featured-project {
    display: grid;
    grid-template-columns: 1fr; /* 手机端单列 */
    gap: 40px;
    max-width: 1100px; /* 限制最大宽度 */
    width: 100%;
    align-items: center; /* 垂直居中对齐 */
}

.project-visual-container {
    border-radius: 18px; /* 圆角 */
    overflow: hidden;
    aspect-ratio: 16 / 9; /* V3.0: 强制 16:9 比例 */
    background: #1d1d1f; /* 背景色 */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.visual-placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满容器 */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* 平滑缩放 */
}
.featured-project:hover .visual-placeholder img { /* V3.0: 悬停时图片轻微放大 */
    transform: scale(1.03);
}

.project-info {
    text-align: left;
    color: #a1a1a6; /* Apple 灰色 */
}
.project-category { /* 类别标签 */
    display: block;
    font-size: 0.8rem;
    color: #86868b; /* Apple 稍深灰 */
    margin-bottom: 10px;
    text-transform: uppercase; /* 大写 */
    letter-spacing: 0.05em;
}
.project-info h3 { /* 项目标题 */
    font-size: clamp(1.8rem, 4vw, 2.8rem); /* 响应式加大 */
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
}
.project-info .project-role { /* 职责 */
    font-size: 1rem;
    color: #86868b;
    margin-bottom: 25px;
}
.project-info .project-description { /* 描述 */
    font-size: 1.05rem; /* 调整字号 */
    line-height: 1.7;
    margin-bottom: 35px;
}
/* 跳转按钮 (Apple 风格) */
.project-link-button {
    display: inline-flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中图标和文字 */
    color: #2997ff; /* Apple 蓝色 */
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    position: relative; /* 为伪元素定位 */
    padding-right: 20px; /* 为箭头留空间 */
}
.project-link-button .arrow-icon {
    width: 16px; height: 16px; fill: currentColor;
    margin-left: 8px;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.project-link-button::after { /* 悬停下划线 */
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: 1px;
    background-color: #2997ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.project-link-button:hover::after {
    transform: scaleX(1);
}
.project-link-button:hover .arrow-icon {
    transform: translateX(3px); /* 箭头轻微右移 */
}

/* 桌面端改为两列 */
@media (min-width: 992px) {
    .featured-project {
        grid-template-columns: 1.2fr 1fr; /* 视觉区稍宽 */
        gap: 60px; /* 加大间距 */
    }
}

/*
 ===================================================================
   V3.0 重构: Section 4: Contact - 分栏聚焦式
 ===================================================================
*/
.contact {
    min-height: 80vh; /* 调整高度 */
    background-color: #000;
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10vh 40px; /* 使用 vh 调整边距 */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* 手机单列 */
    gap: 50px; /* 行间距 */
    max-width: 900px;
    width: 100%;
    text-align: left; /* 整体左对齐 */
}

.contact-text h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px; /* 调整间距 */
    text-align: left; /* 确保标题左对齐 */
}
.contact-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #a1a1a6; /* Apple 灰色 */
    margin-bottom: 1em; /* 段落间距 */
}
.team-contact-link { /* 团队链接样式微调 */
    font-size: 0.9rem;
    color: #6e6e73;
    margin-top: 30px; /* 增加上边距 */
}
.team-contact-link a {
    color: #86868b;
    text-decoration: underline;
    transition: color 0.3s ease;
}
.team-contact-link a:hover { color: #fff; }

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 35px; /* 联系方式间距 */
    align-items: flex-start; /* 左对齐 */
}

.contact-email { /* 邮箱样式重构 */
    display: inline-block; /* 允许下划线动画 */
    position: relative;
    color: #f5f5f7; /* Apple 灰白 */
    text-decoration: none;
    padding-bottom: 8px; /* 为下划线留空间 */
}
.contact-email .email-label { /* “电子邮箱”标签 */
    display: block;
    font-size: 0.8rem;
    color: #86868b; /* Apple 稍深灰 */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.contact-email .email-address { /* 邮箱地址 */
    font-size: clamp(1.3rem, 3vw, 1.8rem); /* 调整字号 */
    font-weight: 500;
}
.contact-email .email-underline { /* 悬停下划线动画 */
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background-color: #2997ff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-email:hover .email-underline {
    transform: scaleX(1);
}

.social-links { margin-top: 10px; } /* 社交链接上边距 */
.social-links a { /* (V2.2 样式基本不变) */
    display: inline-block; width: 44px; height: 44px;
    background: #1d1d1f; border-radius: 50%;
    color: #a1a1a6; text-align: center; line-height: 44px;
    margin-right: 15px; /* 只保留右边距 */ font-size: 1.1rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.social-links a:hover {
    background: #2997ff; color: #fff;
    transform: scale(1.15) rotate(10deg);
}

/* 桌面端改为两列 */
@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr; /* 左右等宽 */
        gap: 8vw; /* 加大列间距 */
        align-items: center; /* 垂直居中 */
    }
}


/* --- 页脚 (V2.0 不变) --- */
.footer {
    padding: 20px;
    text-align: center;
    color: #6e6e73;
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
    background: #000;
}
.footer p { margin: 0; }

/* --- V2.0 滚动淡入动画 (基础) --- */
.fade-in {
    opacity: 0;
    /* V3.0: 使用更平滑的过渡 */
    transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.fade-in.visible {
    opacity: 1;
}
/* V3.0: 为内容元素添加更细腻的入场动画 (可选) */
.fade-in.visible .project-info > *,
.fade-in.visible .contact-text > *,
.fade-in.visible .contact-methods > * {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInSlideUp 1s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* (为不同元素设置延迟 - JS控制或CSS :nth-child) */
.fade-in.visible .project-info h3 { animation-delay: 0.2s; }
.fade-in.visible .project-info .project-role { animation-delay: 0.3s; }
.fade-in.visible .project-info .project-description { animation-delay: 0.4s; }
.fade-in.visible .project-info .project-link-button { animation-delay: 0.5s; }

.fade-in.visible .contact-text h2 { animation-delay: 0.2s; }
.fade-in.visible .contact-text p:nth-of-type(1) { animation-delay: 0.3s; }
.fade-in.visible .contact-text p:nth-of-type(2) { animation-delay: 0.4s; }

.fade-in.visible .contact-methods .contact-email { animation-delay: 0.5s; }
.fade-in.visible .contact-methods .social-links { animation-delay: 0.6s; }


/* --- 响应式调整 --- */
@media (max-width: 768px) {
    .nav-content { padding: 0 20px; }
    .nav-links { display: none; }
    .hero { padding: 0 20px; }
    section { padding: 80px 20px; }
    section h2 { font-size: 1.8rem; }
    
    .about-content-wrapper { grid-template-columns: 1fr; gap: 3vh 0; padding: 5vh 0;}
    .about-sticky-title { position: static; padding-right: 0; text-align: center; margin-bottom: 30px;}
    .about-text-content { grid-column: 1 / -1; max-width: 100%; }
    .about-text-content .line { font-size: clamp(1rem, 4vw, 1.2rem); }

    /* V3.0: Work 响应式调整 */
    .work-section-title { position: static; /* 手机端取消粘性 */ margin-bottom: 40px;}
    .featured-project { gap: 30px; }
    .project-visual-container { aspect-ratio: auto; height: 250px; /* 手机端固定高度 */}
    .project-info h3 { font-size: 1.5rem; }
    .project-info .project-description { font-size: 0.95rem; }

    /* V3.0: Contact 响应式调整 */
    .contact-grid { gap: 40px; }
    .contact-text, .contact-methods { text-align: center; align-items: center;} /* 手机端居中 */
    .contact-email::after { transform-origin: center; } /* 下划线从中间展开 */
}