/* ============================================================
   base — 全局重置 / 排版基元 / 性能约定
   硬性约定：全站禁止 backdrop-filter，一律 rgba 实色替代
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;              /* 平滑滚动由 JS 接管，不能用 CSS */
  cursor: var(--cur, auto);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is--locked { overflow: hidden; height: 100vh; }

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand-500); color: #000; }

/* 暗色滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--surface) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-700); }

/* ---------- 排版基元 ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  font-size: var(--fs-display);
}
.h1 { font-family: var(--font-display); font-weight: 900; font-style: italic;
      line-height: .86; letter-spacing: -.02em; text-transform: uppercase;
      font-size: var(--fs-h1); }
.h2 { font-family: var(--font-display); font-weight: 900; font-style: italic;
      line-height: .9; letter-spacing: -.015em; text-transform: uppercase;
      font-size: var(--fs-h2); }
.h3 { font-family: var(--font-display); font-weight: 900; font-style: italic;
      line-height: .95; letter-spacing: -.01em; text-transform: uppercase;
      font-size: var(--fs-h3); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.accent { color: var(--brand-500); }

/* 德式方括号小标题 */
.bracket {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bracket::before { content: "[ "; color: var(--brand-500); }
.bracket::after  { content: " ]"; color: var(--brand-500); }

/* ---------- 布局 ---------- */
.shell { width: 100%; padding-inline: var(--gutter); margin-inline: auto; max-width: 100rem; }
.section { position: relative; padding-block: var(--section); }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ---------- 胶卷颗粒（SVG turbulence，全站叠一层） ---------- */
.grain {
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 伪「影像素材」（无外部资源时代的占位 footage） ---------- */
.footage {
  position: relative; overflow: hidden; background: #0b0b0d;
}
.footage::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 55% at 22% 30%, color-mix(in oklab, var(--fc, #ffb800) 55%, transparent), transparent 70%),
    radial-gradient(45% 60% at 78% 68%, color-mix(in oklab, var(--fc2, #a67eff) 40%, transparent), transparent 72%),
    conic-gradient(from calc(var(--spin, 0) * 1deg) at 50% 50%,
      #16161a, #0b0b0d 25%, #1d1a20 50%, #08080a 75%, #16161a);
  animation: footageDrift 18s linear infinite;
}
.footage::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
}
@keyframes footageDrift { to { transform: rotate(360deg); } }

/* 播放状态：未播放时冻结，省电 */
.footage.is--paused::before { animation-play-state: paused; }

/* ---------- 通用按钮 ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.5em; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .3s var(--ease-settle), color .3s var(--ease-settle);
}
.btn:hover { border-color: var(--brand-500); color: var(--brand-500); }
.btn.is--primary { background: var(--brand-500); color: #000; border-color: var(--brand-500); }
.btn.is--primary:hover { background: var(--brand-400); color: #000; }
/* 四角对位标记 */
.btn .tick { position: absolute; width: 6px; height: 6px; opacity: 0;
             border: 1px solid var(--brand-500); transition: opacity .25s var(--ease-settle),
             transform .25s var(--ease-settle); }
.btn .tick.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.btn .tick.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.btn .tick.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.btn .tick.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.btn:hover .tick { opacity: 1; }
.btn:hover .tick.tl { transform: translate(-3px, -3px); }
.btn:hover .tick.tr { transform: translate(3px, -3px); }
.btn:hover .tick.bl { transform: translate(-3px, 3px); }
.btn:hover .tick.br { transform: translate(3px, 3px); }

/* ---------- 无障碍 ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .footage::before { animation: none; }
}