/* ==========================================================================
   土管2025级·四年时间轴 — 样式系统
   方向A（暗色科技编辑风）+ 开场动画（参考 LONETRAIL 三色竖带 / 图2 WELCOME）
   基因色出处：research/palette.md（图1渐变 / 图2三色条实测）
   ========================================================================== */
/* 本地打包字体：Poppins ExtraBold（SIL OFL，仅拉丁子集 7.8KB）
   + URW Gothic Demi（AGPL v3 + 字体嵌入例外；ITC Avant Garde Gothic 系血缘字体） */
@font-face{
  font-family:"Poppins";
  src:url("../fonts/poppins-800-latin.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"URWGothic";
  src:url("../fonts/URWGothic-Demi.otf") format("opentype");
  font-weight:600; font-style:normal; font-display:swap;
}
:root{
  /* 基因色（实测原值，A6 验收项） */
  --gene-ink:#131011;      /* 图2 近黑底 */
  --gene-ink-2:#231C1D;    /* 图2 深褐黑 */
  --gene-brown:#583F36;    /* 图2 深褐 */
  --gene-teal:#86D0BC;     /* 图2 三色条·青（实测） */
  --gene-amber:#EDB148;    /* 图2 三色条·琥珀（实测） */
  --gene-red:#982B2C;      /* 图2 三色条·红（实测） */
  --gene-paper:#EDE5D6;    /* 图2 纸白 */
  --gene-gray:#9C9388;     /* 图2 半调灰 */
  /* 渐变（图1 扫描线） */
  --grad:linear-gradient(180deg,#9DCCBC 0%,#CAC992 22%,#F3BC5E 42%,#E89E51 60%,#CC6E43 78%,#A83B36 100%);
  --grad-h:linear-gradient(90deg,#9DCCBC,#CAC992 24%,#F3BC5E 46%,#E89E51 62%,#CC6E43 80%,#A83B36);
}
/* 暗色主题（默认） */
body{
  --bg:var(--gene-ink); --bg2:var(--gene-ink-2); --card-hover:#2A2223;
  --txt:var(--gene-paper); --dim:var(--gene-gray); --line:#3A2F2B;
  --c-competition:#86D0BC; --c-second:#EDB148; --c-eval:#C0453F;
  --c-course:#8E99A6; --c-award:#B06A86;
  --ok:#86D0BC; --ok-bg:rgba(134,208,188,.15); --ok-bd:rgba(134,208,188,.35);
  --pt:#EDB148; --pt-bg:rgba(237,177,72,.13); --pt-bd:rgba(237,177,72,.35);
  --pr:#E4604E; --pr-bg:rgba(192,69,63,.16); --pr-bd:rgba(192,69,63,.42);
  --chip-on-txt:var(--gene-ink);
  --noise-opacity:.06;
}
/* 浅色主题 */
body.light{
  --bg:#F4EFE4; --bg2:#FFFFFF; --card-hover:#FFFFFF;
  --txt:#131011; --dim:#6B6259; --line:#D9CFC0;
  --c-competition:#2E9E8F; --c-second:#C98A1E; --c-eval:#A83B36;
  --c-course:#4A5560; --c-award:#8E3A5C;
  --ok:#1F6D61; --ok-bg:rgba(46,158,143,.14); --ok-bd:rgba(46,158,143,.4);
  --pt:#8A6210; --pt-bg:rgba(201,138,30,.16); --pt-bd:rgba(201,138,30,.45);
  --pr:#A83B36; --pr-bg:rgba(168,59,54,.12); --pr-bd:rgba(168,59,54,.4);
  --chip-on-txt:#F4EFE4;
  --noise-opacity:.04;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt); overflow-x:hidden;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.65;
  transition:background .25s,color .25s;
}
/* 噪点（SVG feTurbulence 生成，无外部资源） */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:940; opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
/* 取景框 + 左缘扫描线 + 右上 ∞ 图标（参考图氛围，纯装饰） */
.frame{position:fixed; inset:10px; border:1px solid var(--line); border-radius:22px; pointer-events:none; z-index:930; opacity:.55}
.scanlines{position:fixed; left:10px; top:10px; bottom:10px; width:150px; pointer-events:none; z-index:931; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(156,147,136,.16) 0 2px, transparent 2px 7px);
  -webkit-mask-image:radial-gradient(120% 90% at 0% 40%, #000 25%, transparent 75%);
  mask-image:radial-gradient(120% 90% at 0% 40%, #000 25%, transparent 75%);
  border-radius:22px 0 0 22px;
}
.corner-ico{position:fixed; right:34px; top:30px; z-index:932; display:flex; gap:10px; align-items:center; opacity:.85; pointer-events:none}
.corner-ico svg{display:block}
@media (max-width:640px){ .scanlines{width:70px} .frame{inset:6px; border-radius:16px} .corner-ico{right:20px;top:20px} }

.wrap{max-width:1080px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ====================== 开场动画（≤1s，一镜到底） ====================== */
#intro{position:fixed; inset:0; z-index:960; background:var(--bg); display:flex; align-items:center; justify-content:center; overflow:hidden}
#intro.done{display:none}
.intro-band{
  position:absolute; left:50%; top:0; height:130vh; width:66px; margin-left:-33px;
  background:linear-gradient(90deg,var(--gene-teal) 0 33.4%,var(--gene-amber) 33.4% 66.7%,var(--gene-red) 66.7% 100%);
  box-shadow:0 0 30px rgba(237,177,72,.22), 0 0 80px rgba(152,43,44,.15);
  transform:translateY(115vh); will-change:transform,width,margin,opacity;
}
.intro-welcome{
  position:relative; z-index:2; text-align:center; color:#EDE5D6; opacity:0;
  font-weight:900; letter-spacing:.02em; will-change:opacity,transform;
}
.intro-welcome .en{display:block; font-size:clamp(44px,7.4vw,84px); line-height:1.05;
  font-family:"URWGothic","URW Gothic","Century Gothic","Poppins",sans-serif; font-weight:600; letter-spacing:.03em}
/* W 为手绘 SVG：「V（右侧垂直）+ N」拼合，复刻参考图的右倾结构 */
.intro-welcome .en .w{height:.72em;width:auto;display:inline-block;fill:currentColor;vertical-align:-.005em;margin-right:.015em}
.intro-welcome .cn{display:block; font-size:clamp(30px,5vw,56px); margin-top:4px}
.intro-welcome .bars{display:flex; gap:6px; justify-content:center; margin-top:18px}
.intro-welcome .bars u{display:block; width:44px; height:6px; border-radius:2px; transform:scaleX(0); transform-origin:left center}
.intro-welcome .bars u:nth-child(1){background:var(--gene-teal)}
.intro-welcome .bars u:nth-child(2){background:var(--gene-amber)}
.intro-welcome .bars u:nth-child(3){background:var(--gene-red)}
/* 阶段类由 app.js 添加
   ph1(0ms) 欢迎语淡入 → ph2(80ms) 竖带线性上升 → ph3(380ms) 欢迎语淡出
   → ph4(480ms) 竖带变细/左移/收尾淡出 → 660ms 总幕布撤除，标题花纹渐现 → 卡片级联 */
#intro.ph1 .intro-welcome{animation:wIn .18s ease-out forwards}
#intro.ph1 .intro-welcome .bars u{animation:barIn .18s ease-out forwards}
#intro.ph1 .intro-welcome .bars u:nth-child(2){animation-delay:.04s}
#intro.ph1 .intro-welcome .bars u:nth-child(3){animation-delay:.08s}
#intro.ph2 .intro-band{animation:bandRise .4s linear forwards}
#intro.ph3 .intro-welcome{animation:wOut .15s ease-in forwards}
#intro.ph4 .intro-band{animation:bandMorph .18s cubic-bezier(.55,.06,.4,1) forwards}
@keyframes wIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes wOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes barIn{to{transform:scaleX(1)}}
@keyframes bandRise{from{transform:translateY(115vh)}to{transform:translateY(-12vh)}}
@keyframes bandMorph{
  from{transform:translateY(-12vh); width:66px; margin-left:-33px; opacity:1; left:50%}
  to  {transform:translateY(-94vh); width:6px;  margin-left:-3px;  opacity:0;
       left:max(29px, calc((100vw - 1080px) / 2 + 29px))}
}
@media (prefers-reduced-motion: reduce){ #intro{display:none} }

/* 页面整体开场隐藏 → .ready 后渐现（标题/花纹 → 卡片级联由 app.js 控制） */
body:not(.ready) .reveal{opacity:0; transform:translateY(8px)}
body:not(.ready){overflow:hidden}
.reveal{transition:opacity .3s ease, transform .3s ease}
body.ready .reveal{opacity:1; transform:none}
body.ready .d0{transition-delay:0s}
body.ready .d1{transition-delay:.02s}
body.ready .d2{transition-delay:.05s}
body.ready .d3{transition-delay:.09s}
body.ready .d4{transition-delay:.12s}
body.ready .d5{transition-delay:.15s}

/* ====================== 头部 ====================== */
header{position:relative;padding:64px 0 30px;overflow:hidden}
header svg.arcs{position:absolute;right:-120px;top:-160px;width:560px;height:560px;opacity:.5;pointer-events:none}
.kicker{font-size:12px;letter-spacing:.35em;color:var(--dim);text-transform:uppercase;margin-bottom:14px}
.kicker b{color:var(--c-competition);font-weight:600}
h1{font-size:clamp(34px,6vw,64px);font-weight:900;line-height:1.08;letter-spacing:.01em}
h1 .gradtxt{background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .thin{color:var(--dim);font-weight:300}
.sub{margin-top:10px;color:var(--dim);font-size:13px;letter-spacing:.04em;max-width:760px}
.colorbar{display:flex;height:5px;width:220px;margin-top:22px}
.colorbar i{flex:1}
.colorbar i:nth-child(1){background:var(--gene-teal)}
.colorbar i:nth-child(2){background:var(--gene-amber)}
.colorbar i:nth-child(3){background:var(--gene-red)}
.stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.stat b{display:block;font-size:30px;font-weight:900;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--dim);letter-spacing:.12em}
.stat b.c1{color:var(--c-competition)} .stat b.c2{color:var(--c-second)} .stat b.c3{color:var(--c-eval)}

/* ====================== 即将截止 ====================== */
.upcoming{margin:34px 0 8px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(134,208,188,.05),transparent 60%)}
.upcoming h2{font-size:13px;letter-spacing:.3em;color:var(--c-competition);padding:14px 18px 0}
#updTime{font-size:11px;color:var(--dim);letter-spacing:.02em;margin-left:10px}
.up-list{padding:10px 18px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.up-item{display:flex;align-items:center;gap:12px;font-size:14px;min-width:0}
.up-item .dot{width:8px;height:8px;border-radius:50%;flex:none}
.up-item .cd{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:86px;color:var(--c-second)}
.up-item .cd.hot{color:var(--pr)}
.up-item .cd.ok{color:var(--c-competition)}
.up-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.up-item .d{color:var(--dim);font-size:12px;white-space:nowrap}

/* ====================== 筛选与导航（吸附） ====================== */
.filters{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 0 8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--dim);cursor:pointer;font-size:13px;transition:.18s;user-select:none}
.chip:hover{border-color:var(--dim)}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip.on{color:var(--chip-on-txt);font-weight:700;border-color:transparent}
.chip[data-cat="all"].on{background:var(--txt)}
.chip[data-cat="competition"].on{background:var(--c-competition)}
.chip[data-cat="second_classroom"].on{background:var(--c-second)}
.chip[data-cat="evaluation"].on{background:var(--c-eval);color:var(--gene-paper)}
body.light .chip[data-cat="evaluation"].on{color:#fff}
.chip[data-cat="course"].on{background:var(--c-course);color:var(--gene-paper)}
body.light .chip[data-cat="course"].on{color:#fff}
.chip[data-cat="award"].on{background:var(--c-award);color:var(--gene-paper)}
body.light .chip[data-cat="award"].on{color:#fff}
.chips .spacer{margin-left:auto}
.lvsel{display:flex;gap:6px}
.lvsel button,.theme-btn,.nav-toggle{background:transparent;border:1px solid var(--line);color:var(--dim);font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit}
.lvsel button.on{background:var(--gene-brown);color:var(--gene-paper)}
body.light .lvsel button.on{background:var(--txt);color:var(--bg)}
.theme-btn{min-width:64px}
.theme-btn:hover,.nav-toggle:hover{border-color:var(--dim);color:var(--txt)}
/* 学期导航行 */
.semnav{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.semnav a{font-size:12px;color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:4px 10px;white-space:nowrap}
.semnav a:hover{color:var(--txt);border-color:var(--dim)}
.semnav a.now{color:var(--bg);background:var(--c-competition);border-color:transparent;font-weight:700}
body.light .semnav a.now{color:#fff}
.semnav a.cur::after{content:"●";font-size:8px;margin-left:4px;vertical-align:2px;color:var(--c-competition)}
.semnav a.now.cur::after{color:var(--bg)}
@media (max-width:700px){
  .chips{gap:6px}
  .chips .spacer{margin-left:0}
  .semnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
}

/* ====================== 时间轴 ====================== */
main{padding:38px 0 76px}
.sem{position:relative;margin-bottom:52px;scroll-margin-top:130px}
.sem-head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.sem-head .big{font-size:clamp(30px,4.6vw,46px);font-weight:900;letter-spacing:.02em}
.sem-head .range{color:var(--dim);font-size:13px;letter-spacing:.1em}
.sem-head .code{color:var(--gene-brown);font-size:12px;margin-left:auto;letter-spacing:.2em}
body.light .sem-head .code{color:var(--dim)}
.rail{position:absolute;left:7px;top:64px;bottom:-40px;width:6px;border-radius:3px;opacity:.9;
  background:linear-gradient(90deg,var(--gene-teal) 0 33.4%,var(--gene-amber) 33.4% 66.7%,var(--gene-red) 66.7% 100%)}
.sem:last-child .rail{display:none}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-left:36px}
.card{position:relative;border:1px solid var(--line);background:var(--bg2);cursor:pointer;transition:border-color .2s,transform .2s,background .2s;overflow:hidden;min-width:0}
.card:hover{border-color:var(--gene-brown);transform:translateX(2px)}
body.light .card:hover{border-color:var(--dim)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.card[data-cat~="competition"]::before{background:var(--c-competition)}
.card[data-cat~="second_classroom"]::before{background:var(--c-second)}
.card[data-cat~="evaluation"]::before{background:var(--c-eval)}
.card[data-cat~="course"]::before{background:var(--c-course)}
.card[data-cat~="award"]::before{background:var(--c-award)}
.card .row1{display:flex;align-items:center;gap:12px;padding:14px 16px 12px 18px}
.card .when{font-variant-numeric:tabular-nums;font-weight:900;font-size:15px;white-space:nowrap}
.card .ttl{flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.ttl{color:inherit;text-decoration:none;cursor:pointer}
a.ttl:hover{text-decoration:underline;text-underline-offset:3px;color:var(--c-competition)}
a.ttl::after{content:"↗";font-size:11px;opacity:.5;margin-left:5px}
.card .row2{padding:0 16px 14px 18px;color:var(--dim);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 8px;border-radius:3px;white-space:nowrap;letter-spacing:.05em}
.badge.confirmed{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd)}
.badge.pattern{background:var(--pt-bg);color:var(--pt);border:1px solid var(--pt-bd)}
.badge.predicted{background:var(--pr-bg);color:var(--pr);border:1px solid var(--pr-bd)}
.badge.lv,.badge.gap{border:1px solid var(--line);color:var(--dim)}
.card .more{display:none;border-top:1px dashed var(--line);padding:14px 16px 16px 18px;font-size:13.5px}
.card.open .more{display:block}
.card.open{border-color:var(--dim);background:var(--card-hover)}
.more .seg{margin-bottom:9px}
.more .seg .k{color:var(--c-competition);font-size:12px;letter-spacing:.15em;margin-right:8px}
body.light .more .seg .k{color:var(--c-competition)}
.more b{color:var(--txt)}
.more .srcs{display:grid;gap:6px;margin-top:4px}
.more .srcs a{color:var(--c-competition);word-break:break-all;text-decoration:none;font-size:12.5px}
.more .srcs a:hover{text-decoration:underline}
.more .srcs .pd{color:var(--dim);font-size:11.5px;margin-left:6px}
.more .basis{color:var(--dim);font-size:12.5px}
.tag{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:3px;padding:1px 7px;color:var(--dim);margin-right:6px}
.empty{color:var(--dim);border:1px dashed var(--line);padding:30px;text-align:center;letter-spacing:.1em}
/* 卡片级联出现 */
.card.pop{opacity:0;transform:translateY(10px)}
.card.pop.shown{opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}

/* ====================== 页脚 ====================== */
footer{border-top:1px solid var(--line);padding:28px 0 60px;color:var(--dim);font-size:12px;line-height:2;position:relative;z-index:1}
footer .cl{display:inline-flex;gap:10px;flex-wrap:wrap;margin-top:6px}
footer .cl i{display:inline-flex;align-items:center;gap:5px;font-style:normal}
footer .cl .dot{width:8px;height:8px;border-radius:50%}
footer .gaps{margin-top:14px;border:1px dashed var(--line);padding:12px 16px;border-radius:8px;color:var(--dim)}
footer .gaps b{color:var(--txt)}

/* ====================== 移动端（按页面宽度自动换行排布） ====================== */
@media (max-width:720px){
  /* 事件卡：第一行 = 日期 + 徽标；名称独占第二行、完整多行显示 */
  .card .row1{flex-wrap:wrap;row-gap:5px}
  .card .when{order:1}
  .card .badge{order:1}
  .card .ttl{order:2;flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;padding-right:2px}
  /* 即将截止：第一行 = 倒计时 + 日期；名称换行显示 */
  .up-item{flex-wrap:wrap;row-gap:2px}
  .up-item .cd{order:1}
  .up-item .dot{order:1}
  .up-item .d{order:1;margin-left:auto}
  .up-item .t{order:2;flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
}