/* style.css (已更新为舒适的灰色调) */

/* --- 颜色变量定义 --- */
:root {
    --color-background: #1c1c1e; /* 深炭灰色背景 */
    --color-text-primary: #f5f5f7; /* 柔和的灰白主色 */
    --color-text-secondary: #8d8d92; /* 中度灰色，用于次要信息和悬停 */
}

/* --- 基本重置与全局样式 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}
a { color: inherit; text-decoration: none; }

/* --- 页面容器 --- */
.page {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

/* --- 首页 (Home) --- */
#home {
    will-change: opacity, filter, transform;
    transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.title {
    font-size: 20vw;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 8vh;
}

/* --- 滚动虚线图标按钮 --- */
.icon-button {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.link-icon-svg {
    width: 35%;
    height: 35%;
    color: var(--color-text-primary);
    transition: transform 0.3s ease;
    z-index: 10;
}
.icon-button:hover .link-icon-svg {
    transform: scale(1.15);
}
.dashed-circle-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.dashed-circle {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 2;
    stroke-dasharray: 4 10;
    animation: march 1s linear infinite;
}
@keyframes march {
    from { stroke-dashoffset: 14; }
    to { stroke-dashoffset: 0; }
}

/* --- 链接页 (Links) --- */
#links {
    will-change: opacity, visibility;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0s 0.7s;
}
.links-title { font-size: 4rem; font-weight: 700; margin-bottom: 3rem; }
.links-list { list-style: none; margin-bottom: 4rem; }
.links-list li { margin: 1.5rem 0; }
.links-list a {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    padding: 0.5em;
    transition: letter-spacing 0.4s ease, color 0.4s ease;
}
.links-list a:hover {
    letter-spacing: 0.25em;
    color: var(--color-text-secondary); /* 使用次要颜色作为悬停色 */
}
.back-link {
    font-size: 1rem;
    color: var(--color-text-secondary); /* 使用次要颜色 */
    transition: color 0.3s ease;
}
.back-link:hover {
    color: var(--color-text-primary); /* 悬停时恢复主色 */
}

/* --- 页面切换与背景虚化 --- */
#links:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease;
}
#links:target ~ #home {
    filter: blur(10px);
    transform: scale(0.95);
    opacity: 0.3;
    pointer-events: none;
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    .title {
        font-size: 35vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        letter-spacing: 0;
    }
    .org-subtitle {
        font-size: 7vw;
        font-weight: 300;
        letter-spacing: 0.3em;
        margin-top: -1vh;
    }
    .links-title { font-size: 2.5rem; }
    .links-list a { font-size: 1rem; }
}