.i_linkbg{
  margin-top: 0 !important;
}

#certificates{
  background: url(../images/honor.jpg) no-repeat center center;
  background-size: cover;
}

:where(.intro-page),
:where(.intro-page) :where(*),
:where(.intro-page) :where(*)::before,
:where(.intro-page) :where(*)::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e1e7ef;
}

/* 原先写在 html/body 上的三条，收到页面根节点。
   字体不再声明：站点 common.css 的 body{font-family:var(--font-base)} 权重更高，
   原文件那份 html{font-family:"Noto Sans SC"} 从未生效过，连同外链 @import 一并删除
   （详见 css/font.css 的说明：全站统一用 var(--font-base)）。 */
:where(.intro-page) {
    line-height: 1.5;
    color: #1a1a2e;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* 标题：字号字重全由 Tailwind 工具类控制，
   故清掉浏览器默认值，否则 h2/h3 会拿回默认 margin 把版面撑开 */
:where(.intro-page) :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

:where(.intro-page) :where(p, blockquote, dl, dd, figure, pre, hr) {
    margin: 0;
}

/* float:none 用来中和 common.css:12 的全局 `ul li,ul,dl{float:left}`，
   参考稿是独立页面没有这条，搬进站内必须显式抵消 */
:where(.intro-page) :where(ul, ol, menu) {
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

:where(.intro-page) :where(a) {
    color: inherit;
    text-decoration: inherit;
}

:where(.intro-page) :where(b, strong) {
    font-weight: bolder;
}

/* 替换元素改成块级，避免 inline 基线造成的额外底部空隙 */
:where(.intro-page) :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
}

:where(.intro-page) :where(img, video) {
    max-width: 100%;
    height: auto;
}

/* 表单元素不继承字体，必须显式 inherit 才能拿到站点的 var(--font-base) */
:where(.intro-page) :where(button, input, optgroup, select, textarea) {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

:where(.intro-page) :where(button, select) {
    text-transform: none;
}

:where(.intro-page) :where(button) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

:where(.intro-page) :where(:disabled) {
    cursor: default;
}

/* ---------- 2. 语义类（替代改造前散在 HTML 里的 55 处内联 style）---------- */

/* 时间轴区块：高度按视口收放，上下留有余量 */
.timeline-section {
    height: clamp(680px, 85vh, 760px);
}

/* 时间轴内部滚动区：深色底上的细滚动条 */
.timeline-scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 行高语义类。
   ⚠️ 不要退回用 Tailwind 的 leading-[1.3] 之类：
   text-3xl / md:text-4xl 这些 fontSize 工具类**同时**会设 line-height，
   而 md: 变体整体排在产物末尾的 @media 块里，同权重下源码靠后者赢，
   于是 ≥768px 时 leading-[1.3] 会被 md:text-4xl 的 line-height 覆盖。
   改造前这些是内联 style（内联恒胜）所以没暴露，换成类就中招了。
   本文件在 tailwind.min.css 之后加载，同权重下这里稳赢，故用语义类。
   （2026-07-23 实测：h2 46.8px→40px、正文 32.4px→28px、h3 31.2px→32px） */
.lh-title {
    line-height: 1.3;
}
.lh-body {
    line-height: 1.8;
}
.lh-node {
    line-height: 1.65;
}
.lh-cert {
    line-height: 1.5;
}

/* 深色底上的白字需要投影才压得住背景图 */
.text-shadow-title {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1);
}
.text-shadow-sub {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.text-shadow-card {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 投影语义类。
   ⚠️ 改造前这些写成 shadow-[0_4px_20px_rgba(0_0_0_0.08)]，是 Tailwind v4 的
   空格分隔 rgba 写法；站内是 v3 构建，产出 `rgba(0 0 0 0.08)` —— 缺斜杠，
   属非法 CSS，浏览器整条丢弃，**这些投影改造前其实一个都没显示**。
   现改为语义类 + 合法逗号写法，投影按原设计生效。 */
.elev-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.elev-card-hover:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.elev-dot {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.elev-bar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* 原先靠改写 .shadow-sm 实现，会连累其它页面，故独立命名 */
.elev-soft {
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.02),
        0 1px 2px -1px rgba(0, 0, 0, 0.02);
}

/* ---------- 3. 组件 ---------- */

/* ---- 滚动揭示动画：元素进入视口时由 JS 添加 .is-revealed ----
   注意：初始隐藏态挂在 .reveal-ready 之下，该类由 JS 在运行时添加。
   这样一旦 JS 加载失败或 IntersectionObserver 不可用（爬虫、打印、旧浏览器），
   内容仍然是默认可见的，不会出现整页空白。 */
.reveal-ready [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-ready [data-reveal="up"] {
    transform: translateY(24px);
}
.reveal-ready [data-reveal="down"] {
    transform: translateY(-24px);
}
.reveal-ready [data-reveal="left"] {
    transform: translateX(30px);
}
.reveal-ready [data-reveal="right"] {
    transform: translateX(-30px);
}
.reveal-ready [data-reveal="zoom"] {
    transform: scale(0.95);
}
.reveal-ready [data-reveal="fade"] {
    transform: none;
}
.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---- 时间轴：玻璃卡与年份胶囊 ----
   这两处同时用了 ring-1，必须走 Tailwind 的 --tw-shadow 变量合成，
   直接写 box-shadow 会把描边环覆盖掉。 */
.timeline-card {
    --tw-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.08);
    --tw-shadow-colored:
        inset 0 1px 0 var(--tw-shadow-color), 0 4px 16px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.timeline-year {
    --tw-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* 时间轴卡片列宽：半宽减 24px（中间 48px 留给竖线+圆点）。
   用自定义类而非 w-[calc(50%-24px)]——后者是 tailwind arbitrary value，
   本地构建里 calc 的减号需写成下划线才生成，直接写易失效，故走这里最稳。 */
.tl-half {
    width: calc(50% - 24px);
}

/* ---- 企业资质：自动横向跑马灯 ---- */
.cert-marquee {
    overflow: hidden;
}
.cert-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    /* 周期由 JS 按条目数写入 --cert-duration，条目少的那组走得慢会显得拖沓 */
    animation: cert-scroll var(--cert-duration, 40s) linear infinite;
}
/* 悬停暂停，方便看清某一张证书 */
.cert-marquee:hover .cert-track {
    animation-play-state: paused;
}
/* 轨道内是 N 项 ×2 的副本，位移正好一份即可无缝衔接。
   一份 = 半个轨道 + 半个间距，故为 calc(-50% - gap/2) */
@keyframes cert-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 0.625rem));
    }
}
/* 未选中的那组不占位 */
.cert-marquee[hidden] {
    display: none;
}

/* 证书卡：常规投影 + 悬停抬升 */
.cert-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.cert-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* src 尚未填写时隐藏图片本身，避免浏览器显示碎图图标；
   外层虚线框保留占位外观。填入真实路径后此规则自动失效。 */
.cert-img[src=""] {
    visibility: hidden;
}

/* ---- 资质标签页切换（权威资质 / 产学合作）---- */
/* 选中滑块平滑移动到目标标签；初始值只是 JS 接管前的占位 */
.cert-pill {
    left: 4px;
    width: 50%;
    opacity: 1;
    transition:
        left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cert-track {
        animation: none;
    }
    .cert-pill {
        transition: none;
    }
}