/* ============================================================
   门户页第十版：骨架样式（负责人）。首屏与顶栏在 critical.css（内联）；各屏自己的样式在 sections/*.css、demo/*.css。
   这里只有：屏的外框与间距、统一入场、团队与结尾、页脚、手作圈。
   颜色只引用 apps/web/css/kaopy.css 的 token，混色用 color-mix。产品窗口和页面反色（见 js/page.js 顶部），页面本身不铺色块。
   ============================================================ */

:root {
  --scr-pad: clamp(40px, 6vh, 72px);
  --reveal-dur: 560ms;
  --reveal-ease: cubic-bezier(.2, .8, .2, 1);
}

.hero-below { margin-top: 24px; }

/* ---------------- 屏：上下留白一致；挂载前给个高度，免得页面跳 ---------------- */
.scr { position: relative; padding: var(--scr-pad) var(--gutter); }
.scr[data-mount]:empty { min-height: 70vh; }
.h2 { font-size: var(--h2); font-weight: var(--fw-strong); line-height: 1.2; letter-spacing: var(--ls-title); text-wrap: balance; word-break: keep-all; }
.lead { color: var(--muted); font-size: var(--body); line-height: var(--body-lh); text-wrap: balance; word-break: keep-all; }
:lang(zh-CN) .h2, :lang(zh-CN) .lead { line-break: strict; }

/* ---------------- 统一入场：淡入加轻微上移，只一次（js/page.js 加 is-in） ---------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); }
.reveal.is-in { opacity: 1; transform: none; }
.rm .reveal, .reveal.is-in.no-motion { opacity: 1; transform: none; transition: none; }

/* ---------------- 5 团队与结尾 ---------------- */
/* 第 2 轮（Fable）：特点 3 → 团队句 → 评论 → 结尾 → 页脚，间距统一 120px，手机 80px */
:root { --tail-gap: 72px; }
@media (max-width: 600px) { :root { --tail-gap: 48px; } }
#features { padding-bottom: 0; }
.team, .reviews, .closing { padding-top: var(--tail-gap); padding-bottom: 0; }
.team { --team-offset: 64px; display: flex; justify-content: center; padding-top: calc(var(--scr-pad) + var(--team-offset)); padding-bottom: 0; }
.team-line {
  max-width: 44em; color: var(--ink); text-align: center;
  font-size: clamp(26px, 3vw, 38px); font-weight: var(--fw-regular); line-height: 1.6; text-wrap: balance;
}
:lang(zh-CN) .team-line { line-break: strict; word-break: keep-all; }
.team-line .cl { display: block; }
.team-body { display: block; max-width: 44em; margin-top: 16px; color: var(--ink); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.7; word-break: normal; }
.team-body-line { display: block; }
/* 人类 9/30：品牌名是这句的视觉重点；「清华」用清华紫加粗（全页唯一不取自 kaopy.css 的颜色，人类点名）。
   浅色 #660874 对页面底约 10:1；深色换成 #C79AD6，对深底约 7:1 */
.team-line .tm-brand { font-weight: var(--fw-strong); font-size: 1.2em; letter-spacing: var(--ls-title); }
.team-line .tm-thu { font-weight: var(--fw-strong); color: #660874; }
[data-theme="dark"] .team-line .tm-thu { color: #C79AD6; }
/* 内测评论，桌面三列，窄屏按自然高度排列。 */
.reviews { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; text-align: center; }

.rv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.rv { position: relative; display: flex; flex-direction: column; padding: 38px 24px 24px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rv-q { position: absolute; left: 16px; top: 6px; color: var(--border-strong); font-size: 40px; line-height: 1; font-family: Georgia, 'Noto Serif SC', serif; }
.rv blockquote { margin: 0 0 24px; font-size: 20px; line-height: 1.6; }
/* 来源：校徽 + 学校 · 院系。校徽 28px，和来源一行字一样克制；深色页面里放在白色圆底上（校徽原色是深色线条） */
.rv-source { display: flex; align-items: center; gap: 10px; margin-top: auto; color: var(--muted); font-size: var(--fs-ui); line-height: 1.5; }
.rv-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; }
[data-theme="dark"] .rv-logo { box-sizing: border-box; padding: 2px; background: #fff; }
@media (max-width: 760px) { .rv-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing .h2 { max-width: 16em; }
.closing-cta { margin-top: 32px; min-width: 160px; }
.closing .beta-note { margin-top: 12px; }
@media (max-width: 600px) { .closing-cta { width: 100%; } }

/* 结尾标题的句号：行内手作圈，进视口画一次（page.js） */
.cp { position: relative; display: inline-block; width: 0.44em; height: 0.5em; vertical-align: baseline; }
.cp svg { position: absolute; left: -0.06em; bottom: -0.1em; width: 0.5em; height: 0.5em; overflow: visible; }
:lang(en) .cp { width: 0.34em; }
:lang(en) .cp svg { left: -0.02em; width: 0.4em; height: 0.4em; }
.ring .ring-band, .ring .ring-dot { fill: var(--accent); }
.ring mask { mask-type: alpha; }
.ring .mask-ink { stroke: var(--mask-on); }
.ring .ring-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ring .ring-dot { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.2); }
.ring.is-lit .ring-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms cubic-bezier(.3, 0, .2, 1); }
.ring.is-lit .ring-dot { opacity: 1; transform: none; transition: opacity 180ms linear 520ms, transform 320ms cubic-bezier(.2, .9, .3, 1.35) 520ms; }
.ring.is-still .ring-draw { stroke-dashoffset: 0; transition: none; }
.ring.is-still .ring-dot { opacity: 1; transform: none; transition: none; }

/* ---------------- 页脚 ---------------- */
.foot { padding: 0 var(--gutter) 40px; }
main + .foot { margin-top: var(--tail-gap); }
.foot-row { max-width: var(--max); margin: 0 auto; padding-top: 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-sm); }
.foot-mark { width: 28px; height: 28px; display: block; }
.foot-word { height: 20px; width: auto; display: block; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 auto; color: var(--muted); font-size: var(--fs-ui); }
.foot-links a, .linkish { color: var(--muted); font: inherit; background: none; border: 0; padding: 0; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; }
.foot-links a:hover, .linkish:hover { color: var(--ink); text-decoration: underline; }
.dot-sep { color: var(--border-strong); }
@media (max-width: 600px) {
  .foot-row { flex-direction: column; align-items: center; gap: 16px; }
  .foot-links { justify-content: center; margin: 0; }
}

/* ---------------- 构建者还没交的屏：一行占位（交付后由各自的模块替换整个 section 内容） ---------------- */
.scr-todo { max-width: var(--max); margin: 0 auto; color: var(--faint); font-size: var(--fs-ui); text-align: center; }