/* =====================================================================
 * base.css —— 重置、通用布局、按钮、板块标题、入场动画
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--c-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
i, em { font-style: normal; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--c-primary-rgb), .35); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-rim); outline-offset: 3px; }

.skip-link {
  position: fixed; z-index: 200; left: 12px; top: -60px;
  padding: 8px 14px; background: var(--c-primary); color: var(--c-on-primary); font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript {
  position: fixed; inset: auto 0 0 0; z-index: 300; padding: 14px 20px;
  background: var(--c-seal); color: #fff; text-align: center;
}

/* 板块本身可被程序聚焦（导航跳转后把焦点移到板块），不显示聚焦框 */
.section:focus { outline: none; }

/* 可滚动区域的细滚动条 */
[data-scrollable] { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(95, 242, 223, .35) transparent; }
[data-scrollable]::-webkit-scrollbar { width: 4px; height: 4px; }
[data-scrollable]::-webkit-scrollbar-thumb { background: rgba(95, 242, 223, .35); }
[data-scrollable]::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
 * 整屏滚动容器 / 板块
 * html.is-fullpage 由 fullpage.js 在桌面端添加
 * ------------------------------------------------------------------- */
.fp { position: relative; }
.section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-bg);
}
.section__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: calc(var(--header-h) + clamp(18px, 4vh, 48px)) calc(var(--rail-w) + var(--gutter)) clamp(28px, 6vh, 64px);
}

html.is-fullpage { --anim-base: 480ms; }   /* 整屏模式：等翻页过半再开始入场动画 */
html.is-fullpage, html.is-fullpage body { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
html.is-fullpage .fp {
  position: fixed; left: 0; top: 0; width: 100%;
  transition: transform var(--page-dur) var(--ease-io);
  will-change: transform;
}
html.is-fullpage .fp.no-transition { transition: none; }
html.is-fullpage .section { height: 100vh; min-height: 0; }
html.is-fullpage .section.footer { height: auto; }
html.is-fullpage .section__inner { height: 100%; }

/* 板块底纹：细网格 + 中心光晕 */
.section:not(.hero):not(.footer)::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 40%, rgba(var(--c-primary-rgb), .07), transparent 70%),
    linear-gradient(rgba(95, 242, 223, .035) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(95, 242, 223, .035) 1px, transparent 1px) 0 0 / 64px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* 板块底部的远山剪影 */
.section:not(.hero):not(.footer)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 0; pointer-events: none;
  background: url("../assets/hero/mountains-far.svg") center bottom / cover no-repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}

/* 超大描边英文装饰字 */
.bgword {
  position: absolute; z-index: 1; pointer-events: none; user-select: none;
  top: calc(var(--header-h) - 1vh);
  right: calc(var(--rail-w) + 1vw);
  font-family: var(--f-wide);
  font-size: clamp(64px, 11vw, 210px);
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(95, 242, 223, .12);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6vw);
  transition: opacity 1.4s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s;
}
.section.is-active .bgword { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
 * 板块标题  EN // 中文  —— 01
 * ------------------------------------------------------------------- */
.sec-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; flex: none; position: relative; z-index: 3; }
.sec-head__title { font: inherit; margin: 0; }
.sec-head__cn {
  font-family: var(--f-serif); font-weight: 900;
  font-size: clamp(28px, 2.6vw, 44px); line-height: 1.1; letter-spacing: .08em;
}
.sec-head__en {
  display: block; margin-bottom: 8px;
  font-family: var(--f-en); font-weight: 600; font-size: 13px; letter-spacing: .38em; color: var(--c-rim);
}
.sec-head__en::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--c-primary); transform: translateY(-1px) rotate(45deg); }
.sec-head__line { flex: 1; min-width: 40px; height: 1px; margin-bottom: 12px; background: linear-gradient(90deg, var(--c-line-2), transparent); }
.sec-head__idx { margin-bottom: 6px; font-family: var(--f-en); font-weight: 600; font-size: 14px; letter-spacing: .2em; color: var(--c-muted); }
.sec-head__sub { width: 100%; margin-top: 4px; color: var(--c-muted); font-size: 14px; letter-spacing: .12em; }

/* ---------------------------------------------------------------------
 * 按钮（切角）
 * ------------------------------------------------------------------- */
.btn {
  --bc: var(--c-primary);
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 28px 0 24px;
  font-family: var(--f-serif); font-weight: 700; font-size: 16px; letter-spacing: .12em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background-color .3s, color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.btn i { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .24em; opacity: .75; }
.btn__arrow { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-glow); }
.btn--ghost { color: var(--c-text); background: var(--c-line-3); }
.btn--ghost::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: rgba(3, 16, 18, .9);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
  transition: background-color .3s;
}
.btn--ghost:hover { color: #fff; }
.btn--ghost:hover::before { background: rgba(12, 58, 55, .92); }

/* 通用切角描边框：外层为线色，::before 为填充色 */
.frame {
  --frame-line: var(--c-line-2);
  --frame-fill: rgba(5, 21, 23, .82);
  position: relative;
  background: var(--frame-line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.frame::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: var(--frame-fill);
  clip-path: polygon(0 0, calc(100% - var(--cut) + .6px) 0, 100% calc(var(--cut) - .6px), 100% 100%, calc(var(--cut) - .6px) 100%, 0 calc(100% - var(--cut) + .6px));
  transition: background .4s;
}

/* 「更多 READ MORE」文字按钮 */
.more-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-serif); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--c-text);
  transition: color .3s;
}
.more-link i { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .28em; color: var(--c-rim); }
.more-link .more-link__icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--c-line-2); transition: background .3s, border-color .3s;
}
.more-link .more-link__icon svg { width: 14px; height: 14px; }
.more-link:hover { color: var(--c-glow); }
.more-link:hover .more-link__icon { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

/* 四角刻度（装饰） */
.ticks { position: absolute; inset: 0; pointer-events: none; --tk: 14px; --tc: var(--c-line-3);
  background:
    linear-gradient(var(--tc), var(--tc)) left top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / var(--tk) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right top / 1px var(--tk) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left bottom / 1px var(--tk) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / var(--tk) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right bottom / 1px var(--tk) no-repeat;
}

/* 标签小方块 */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 24px; padding: 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1;
  color: var(--c-primary); border: 1px solid rgba(var(--c-primary-rgb), .5); background: rgba(var(--c-primary-rgb), .08);
}
.tag--solid { color: var(--c-on-primary); background: var(--c-primary); border-color: var(--c-primary); }

/* ---------------------------------------------------------------------
 * 入场动画：给元素加 data-anim，板块获得 .is-active 时依次出现
 * data-anim="" 上移淡入 / "left" 从左 / "right" 从右 / "fade" 仅淡入 / "scale" 缩放
 * --i 由 JS 自动写入，用于错峰
 * ------------------------------------------------------------------- */
.js [data-anim] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: 0s;
}
.js [data-anim="left"] { transform: translate3d(-48px, 0, 0); }
.js [data-anim="right"] { transform: translate3d(48px, 0, 0); }
.js [data-anim="fade"] { transform: none; }
.js [data-anim="scale"] { transform: scale(.94); }
.js .is-active [data-anim] {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 90ms + var(--anim-base, 250ms));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-anim] { transform: none !important; }
}

/* ---------------------------------------------------------------------
 * 非整屏模式（小屏 / 矮屏）
 * ------------------------------------------------------------------- */
html:not(.is-fullpage) .section:not(.hero):not(.footer) { min-height: 0; }
@media (min-width: 1024px) {
  html:not(.is-fullpage) .section:not(.footer) { min-height: 640px; }
}