/* ============================================================
   Sakurumii · base.css
   设计令牌、重置、字体系统、通用工具类
   视觉锚点：example.html（深蓝底、黑底白字橙强调）+ example-1.png（板块语言）
   字体：英文 GemunuLibre-SemiBold，中文 ZHGBQST_T（自托管）
   ============================================================ */

:root{
  /* 色板：来自 example.html */
  --k:#000;
  --w1:#e6e6e6;
  --w2:#c4c4c4;
  --g1:#757575;
  --g2:#2e2e2e;
  --o:#ff4d00;

  /* 线 */
  --line:rgba(230,230,230,.085);
  --line-soft:rgba(230,230,230,.05);

  /* 字体：英文 GemunuLibre · 中文 ZHGBQST（同一栈，CJK 自动落到中文） */
  --sans:"GemunuLibre SemiBold","ZHGBQST",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"GemunuLibre SemiBold","ZHGBQST",ui-monospace,Menlo,Consolas,monospace;
  --jm:"GemunuLibre SemiBold","ZHGBQST",ui-monospace,Menlo,Consolas,monospace;
  --head:"GemunuLibre SemiBold","ZHGBQST",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;

  --maxw:82.5rem;
  --gutter:16px;
}

@font-face{
  font-family:"GemunuLibre SemiBold";
  src:url("../fonts/GemunuLibre-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"ZHGBQST";
  src:url("../fonts/ZHGBQST_T.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#070914}
body{
  background:#070914;
  color:#fff;
  font-family:var(--sans);
  font-size:16px;
  line-height:24px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
img,svg{display:block}
::selection{background:var(--o);color:#000}

/* ---------- 网站背景：仿照 example.html（深蓝底 + 中心椭圆渐变 + 竖向深度层） ---------- */
.bg-texture{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,#0E1222 0%,#070914 100%);
}
.bg-texture::after{
  content:"";position:absolute;inset:0;opacity:.8;
  background:linear-gradient(180deg,transparent 0%,rgba(14,18,34,.4) 50%,#070914 100%);
}
/* 背景水印：纯文字标识 · 不打算做 logo */
.bg-watermark{
  position:fixed;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--head);font-weight:600;
  color:rgba(230,230,230,.035);letter-spacing:.02em;white-space:nowrap;
  writing-mode:vertical-rl;text-orientation:mixed;
  top:14vh;right:2.2vw;font-size:clamp(44px,5.6vw,96px);
}
.bg-watermark small{font-size:.34em;vertical-align:super;color:rgba(255,77,0,.22)}

main{position:relative;z-index:1}

/* ---------- 标题字体 ---------- */
h1,h2,h3,.head-font{
  font-family:var(--head);
  font-weight:600;
  letter-spacing:-.012em;
}

/* ---------- 字号系统 ---------- */
.f-h0{font-size:5.4375rem;line-height:5.25rem;letter-spacing:-.035em;font-weight:600}
.f-h1{font-size:4.75rem;line-height:4.75rem;letter-spacing:-.035em;font-weight:600}
.f-h2{font-size:2.375rem;line-height:2.5rem;letter-spacing:-.03em;font-weight:600}
.f-h3{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.02em;font-weight:600}
.f-h4{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.02em;font-weight:600}
.f-p{font-size:.8125rem;line-height:1rem;font-weight:600}
.f-nav{font-size:.75rem;line-height:1rem;font-weight:600}

/* ---------- 等宽微标签 ---------- */
.mono-label{
  font-family:var(--mono);
  font-size:12px;
  line-height:16px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--g1);
  font-weight:500;
}
.mono-label.accent{color:var(--o)}

/* ---------- 正文 ---------- */
.lede{color:var(--w2);font-weight:500;text-wrap:pretty;max-width:46rem}
p{text-wrap:pretty}
b,strong{font-weight:600;color:var(--w1)}

/* ---------- 板块实时拼接动画（首页 / 介绍页）
   板块先分开，向下滚动时按滚动进度实时拼合；
   拼合过程拉长：板块滚过视口约九成才完成，回滚重新分开。Chromium 原生 scroll-driven。 ---------- */
@supports (animation-timeline: view()){
  .pz-block{
    animation:pz-assemble linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 90%;
    will-change:transform,opacity;
  }
  .pz-block[data-off="l"]{--pz-x:-6.5vw;--pz-y:3.5vh}
  .pz-block[data-off="r"]{--pz-x:6.5vw;--pz-y:3.5vh}
  .pz-block[data-off="c"]{--pz-x:0;--pz-y:5.5vh}
  .pz-block[data-off="none"]{--pz-x:0;--pz-y:0}
  @keyframes pz-assemble{
    from{transform:translateX(var(--pz-x,0)) translateY(var(--pz-y,0));opacity:.15}
    to{transform:none;opacity:1}
  }
}
/* 不支持时保持拼合后的静态状态，页面依旧成立 */

/* ---------- 工具类 ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.accent{color:var(--o)}
.dim{color:var(--g1)}

@media (max-width:1023px){
  .f-h0{font-size:2.875rem;line-height:2.45rem}
  .f-h1{font-size:2.1875rem;line-height:2.25rem;letter-spacing:-.03em}
  .f-h2{font-size:2.1875rem;line-height:2.25rem;letter-spacing:-.03em}
  .f-h3{font-size:1.25rem;line-height:1.25rem}
  .f-h4{font-size:.9375rem;line-height:1rem}
  .f-p{font-size:.75rem}
  .bg-watermark{display:none}
  .pz-block[data-off="l"]{--pz-x:-8vw;--pz-y:2.5vh}
  .pz-block[data-off="r"]{--pz-x:8vw;--pz-y:2.5vh}
}