/* ================================================================
   NLP 进化历程 — 现代学术风格
   暖白 · 墨蓝 · 鎏金
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --ink: #5C4A2E;        /* 深金棕 — 文字 */
    --ink-light: #8B7355;  /* 暖棕 — 次要文字 */
    --paper: #FFFDF8;      /* 暖白 — 卡片 */
    --bg: #F9F3E8;         /* 淡金底 */
    --gold: #C8B078;       /* 香槟金 — 主色 */
    --gold-light: #DDCFA8; /* 浅金 */
    --gold-deep: #B09860;  /* 深金 */
    --coral: #D4A88C;      /* 暖杏 — 辅助 */
    --teal: #9BB5A0;       /* 柔绿 — 辅助 */
    --border: #E8DFCC;     /* 暖金边框 */
    --shadow: 0 2px 12px rgba(140,120,80,.08);
    --shadow-lg: 0 8px 30px rgba(140,120,80,.12);
    --radius: 10px;
    --radius-lg: 16px;
}

body {
    font-family: 'STSong', 'SimSun', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
    background-color: var(--bg);
    min-height: 100vh;
    padding: 0;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
}

.container { max-width: 1100px; margin: 0 auto; }

/* ---- 通用卡片 ---- */
header {
    text-align: center; margin-bottom: 40px; padding: 28px 24px;
    border: 1px solid var(--border); background: var(--paper);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
header h1 { color: var(--ink); font-size: 1.6rem; margin-bottom: 8px; font-weight: 700; letter-spacing: 2px; }
header p  { color: var(--ink-light); font-size: 0.9rem; letter-spacing: 1px; }

/* ---- 导航卡片网格 ---- */
.nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }

.nav-card {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(.25,.8,.25,1);
    box-shadow: var(--shadow);
    position: relative;
}
.nav-card::after {
    content: '';
    position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px;
    border-radius: 2px;
    transition: all .4s;
}
.nav-card:nth-child(5n+1)::after { background: var(--gold); }
.nav-card:nth-child(5n+2)::after { background: var(--gold-deep); }
.nav-card:nth-child(5n+3)::after { background: var(--gold-light); }
.nav-card:nth-child(5n+4)::after { background: #D4A88C; }
.nav-card:nth-child(5n+0)::after { background: #B8C8A8; }

.nav-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.nav-card:hover::after { left: 8%; right: 8%; height: 3px; }

.nav-card .icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; transition: transform .4s;
}
.nav-card:hover .icon { transform: scale(1.06); }
.nav-card h3 { color: var(--ink); margin-bottom: 8px; font-size: 1.1rem; letter-spacing: 1px; font-weight: 700; }
.nav-card p  { color: var(--ink-light); font-size: 0.85rem; line-height: 1.6; }
.nav-card.featured-card { border-color: var(--gold); background: linear-gradient(180deg, #FFFCF5, var(--paper)); }

.icon-img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.title-icon { width: 32px; height: 32px; margin-right: 10px; vertical-align: middle; border: 1px solid var(--border); padding: 2px; border-radius: 4px; }

.back-link {
    display: inline-block; margin-bottom: 30px; color: var(--ink);
    text-decoration: none; font-size: 0.95rem; padding: 10px 22px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--paper); transition: all .3s;
}
.back-link:hover { border-color: var(--gold); color: var(--gold); background: #FFFCF5; }


/* ================================================================
   Slide 全屏系统
   ================================================================ */

/* ---- 飘浮汉字 ---- */
.floating-bg {
    position: fixed; top: 0; bottom: 0; width: 100px;
    pointer-events: none; z-index: 1; overflow: hidden;
    font-weight: 800; opacity: .05; white-space: nowrap;
    font-family: 'STSong', 'SimSun', serif;
}
.floating-left  { left: 2px; writing-mode: vertical-rl; text-orientation: mixed; }
.floating-right { right: 2px; writing-mode: vertical-rl; text-orientation: mixed; }
.float-column { display: flex; flex-direction: column; gap: 40px; animation: floatUp 28s linear infinite; }
.float-item { font-size: 18px; letter-spacing: 5px; color: var(--ink); opacity: .25; }
@keyframes floatUp { 0%{transform:translateY(100%)} 100%{transform:translateY(-100%)} }

/* ---- 进度条 ---- */
#progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 50; pointer-events: none; }
#progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-deep)); transition: width .12s linear; }

/* ---- 导航 ---- */
#dot-nav { position: fixed; right: 1.6vw; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#dot-nav .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); opacity: .15; cursor: pointer; border: none; padding: 0; outline: none; transition: all .4s ease; position: relative; }
#dot-nav .dot:hover { opacity: .35; transform: scale(1.5); }
#dot-nav .dot.active { opacity: .85; transform: scale(1.4); box-shadow: 0 0 8px rgba(200,176,120,.35); background: var(--gold); }
#dot-nav .dot .dot-label { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: monospace; font-size: 9px; letter-spacing: .1em; opacity: 0; pointer-events: none; transition: opacity .3s; color: var(--ink-light); }
#dot-nav .dot:hover .dot-label { opacity: .5; }

#back-to-top {
    position: fixed; bottom: 5vh; right: 1.8vw; z-index: 40;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--paper);
    color: var(--ink); font-size: 16px; cursor: pointer;
    opacity: 0; transform: translateY(20px);
    transition: all .4s ease; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
}
#back-to-top.visible { opacity: .7; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { opacity: 1; transform: translateY(-4px); background: var(--gold); color: #fff; border-color: var(--gold); }

#seal-watermark {
    position: fixed; bottom: 4vh; left: 3vw;
    width: 140px; height: 140px;
    background: url('images/同济大学LOGO.png') center/contain no-repeat;
    opacity: .2; pointer-events: none; z-index: 5;
}

/* ---- Slide ---- */
body:has(#deck) { padding: 0; }
#deck { position: relative; z-index: 10; width: 100%; }
.slide { width: 100%; min-height: 100vh; position: relative; padding: 6vh 6vw 10vh 6vw; display: flex; flex-direction: column; }
.slide .frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 封面：纯金暖调 */
.slide.hero {
    background: linear-gradient(175deg, #FDF8ED 0%, #F8EFDA 18%, #F5E9CE 40%, #F9F0DE 65%, #FDFAF2 100%);
    color: var(--ink);
}
.slide.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 80%, rgba(200,176,120,.10) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, rgba(212,168,140,.07) 0%, transparent 40%);
}
.slide.hero .frame { position: relative; z-index: 1; }

/* 里程碑页：暖金 */
.slide.light { background: linear-gradient(180deg, #FFFDF8 0%, #F9F2E4 100%); }

.slide .chrome {
    display: flex; justify-content: space-between; align-items: flex-start;
    font-family: 'Georgia', 'STSong', serif; font-size: max(10px,.7vw);
    letter-spacing: .16em; text-transform: uppercase; opacity: .35; flex-shrink: 0;
}
.slide.hero .chrome { color: var(--ink-light); }
.slide.light .chrome { color: var(--ink-light); }

.slide .foot {
    margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;
    font-family: 'Georgia', 'STSong', serif; font-size: max(10px,.65vw);
    letter-spacing: .12em; text-transform: uppercase; opacity: .25; flex-shrink: 0;
}
.slide.hero .foot { color: var(--ink-light); }
.slide.light .foot { color: var(--ink-light); }


/* ---- 排版 ---- */
.kicker {
    font-family: 'Georgia', 'STSong', serif;
    font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
    opacity: .55; margin-bottom: 2vh;
}
.slide.hero .kicker { color: var(--gold); }
.slide.light .kicker { color: var(--gold); }

.h-hero {
    font-family: 'STSong','SimSun','Noto Serif SC',serif;
    font-weight: 900; font-size: clamp(2rem, 5.5vw, 4.2rem);
    line-height: 1.08; letter-spacing: .02em; margin-bottom: 2vh;
}
.slide.hero .h-hero { color: var(--ink); }
.slide.light .h-hero { color: var(--ink); }

.h-sub {
    font-family: 'STSong','SimSun',serif; font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.4; opacity: .7;
}
.slide.hero .h-sub { color: var(--ink-light); }
.slide.light .h-sub { color: var(--ink-light); }

.lead {
    font-family: 'STSong','SimSun',serif; font-weight: 400;
    font-size: clamp(.85rem, 1.2vw, 1.1rem); line-height: 1.9; opacity: .7;
}
.slide.hero .lead { color: var(--ink-light); }
.slide.light .lead { color: var(--ink-light); }

.meta-row {
    display: flex; gap: 1em; align-items: baseline; flex-wrap: wrap;
    font-family: 'Georgia', 'STSong', serif;
    font-size: max(10px,.8vw); letter-spacing: .14em;
    text-transform: uppercase; opacity: .4;
}
.slide.hero .meta-row { color: var(--ink-light); }
.slide.light .meta-row { color: var(--ink-light); }


/* ---- 动效 ---- */
[data-anim] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-anim].revealed { opacity: 1; transform: translateY(0); }
body.low-power [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
body.low-power .floating-bg { display: none; }
body.low-power #progress-fill { transition: none; }
body:not(.low-power) .slide { scroll-snap-align: start; }


/* ================================================================
   里程碑时间线 & 内容区域
   ================================================================ */
.milestone-timeline { position: relative; padding-left: 30px; }

.milestone-timeline::before {
    content: ''; position: absolute; left: 13px; top: 0; bottom: 0;
    width: 2px; border-radius: 1px;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-deep) 100%);
}

.milestone-item {
    position: relative; margin-bottom: 28px;
    border-left: 4px solid var(--gold);
    padding: 20px 24px; background: var(--paper);
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: all .35s cubic-bezier(.25,.8,.25,1);
    box-shadow: var(--shadow);
}
.milestone-item:nth-child(5n+1) { border-left-color: var(--gold); }
.milestone-item:nth-child(5n+2) { border-left-color: var(--gold-deep); }
.milestone-item:nth-child(5n+3) { border-left-color: var(--gold-light); }
.milestone-item:nth-child(5n+4) { border-left-color: #D4A88C; }
.milestone-item:nth-child(5n+0) { border-left-color: #B8C8A8; }

.milestone-item:hover {
    border-left-width: 6px;
    box-shadow: 0 8px 28px -8px rgba(28,25,21,.1);
    transform: translateX(3px);
}

.milestone-item::before {
    content: ''; position: absolute; left: -37px; top: 14px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--paper);
    border: 2.5px solid var(--gold);
    box-shadow: 0 0 0 3px var(--bg);
    transition: transform .3s;
}
.milestone-item:hover::before { transform: scale(1.3); }

/* ---- 内容区 ---- */
.content-section {
    background: var(--paper); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px;
    box-shadow: var(--shadow);
}
.content-section h2 {
    color: var(--ink); margin-bottom: 28px; font-size: 1.6rem;
    padding-bottom: 14px; border-bottom: 2px solid var(--border);
    letter-spacing: 2px; font-weight: 700;
}

/* ---- 时间线（子页面用） ---- */
.timeline { position: relative; }
.timeline::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, var(--gold), var(--border));
    transform: translateX(-50%); border-radius: 1px;
}
.timeline-item { position: relative; margin-bottom: 40px; display: flex; justify-content: center; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item.left .timeline-content  { margin-right: calc(50% + 30px); text-align: right; }
.timeline-item.right .timeline-content { margin-left: calc(50% + 30px); }

.timeline-dot {
    position: absolute; left: 50%; top: 20px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--paper); border: 2.5px solid var(--gold);
    transform: translateX(-50%); z-index: 1;
    box-shadow: 0 0 0 4px var(--bg);
}

.timeline-content {
    background: var(--paper); padding: 25px;
    border: 1px solid var(--border); border-radius: var(--radius);
    max-width: 400px; box-shadow: var(--shadow);
}
.timeline-content h3 { color: var(--ink); margin-bottom: 8px; font-size: 1.1rem; }
.timeline-content .era { color: var(--gold); font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; font-size: 0.9rem; }
.timeline-content .method { color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.timeline-content .description { color: var(--ink-light); line-height: 1.8; }
.timeline-content .example {
    background: var(--bg); padding: 15px; border: 1px solid var(--border);
    border-radius: 8px; margin-top: 15px;
    font-family: 'STKaiti','KaiTi','STSong',serif;
    font-size: 0.9rem; color: var(--ink);
}

/* ---- 演进卡片 ---- */
.evolution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.evolution-card {
    background: var(--paper); border: 1px solid var(--border);
    padding: 25px; border-radius: var(--radius);
    border-left: 4px solid var(--gold);
    transition: all .35s; box-shadow: var(--shadow);
}
.evolution-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.evolution-card h4 { color: var(--ink); margin-bottom: 12px; font-size: 1.1rem; }
.evolution-card .era { color: var(--gold); font-weight: 700; margin-bottom: 8px; display: block; font-size: 0.85rem; }
.evolution-card .desc { color: var(--ink-light); line-height: 1.7; }

/* ---- 演示横幅 ---- */
.demo-banner {
    background: linear-gradient(135deg, #FFFCF5, #FDF6E8);
    border: 1px solid var(--gold); border-radius: var(--radius-lg);
    padding: 0; margin-bottom: 30px; display: flex; align-items: center;
    justify-content: space-between; overflow: hidden;
    transition: all .35s; box-shadow: var(--shadow); cursor: pointer;
}
.demo-banner:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.demo-banner-content { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.demo-banner-icon { font-size: 2rem; }
.demo-banner-content h3 { color: var(--ink); font-size: 1.1rem; margin-bottom: 4px; }
.demo-banner-content p { color: var(--ink-light); font-size: 0.85rem; }
.demo-banner-arrow {
    font-size: 1.5rem; color: var(--gold); padding: 0 24px;
    transition: transform .3s;
}
.demo-banner:hover .demo-banner-arrow { transform: translateX(4px); }


/* ---- 响应式 ---- */
@media (max-width: 480px) {
    .floating-bg { display: none; }
    .slide { padding: 4vh 5vw 8vh 5vw; }
    .lead { max-width: 88vw; }
    #dot-nav { right: 3px; gap: 6px; } #dot-nav .dot { width: 5px; height: 5px; }
    #back-to-top { right: 6px; bottom: 3vh; width: 34px; height: 34px; font-size: 14px; }
    .timeline::before { left: 20px; }
    .timeline-item { flex-direction: column; }
    .timeline-item.left .timeline-content,
    .timeline-item.right .timeline-content { margin: 0 0 0 40px; text-align: left; }
    .timeline-dot { left: 20px; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .lead { max-width: 78vw; }
    .slide { padding: 5vh 5vw 9vh 5vw; }
}

body:has(#deck) { padding: 0; }