/* ============================================================
   intro.css — 介绍页：整屏翻页式（只被 welcome.php 引用）
   —— 底层仍是主题变量，所以切换主题时整页跟着走
   ============================================================ */

html[data-intro] {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
html[data-intro] body {
    margin: 0;
}

body.intro {
    --in-pad: clamp(22px, 7vw, 132px);
    --in-ink: var(--tc-text-strong, #1e3a8a);
    --in-soft: var(--tc-text-soft, #475569);
    --in-mute: var(--tc-text-mute, #94a3b8);
    --in-accent: var(--tc-accent, #60a5fa);
    --in-line: color-mix(in srgb, var(--tc-text-strong, #1e3a8a) 13%, transparent);
    --in-ease: cubic-bezier(.16, .84, .28, 1);

    min-height: 100vh;
    color: var(--in-ink);
    font-family: hy, tcHy5, 'Microsoft YaHei', sans-serif;
    background: var(--tc-page-bg, #eef2f9);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* ---------- 背景：三团缓慢漂移的光 ---------- */
.in-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.in-bg i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .17;
    background: var(--in-accent);
    will-change: transform;
}
.in-bg i:nth-child(1) {
    width: 62vw; height: 62vw; left: -14vw; top: -22vw;
    animation: inDrift 74s var(--in-ease) infinite alternate;
}
.in-bg i:nth-child(2) {
    width: 48vw; height: 48vw; right: -12vw; top: 18vh;
    opacity: .13;
    background: var(--tc-accent-2, #f472b6);
    animation: inDrift2 92s var(--in-ease) infinite alternate;
}
.in-bg i:nth-child(3) {
    width: 70vw; height: 70vw; left: 22vw; bottom: -46vw;
    opacity: .1;
    animation: inDrift3 110s var(--in-ease) infinite alternate;
}
@keyframes inDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes inDrift2 {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-16vw, 14vh, 0) scale(.9); }
}
@keyframes inDrift3 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-10vw, -12vh, 0) scale(1.12); }
}

/* 纸面颗粒：压住渐变，给出印刷质感 */
.in-grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 右侧进度 ---------- */
.in-rail {
    position: fixed;
    right: 26px;
    top: 22%;
    z-index: 5;
    width: 1px;
    height: 56%;
    background: var(--in-line);
    pointer-events: none;
}
.in-rail i {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
    width: 1px;
    height: 0%;
    background: var(--in-ink);
    transition: height .2s linear;
}

/* ---------- 分页 ---------- */
.in-sec {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 132px var(--in-pad) 96px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.in-sec > .in-in {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.in-idx {
    position: absolute;
    right: var(--in-pad);
    bottom: 34px;
    font-family: hy, tcHy, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--in-mute);
}

/* ---------- 入场：每屏一次，不重复 ---------- */
.in-rv > *,
.in-rv .in-stagger > * {
    opacity: 0;
    transform: translateY(26px);
}
.in-rv.on > *,
.in-rv.on .in-stagger > * {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--in-ease), transform .9s var(--in-ease);
}
.in-rv.on > *:nth-child(2) { transition-delay: .08s; }
.in-rv.on > *:nth-child(3) { transition-delay: .16s; }
.in-rv.on > *:nth-child(4) { transition-delay: .24s; }
.in-rv.on > *:nth-child(5) { transition-delay: .32s; }
.in-rv.on .in-stagger > *:nth-child(1) { transition-delay: .1s; }
.in-rv.on .in-stagger > *:nth-child(2) { transition-delay: .16s; }
.in-rv.on .in-stagger > *:nth-child(3) { transition-delay: .22s; }
.in-rv.on .in-stagger > *:nth-child(4) { transition-delay: .28s; }
.in-rv.on .in-stagger > *:nth-child(5) { transition-delay: .34s; }
.in-rv.on .in-stagger > *:nth-child(6) { transition-delay: .4s; }
.in-rv.on .in-stagger > *:nth-child(7) { transition-delay: .46s; }
.in-rv.on .in-stagger > *:nth-child(8) { transition-delay: .52s; }

/* ---------- 封面 ---------- */
.in-cover-title {
    margin: 0;
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(74px, 15.2vw, 216px);
    line-height: .84;
    letter-spacing: -.045em;
}
.in-cover-title span { display: block; }
.in-cover-title span:nth-child(2) { margin-left: .06em; }

.in-cover-cn {
    margin: 18px 0 0;
    font-family: hy5, tcHy5, sans-serif;
    font-size: clamp(20px, 2.6vw, 34px);
    letter-spacing: .42em;
    color: var(--in-soft);
}
.in-lead {
    margin: 30px 0 0;
    max-width: 30ch;
    font-family: hy5, tcHy5, sans-serif;
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.95;
    color: var(--in-soft);
    letter-spacing: .01em;
}
.in-lead b { font-family: hy, tcHy, sans-serif; font-weight: 400; color: var(--in-ink); }

.in-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}
.in-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid var(--in-line);
    border-radius: 100px;
    background: transparent;
    color: var(--in-ink);
    font-family: hy5, tcHy5, sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .3s var(--in-ease), color .3s var(--in-ease), border-color .3s var(--in-ease);
}
.in-btn:hover { background: rgba(255, 255, 255, .58); border-color: transparent; }
.in-btn.solid { background: var(--in-ink); border-color: var(--in-ink); color: #fff; }
.in-btn.solid:hover { background: var(--in-accent); border-color: var(--in-accent); }
.in-btn:focus-visible { outline: 2px solid var(--in-accent); outline-offset: 3px; }

.in-live {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 44px;
    font-size: 12.5px;
    letter-spacing: .1em;
    color: var(--in-mute);
}
.in-live .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--in-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-accent, #60a5fa) 55%, transparent);
    animation: inPulse 3.4s ease-out infinite;
}
@keyframes inPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc-accent, #60a5fa) 45%, transparent); }
    70%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.in-cue {
    position: absolute;
    left: var(--in-pad);
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--in-mute);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .4s var(--in-ease);
}
.in-cue.hide { opacity: 0; pointer-events: none; }
.in-cue .line {
    position: relative;
    display: block;
    width: 1px;
    height: 46px;
    background: var(--in-line);
    overflow: hidden;
}
.in-cue .line::after {
    content: "";
    position: absolute;
    left: 0; top: -46px;
    width: 1px; height: 46px;
    background: var(--in-ink);
    animation: inCue 2.6s var(--in-ease) infinite;
}
@keyframes inCue {
    0%   { transform: translateY(0); }
    60%  { transform: translateY(92px); }
    100% { transform: translateY(92px); }
}

/* ---------- 内页标题 ---------- */
.in-h2 {
    margin: 0;
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(38px, 6.4vw, 96px);
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.in-h3 {
    margin: 0;
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.15;
    letter-spacing: -.02em;
}
.in-sub {
    margin: 22px 0 0;
    max-width: 52ch;
    font-family: hy5, tcHy5, sans-serif;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.9;
    color: var(--in-soft);
}

/* ---------- 原则列表 ---------- */
.in-rules {
    margin: clamp(34px, 6vh, 64px) 0 0;
    border-top: 1px solid var(--in-line);
    max-width: 900px;
}
.in-rule {
    display: grid;
    grid-template-columns: minmax(150px, 3fr) 5fr;
    gap: 10px 44px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--in-line);
}
.in-rule dt {
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(21px, 2.3vw, 30px);
    letter-spacing: -.01em;
}
.in-rule dd {
    margin: 0;
    font-family: hy5, tcHy5, sans-serif;
    font-size: clamp(13.5px, 1.15vw, 15.5px);
    line-height: 1.85;
    color: var(--in-soft);
}

/* ---------- 分层路径 ---------- */
.in-path {
    margin: clamp(30px, 5vh, 52px) 0 0;
    max-width: 940px;
}
.in-node {
    display: grid;
    grid-template-columns: minmax(200px, 1.15fr) 1fr;
    gap: 6px 40px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--in-line);
}
.in-node:first-child { border-top: 1px solid var(--in-line); }
.in-node .nm {
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(22px, 2.8vw, 38px);
    letter-spacing: -.02em;
}
.in-node .nm em {
    font-style: normal;
    margin-left: 10px;
    font-family: hy5, tcHy5, sans-serif;
    font-size: .44em;
    letter-spacing: .12em;
    color: var(--in-mute);
    vertical-align: .28em;
}
.in-node .ds {
    font-family: hy5, tcHy5, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: var(--in-soft);
}
.in-branch {
    margin: 26px 0 0;
    padding-left: 26px;
    border-left: 1px solid var(--in-line);
    font-family: hy5, tcHy5, sans-serif;
    font-size: 13.5px;
    line-height: 2;
    color: var(--in-mute);
}

/* ---------- 技术栈 ---------- */
.in-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 6vw, 80px);
    margin: clamp(30px, 5vh, 54px) 0 0;
    max-width: 980px;
}
.in-stack .it {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid var(--in-line);
}
.in-stack .it:first-child,
.in-stack .it:nth-child(2) { border-top: 1px solid var(--in-line); }
.in-stack .k {
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(19px, 2.1vw, 27px);
    letter-spacing: -.01em;
}
.in-stack .v {
    font-family: hy5, tcHy5, sans-serif;
    font-size: 12.5px;
    letter-spacing: .1em;
    color: var(--in-mute);
    white-space: nowrap;
}

/* ---------- 模块 ---------- */
.in-mods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 6vw, 80px);
    margin: clamp(30px, 5vh, 54px) 0 0;
    max-width: 980px;
}
.in-mod {
    padding: 18px 0;
    border-bottom: 1px solid var(--in-line);
}
.in-mod:nth-child(1), .in-mod:nth-child(2) { border-top: 1px solid var(--in-line); }
.in-mod .k {
    font-family: hy, tcHy, sans-serif;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -.01em;
}
.in-mod .d {
    margin-top: 6px;
    font-family: hy5, tcHy5, sans-serif;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--in-mute);
}

/* ---------- 结尾 ---------- */
.in-end .in-actions { margin-top: 44px; }
.in-foot {
    margin-top: clamp(40px, 8vh, 84px);
    padding-top: 20px;
    border-top: 1px solid var(--in-line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    justify-content: space-between;
    font-family: hy5, tcHy5, sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--in-mute);
}
.in-foot a { color: var(--in-mute); text-decoration: none; border-bottom: 1px solid var(--in-line); }
.in-foot a:hover { color: var(--in-ink); }

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
    body.intro { --in-pad: 22px; }
    .in-sec { padding: 104px 22px 84px; min-height: 92svh; }
    .in-rail { right: 12px; }
    .in-idx { right: 22px; bottom: 22px; }
    .in-cue { left: 22px; bottom: 20px; }
    .in-rules { margin-top: 28px; }
    .in-rule { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
    .in-node { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
    .in-stack, .in-mods { grid-template-columns: 1fr; }
    .in-stack .it:nth-child(2), .in-mod:nth-child(2) { border-top: 0; }
    .in-lead { margin-top: 24px; }
    .in-actions { margin-top: 30px; }
    .in-live { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-intro] { scroll-behavior: auto; }
    .in-bg i { animation: none; }
    .in-cue .line::after { animation: none; opacity: .5; }
    .in-live .dot { animation: none; }
    .in-rv > *, .in-rv .in-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- 封面：左标题 / 右说明（宽屏） ---------- */
.in-cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 372px);
    align-items: end;
    gap: clamp(40px, 5vw, 88px);
}
.in-cover-r { padding-bottom: 6px; }
.in-cover-r .in-lead { margin-top: 0; }
@media (max-width: 980px) {
    .in-cover-grid { grid-template-columns: 1fr; align-items: start; gap: 30px; }
    .in-cover-r { padding-bottom: 0; }
}

/* ---------- 深色主题下的介绍页：实心按钮改用主题渐变（浅色时 ink 是深蓝，深色时是浅米，白字会糊） ---------- */
html[data-tc-skin="alt"] .in-btn.solid {
    background: var(--tc-accent-grad);
    border-color: transparent;
    color: #17120c;
}
html[data-tc-skin="alt"] .in-btn.solid:hover { filter: brightness(1.06); }
html[data-tc-skin="alt"] .in-grain { mix-blend-mode: soft-light; opacity: .5; }
html[data-tc-skin="alt"] .in-bg i { opacity: .2; filter: blur(120px); }