@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* =========================================
   基础重置与排版设定
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 滚动定格由 JS 以较慢缓动处理，保留中途粒子过渡 */
html {
    font-size: 16px;
    scroll-snap-type: none;
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* 隐藏原生滚动条，让画面更沉浸 */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

body {
    /* 正文使用现代科技感的 Inter 字体 */
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    background-color: #f6f6f4; /* 纸质感暖白，比纯白更高级 */
    color: #1a1a1a;
    overflow-x: hidden;
}

/* 除正文小字外，标题、Logo、导航和特殊元素统一使用 EB Garamond */
h1, h2, h3, h4,
.logo-large,
.logo-small,
.grid-item,
.subtitle-bottom {
    font-family: 'Inter', serif;
}

/* =========================================
   全局组件样式
========================================= */
/* =========================================
   容器与页面结构
========================================= */
/* Three.js 3D 画布容器（绝对固定在屏幕最底层） */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 移动端跟随动态视口，避免地址栏收放留缝 */
    z-index: 0;
    pointer-events: none; /* 必须：让鼠标可以穿透画布操作网页内容 */
}

/* 滚动内容区（覆盖在画布之上） */
.scroll-container {
    position: relative;
    z-index: 10;
}

/* 通用页面样式：每一页刚好填满一个屏幕 */
.page {
    height: 100vh;
    height: 100dvh; /* 动态视口：整屏页随地址栏收放平滑变化，与 JS 翻页的 innerHeight 一致 */
    width: 100vw;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    /* 核心：让每一页都能被滚轮吸附锁定 */
    scroll-snap-align: start; 
    scroll-snap-stop: always;
}

/* =========================================
   文本内容排版
========================================= */
.logo-large {
    font-size: 3.5rem;
    font-weight: 500;
    position: absolute;
    top: 4rem;
    left: 4rem;
    letter-spacing: -1px;
    white-space: nowrap;
}

.logo-large::before,
.logo-small::before {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    background: url("assets/pictures/logo.svg") center / contain no-repeat;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.logo-large::before {
    width: 1.19em;
    height: 0.952em;
    margin-right: 0.16em;
    vertical-align: -0.05em;
}

.subtitle-bottom {
    position: absolute;
    top: 46%;
    bottom: auto;
    left: 4rem;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.4;
    max-width: 750px;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.hero-links {
    position: absolute;
    top: 63%;
    left: 4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.paper-link,
.waitlist-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.24s ease;
}

.paper-link {
    color: #555;
}

.waitlist-link {
    color: #d8b45f;
}

.paper-link span {
    text-decoration: underline;
    text-decoration-color: rgba(85, 85, 85, 0.3);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.24s ease;
}

.waitlist-link span {
    text-decoration: underline;
    text-decoration-color: rgba(216, 180, 95, 0.46);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.24s ease;
}

.paper-link:hover {
    color: #333;
}

.paper-link:hover span {
    text-decoration-color: rgba(85, 85, 85, 0.55);
}

.waitlist-link:hover {
    color: #c9a24e;
}

.waitlist-link:hover span {
    text-decoration-color: rgba(216, 180, 95, 0.72);
}

.paper-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

@media (max-width: 768px), (max-device-width: 768px), (orientation: portrait) and (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    /* 移动端整体收窄内边距与左侧基线，避免绝对定位元素溢出 */
    .page {
        padding: 1.5rem;
    }

    /* 首页大标题：桌面 3.5rem + nowrap 会横向溢出屏幕，改为可容纳的字号 */
    .logo-large {
        font-size: 1.9rem;
        top: 1.5rem;
        left: 1.5rem;
        letter-spacing: -0.5px;
    }

    .logo-small {
        top: 1.5rem;
        left: 1.5rem;
    }

    #page-4 .logo-small {
        top: 1.5rem;
        left: 1.5rem;
    }

    .subtitle-bottom {
        top: auto;
        bottom: clamp(6rem, 14dvh, 10rem);
        left: 1.5rem;
        font-size: clamp(1.05rem, 3.5vw, 1.4rem);
        line-height: 1.35;
        max-width: calc(100vw - 3rem);
        letter-spacing: 0;
    }

    .subtitle-bottom.text-reveal {
        display: block;
    }

    .hero-links {
        top: auto;
        bottom: clamp(1.2rem, 3dvh, 3rem);
        left: 1.5rem;
        gap: clamp(0.25rem, 0.8dvh, 0.5rem);
    }

    .paper-link,
    .waitlist-link {
        font-size: clamp(0.78rem, 2.4vw, 1.05rem);
    }

    .paper-icon {
        width: clamp(0.9rem, 2.8vw, 1.3rem);
        height: clamp(0.9rem, 2.8vw, 1.3rem);
    }

    /* 第二页右对齐文本块在窄屏上撑满并居中 */
    .right-align {
        align-self: center;
        margin-right: 0;
        padding: 1.5rem 0;
    }

    #page-2 .content-block {
        max-width: calc(100vw - 3rem);
    }

    #page-2 .content-block h3 {
        font-size: clamp(1.4rem, 5vw, 1.85rem);
        margin-bottom: clamp(0.6rem, 2vw, 1.2rem);
    }

    #page-2 .content-block p {
        font-size: clamp(0.68rem, 2vw, 0.82rem);
        line-height: 1.56;
        -webkit-hyphens: none;
        hyphens: none;
    }
}

.logo-small {
    font-size: 1.2rem;
    font-weight: 500;
    position: absolute;
    top: 2.5rem;
    left: 4rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.logo-small::before {
    width: 1.23em;
    height: 0.99em;
    margin-right: 0.24em;
    vertical-align: -0.05em;
}

/* 文本块容器 */
.content-block {
    max-width: min(600px, 38vw);
    margin-top: auto;
    margin-bottom: auto;
}

/* 右侧对齐布局 (引入微弱毛玻璃模糊层) */
.right-align {
    align-self: flex-end;
    margin-right: 4vw;
    text-align: justify;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2.2rem;
    border-radius: 0;
}

#page-2 .content-block {
    max-width: min(600px, 40vw);
}

/* 居中对齐布局 */
.center-align {
    align-self: center;
    text-align: justify;
    max-width: min(880px, 62vw);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2.2rem;
    border-radius: 0;
}

.content-block h3,
.content-block h4,
.content-block p,
.subtitle-bottom {
    text-shadow:
        0 0 16px rgba(246, 246, 244, 0.9),
        0 0 34px rgba(246, 246, 244, 0.58);
}

h3 {
    font-size: 3.1rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

#page-2 .content-block h3,
#page-3 .discovery-copy h3,
#page-5 .join-copy h3 {
    text-align: center;
    transform: none;
}

h4 {
    font-size: 1.2rem;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
}

p {
    font-family: 'Inter', sans-serif;
    font-size: 1.45rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin-bottom: 1.2rem;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: -0.02em;
}

.role-link {
    color: rgba(26, 26, 26, 0.82);
    text-decoration: underline;
    text-decoration-color: rgba(82, 109, 126, 0.42);
    text-underline-offset: 0.18em;
    transition: color 0.24s ease, text-decoration-color 0.24s ease;
}

.role-link:hover {
    color: #1a1a1a;
    text-decoration-color: rgba(82, 109, 126, 0.72);
}

#page-3 .discovery-copy {
    max-width: min(700px, 46vw);
    margin-right: 4vw;
    padding: 1.2rem 1.35rem;
}

#page-3 .discovery-copy h3 {
    font-size: clamp(2.2rem, 3.0vw, 2.9rem);
    line-height: 1.08;
    margin-bottom: 2.15rem;
    white-space: nowrap;
}

#page-3 .discovery-copy p {
    font-size: clamp(1.22rem, 1.36vw, 1.42rem);
    line-height: 1.65;
    margin-bottom: 1.05rem;
    letter-spacing: 0;
    -webkit-hyphens: none;
    hyphens: none;
}

.particle-underline {
    --highlight-width: 0%;
    position: relative;
    display: inline;
    padding: 0 0.035em 0.09em;
    color: #1a1a1a;
    -webkit-text-fill-color: rgba(26, 26, 26, 0.92);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-image:
        linear-gradient(90deg, rgba(88, 111, 132, 0), rgba(91, 117, 140, 0.30) 8%, rgba(86, 119, 150, 0.66) 42%, rgba(95, 126, 154, 0.62) 76%, rgba(154, 160, 160, 0.32) 92%, rgba(154, 160, 160, 0));
    background-repeat: no-repeat;
    background-size: var(--highlight-width) 0.16em;
    background-position: 0 calc(100% - 0.04em);
    text-shadow:
        0 0 12px rgba(246, 246, 244, 0.86),
        0 0 20px rgba(246, 246, 244, 0.52);
}

#page-4 {
    padding: 0;
    align-items: center;
    justify-content: center;
}

#page-4 .logo-small {
    top: 4rem;
    left: 4rem;
}

#page-4 .team-copy {
    max-width: min(1080px, 76vw);
    margin: 0 auto;
    padding: 1.7rem 2rem;
    text-align: center;
}

#page-4 .team-copy h3 {
    text-align: center;
    font-size: clamp(2.6rem, 3.8vw, 3.5rem);
    line-height: 1.06;
    margin-bottom: 2rem;
}

#page-4 .team-copy p {
    font-size: clamp(1.38rem, 1.56vw, 1.62rem);
    line-height: 1.62;
    margin-bottom: 0.92rem;
    letter-spacing: 0;
    text-align: center;
    text-align-last: center;
    -webkit-hyphens: none;
    hyphens: none;
}

@media (max-width: 768px), (max-device-width: 768px), (orientation: portrait) and (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    #page-3 .discovery-copy {
        max-width: calc(100vw - 3rem);
        margin-right: 0;
        padding: 1rem 0;
        align-self: center;
    }

    #page-3 .discovery-copy h3 {
        font-size: clamp(1.4rem, 4.5vw, 1.85rem);
        margin-bottom: clamp(0.8rem, 2.5vw, 1.3rem);
        white-space: normal;
    }

    #page-3 .discovery-copy p {
        font-size: clamp(0.68rem, 2vw, 0.82rem);
        line-height: 1.56;
        margin-bottom: 0.78rem;
    }

    #page-4 .team-copy {
        max-width: calc(100vw - 3rem);
        margin: 0 auto;
        padding: 0.8rem 0;
    }

    #page-4 .team-copy h3 {
        font-size: clamp(1.6rem, 5.2vw, 2.1rem);
        margin-bottom: clamp(0.8rem, 2.5vw, 1.4rem);
    }

    #page-4 .team-copy p {
        font-size: clamp(0.68rem, 2vw, 0.82rem);
        line-height: 1.46;
        margin-bottom: 0.72rem;
    }
}

#page-5 {
    padding: 4rem;
    justify-content: center;
    align-items: stretch;
}

#page-5 .logo-small {
    top: 2.5rem;
    left: 4rem;
}

#page-5 .join-copy {
    position: relative;
    max-width: none;
    width: 100%;
    min-height: calc(100vh - 8rem);
    min-height: calc(100dvh - 8rem);
    margin: 0;
    padding: 0;
    text-align: justify;
}

#page-5 .join-left {
    width: min(740px, 60vw);
    margin-left: 1vw;
    padding-top: 9.6vh;
}

#page-5 .join-copy h3 {
    text-align: center;
    font-size: clamp(2.35rem, 3.5vw, 3.35rem);
    line-height: 1;
    margin-bottom: 1.28rem;
}

.join-main p {
    font-size: clamp(1.38rem, 1.56vw, 1.62rem);
    line-height: 1.55;
    margin-bottom: 0.76rem;
}

.join-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.1rem;
    row-gap: 0.74rem;
}

.join-application {
    max-width: 600px;
    margin-top: 1.05rem;
}

.join-details > h4 {
    grid-column: 1 / -1;
    margin: 0 0 0.18rem;
    font-size: 1.36rem;
}

.join-detail {
    border-top: 1px solid rgba(26, 26, 26, 0.18);
    padding-top: 0.62rem;
}

.join-detail-wide {
    grid-column: 1 / -1;
}

.join-detail h4 {
    margin: 0 0 0.26rem;
    font-size: clamp(1.28rem, 1.42vw, 1.52rem);
    letter-spacing: 0.02em;
    line-height: 1.34;
}

.join-detail p {
    font-size: clamp(1.28rem, 1.42vw, 1.52rem);
    line-height: 1.42;
    margin-bottom: 0;
}

.join-footer {
    font-size: 1.36rem;
    line-height: 1.42;
    margin-bottom: 0;
}

.join-side {
    position: absolute;
    left: -4rem;
    right: -4rem;
    bottom: -3.05rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.82rem 4rem 0.88rem;
    border-top: 1px solid rgba(26, 26, 26, 0.13);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(247, 247, 245, 0.34));
    backdrop-filter: blur(10px);
}

.join-footer-left {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.36rem;
}

.join-contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.52rem;
    margin: 0;
    color: rgba(26, 26, 26, 0.72);
    font-size: 1.36rem;
    line-height: 1.35;
}

.join-contact-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.36rem;
    white-space: nowrap;
}

.join-contact-item span:first-child {
    color: #1a1a1a;
    font-weight: 500;
}

.join-contact-item a {
    color: rgba(26, 26, 26, 0.72);
    text-decoration: none;
}

.join-divider {
    color: rgba(26, 26, 26, 0.28);
}

.join-footer-right {
    display: flex;
    min-width: min(520px, 46vw);
    align-items: center;
    justify-content: flex-end;
    gap: 1.1rem;
}

.join-footer-right h4 {
    margin: 0;
    font-size: 1.42rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
}

.social-logo {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.28s ease;
}

.social-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.82;
    transition: opacity 0.28s ease;
}

.social-logo:hover {
    transform: translateY(-2px);
}

.social-logo:hover img {
    opacity: 1;
}

.join-footer {
    margin: 0;
    color: rgba(26, 26, 26, 0.62);
}

.full-width-grid {
    position: relative; 
    width: 100vw;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* 极细浅色分割线 */
    background-color: #f6f6f4;
}

#page-4 .team-grid {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(246, 246, 244, 0.74);
}

.grid-row {
    display: flex;
    width: 100%;
}

/* 第一排底部的分割线 */
.grid-row.top-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.grid-item {
    flex: 1; /* 平分宽度 */
    text-align: center;
    padding: 1.25rem 0;
    font-size: 1.08rem;
    font-style: normal;
    color: #1a1a1a;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* 最后一列去掉右边框，保证边缘干净 */
.grid-item:last-child {
    border-right: none;
}

/* 悬停时的微弱交互 */
.grid-item:hover {
    background-color: #1a1a1a;
    color: #f6f6f4;
    cursor: default;
}

/* =========================================
   文字流光高亮动效 (精准的蓝黑渐变)
========================================= */
.text-reveal {
    /* 边界锐利化，左侧黑，右侧蓝 */
    background: linear-gradient(to right, #1a1a1a 0%, #1a1a1a 45%, #49759c 55%, #49759c 100%);
    background-size: 220% 100%;
    background-position: 100% 0; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 仅对长段落和标题使用 inline，防止多行渐变断层 */
p.text-reveal, 
h3.text-reveal, 
h4.text-reveal, 
.subtitle-bottom.text-reveal {
    display: inline; 
}

/* 网格项的文字是单行，不需要 inline，显式维持其原有的 flex 完美居中布局 */
.grid-item.text-reveal {
    display: flex; 
}

/* 针对标题、段落等块级元素的微调，确保排版不乱 */
h1.text-reveal, h2.text-reveal, h3.text-reveal, h4.text-reveal, p.text-reveal {
    display: block; 
}

.join-contact-line.text-reveal {
    display: flex;
}

@media (max-width: 768px), (max-device-width: 768px), (orientation: portrait) and (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .page:not(#page-1) .logo-small {
        top: 1.5rem;
        left: 1.5rem;
    }

    #page-5 {
        padding: 3.4rem 1.5rem 2rem;
    }

    #page-5 .logo-small {
        top: 2.2rem;
        left: 1.5rem;
    }

    #page-5 .join-copy {
        max-width: calc(100vw - 3rem);
        min-height: calc(100vh - 5.4rem);
        min-height: calc(100dvh - 5.4rem);
    }

    #page-5 .join-left {
        width: 100%;
        margin-left: 0;
        padding-top: 3rem;
    }

    #page-5 .join-copy h3 {
        font-size: clamp(1.6rem, 5.2vw, 2.1rem);
        margin-bottom: clamp(0.5rem, 1.5vw, 0.8rem);
        text-align: left;
    }

    .join-main p {
        font-size: clamp(0.62rem, 1.8vw, 0.76rem);
        line-height: 1.48;
        margin-bottom: 0.54rem;
    }

    #page-5 .join-left p.text-reveal {
        background: none !important;
        -webkit-background-clip: border-box !important;
        -webkit-text-fill-color: #4a4a4a !important;
        color: #4a4a4a !important;
    }

    #page-5 .join-left .role-link {
        position: relative;
        display: inline-block;
        text-decoration: none !important;
        -webkit-text-fill-color: currentColor !important;
    }

    #page-5 .join-left .role-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.04em;
        height: 1px;
        background: rgba(82, 109, 126, 0.62);
    }

    .join-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.46rem 0.72rem;
    }

    .join-application {
        margin-top: 0.62rem;
    }

    .join-details > h4 {
        font-size: 0.88rem;
    }

    .join-detail h4 {
        font-size: 0.68rem;
        line-height: 1.28;
    }

    .join-detail p {
        font-size: 0.68rem;
        line-height: 1.32;
    }

    .join-footer {
        font-size: 0.62rem;
        line-height: 1.28;
    }

    .join-side {
        position: absolute;
        left: -1.5rem;
        right: -1.5rem;
        bottom: -1.25rem;
        width: auto;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.56rem;
        padding: 0.62rem 1.5rem 0.68rem;
        border-top: none;
    }

    .join-contact-line {
        gap: 0.28rem;
        font-size: 0.62rem;
        line-height: 1.28;
    }

    .join-contact-item {
        gap: 0.24rem;
    }

    .join-footer-right {
        min-width: 0;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.38rem;
    }

    .join-footer-right h4 {
        font-size: 0.74rem;
    }

    .social-links {
        gap: 0.32rem;
        justify-content: flex-start;
    }

    .social-logo {
        width: 1.3rem;
        height: 1.3rem;
    }

    .grid-item {
        padding: 0.86rem 0;
        font-size: 0.82rem;
    }
}