/* ==========================================================================
   域名陈列室 — 横向单页
   设计依据：immersive-g.com（数值按参考站线上 CSS 实测校准；设计语言见其 design.md）
   ========================================================================== */

/* ---- Fonts (Instrument Serif, SIL OFL 1.1 — see assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Colour (6 measured values) */
  --bg: #E8E8E8;
  --fg: #030303;
  --fg-muted: rgba(0, 0, 0, 0.5);
  --bg-dark: #030303;
  --fg-inverse: #E8E8E8;
  --accent: #A6A6A6;
  /* #EBEBEB under mix-blend-mode:difference renders exactly #030303 on #E8E8E8 and #E8E8E8 on #030303 */
  --blend: #EBEBEB;

  /* Easing */
  --ease: cubic-bezier(.445, .05, .55, .95);      /* default */
  --ease-btn: cubic-bezier(.165, .84, .44, 1);    /* buttons */
  /* GSAP: quart.out / quart.inOut / sine.inOut / power1.inOut (see assets/js) */

  /* Fonts */
  --serif: "Instrument Serif", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", SimSun, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Zen Hei", sans-serif;

  /* Grid */
  --page-pad: 16px;
  --gutter: 16px;

  /* Type scale — 实测自参考站线上 CSS（2026-10-11）：各档为纯 vw，
     上端封顶 @≥1915.2px，下端在「vw 恰好缩到设计值」处封顶。 */
  --fs-display: 3.8889vw;   /* → 74.48px @≥1915.2 · 44px @≤1131 */
  --fs-large:   3.0556vw;   /* → 58.52px @≥1915.2 · 34px @≤1113 */
  --fs-label:   1.5278vw;   /* → 29.26px @≥1915.2 · 20px @≤1309 */
  --fs-loader:  1.9444vw;   /* → 37.24px @≥1915.2 · 28px @≤1440 */
  --fs-body: 14px;
  --fs-cursor: 12px;

  /* Vertical rhythm（2026-10-11 用户要求紧凑：收窄自参考站实测值） */
  --section-gap: 6.5vw;      /* → 124px @≥1915.2 · 28px @≤432 */
  --hero-pad: 7.5vw;         /* → 144px @≥1915.2 · 32px @≤432 */

  /* Cards */
  --card-w: 380px;
  --card-h: 66vh;
}
@supports (height: 100dvh) {
  :root { --card-h: 66dvh; }
}

@media (min-width: 1440px) {
  :root { --card-w: 400px; }
}
@media (min-width: 1915.2px) {
  :root {
    --fs-display: 74.48px; --fs-large: 58.52px; --fs-label: 29.26px; --fs-loader: 37.24px;
    --section-gap: 124px; --hero-pad: 144px;
    --card-w: 420px;
  }
}
@media (max-width: 1440px) {
  :root { --fs-loader: 28px; }
}
@media (max-width: 1440px) and (min-width: 769px) {
  :root { --card-w: 360px; }
}
@media (max-width: 1309px) {
  :root { --fs-label: 20px; }
}
@media (max-width: 1131px) {
  :root { --fs-display: 44px; }
}
@media (max-width: 1113px) {
  :root { --fs-large: 34px; }
}
@media (max-width: 768px) {
  :root { --card-w: min(80vw, 380px); }
}
@media (max-width: 432px) {
  :root { --section-gap: 28px; --hero-pad: 32px; --card-w: 80vw; }
}

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

html {
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
html::-webkit-scrollbar { display: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.is-loading { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.1;
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.sans { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.1; }
.serif-display { font-family: var(--serif); font-size: var(--fs-display); line-height: 1.1; }
.serif-large   { font-family: var(--serif); font-size: var(--fs-large);   line-height: 1.2; }
.serif-label   { font-family: var(--serif); font-size: var(--fs-label);   line-height: 1.4; }
.serif-loader  { font-family: var(--serif); font-size: var(--fs-loader);  line-height: 1.2; }

.noscript { position: fixed; inset: 0; margin: 0; padding: var(--page-pad); background: var(--bg); z-index: 3000; }

/* Reveal: IntersectionObserver adds .is-in */
.reveal { opacity: 0; transition: opacity .7s ease-in-out; }
.reveal.is-in { opacity: 1; }

/* ---- Atmosphere (WebGL) -------------------------------------------------- */
.atmos {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 5; pointer-events: none; display: block; /* 前景氛围层：在内容之上、UI（hdr/modal/cursor）之下——页脚黑面与故事页上也要能看到粒子 */
  opacity: 0; transition: opacity .8s ease-in-out;
}
.atmos.is-on { opacity: 1; }
.atmos.is-off { display: none; }

/* ---- Buttons ------------------------------------------------------------- */
.basic-btn {
  display: inline-block; padding: 20px; margin: -20px;
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.1;
  transition: opacity .3s var(--ease-btn);
}
@media (hover: hover) { .basic-btn:hover { opacity: .6; } }
.basic-btn:active { opacity: .6; }

.ul-btn { position: relative; display: inline-block; padding-bottom: 3px; }
.ul-btn__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(1); transform-origin: left center;
  transition: transform .5s var(--ease-btn);
}
@media (hover: hover) {
  .ul-btn:hover .ul-btn__line { transform: scaleX(0); transform-origin: right center; }
}
.ul-btn:focus-visible .ul-btn__line { transform: scaleX(0); transform-origin: right center; }

/* ---- Header & progress (difference blend → auto-inverts on dark panels) -- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--page-pad);
  color: var(--blend); mix-blend-mode: difference;
  pointer-events: none;
}
.hdr > *, .hdr a, .hdr button { pointer-events: auto; }
.hdr__mark { line-height: 1.1; }
.hdr__right { display: flex; align-items: baseline; gap: 40px; padding-right: 20px; }
.hdr__count { opacity: .5; }

.prog {
  position: fixed; left: var(--page-pad); right: var(--page-pad);
  bottom: calc(var(--page-pad) + env(safe-area-inset-bottom, 0px));
  height: 7px; z-index: 900; pointer-events: none;
  color: var(--blend); mix-blend-mode: difference;
}
.prog__track { position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: currentColor; opacity: .25; }
.prog__fill {
  position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}
.prog__dot {
  position: absolute; left: 0; top: 2px; width: 3px; height: 3px; border-radius: 100%;
  background: currentColor; will-change: transform;
}

/* ---- Track & panels ------------------------------------------------------ */
.scrollWrap { position: fixed; inset: 0; overflow: hidden; z-index: 1; }
.track {
  position: relative; z-index: 1;
  display: flex; align-items: stretch; width: max-content;
  height: 100vh;
}
@supports (height: 100dvh) { .track { height: 100dvh; } }

/* Hero */
.hero {
  position: relative; flex: 0 0 100vw; width: 100vw; height: 100%;
  padding: 0 var(--page-pad) var(--hero-pad);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__inner { width: min(100%, 66.6vw); }
.hero__title { margin-bottom: 1.1em; }
.hero__lines { color: var(--fg-muted); }
.hero__lines span { display: block; }
.hero__scroll {
  position: absolute; right: var(--page-pad); bottom: var(--hero-pad);
  display: flex; gap: 10px; align-items: baseline; color: var(--fg-muted);
}
.hero__arrow { display: inline-block; will-change: transform; }

/* Wall */
.wall {
  flex: 0 0 auto; display: flex; align-items: center;
  height: 100%; padding: 0 var(--section-gap);
  gap: calc(var(--gutter) * 2);
}
.wall__intro { flex: 0 0 auto; width: max(34vw, 280px); max-width: 560px; }
.wall__eyebrow { margin-bottom: 1.2em; color: var(--fg-muted); }
.wall__list { display: flex; gap: var(--gutter); height: 100%; align-items: center; }

/* Card */
.card {
  position: relative; flex: 0 0 var(--card-w); width: var(--card-w); height: var(--card-h);
  border: 1px solid var(--accent);
}
.card__hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.card__hit:focus-visible { outline: 1px solid var(--accent); outline-offset: -5px; z-index: 3; }
.card__hit[aria-disabled="true"] { cursor: default; }

.face {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: var(--page-pad);
  display: flex; flex-direction: column; justify-content: space-between;
}
.face a { pointer-events: auto; }
.face--inv {
  background: var(--bg-dark); color: var(--fg-inverse);
  opacity: 0; transition: opacity .5s var(--ease);
}
@media (hover: hover) {
  .card:not(.card--sold):not(.card--keep):hover .face--inv { opacity: 1; }
}
.card__hit:focus-visible ~ .face--inv { opacity: 1; }
/* 弹窗打开时：来源卡片保持反色（黑色）状态——移动鼠标不再回白 */
.card.is-active .face--inv { opacity: 1; }
.card--sold .face:not(.face--inv) { opacity: .4; }
.card--sold .face--inv { display: none; }
.card--keep .face--inv { display: none; }

.face__top { display: flex; justify-content: space-between; align-items: baseline; }
.face__top > span:last-child { opacity: .5; }
.face__name {
  flex: 1; display: flex; align-items: center;
  font-family: var(--serif); font-size: var(--fs-display); line-height: 1.1;
  overflow-wrap: anywhere;
}
.face__tld { opacity: .5; }
.face__rows { display: flex; flex-direction: column; gap: 12px; }
.face__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.face__row--rule { padding-top: 12px; border-top: 1px solid var(--accent); }
.face__tags { opacity: .5; }
.face__act { padding-top: 4px; min-height: 20px; }

/* Footer */
.footer {
  position: relative; flex: 0 0 100vw; min-width: 100vw; height: 100%;
  background: var(--bg-dark); color: var(--fg-inverse);
  padding: calc(var(--page-pad) + 56px) var(--page-pad) calc(var(--page-pad) + 20px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.footer__top { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.footer__cta { max-width: 66.6vw; }
.footer__mid { padding: 0; }
.footer__email { display: block; overflow-wrap: anywhere; transition: opacity .5s ease; }
@media (hover: hover) { .footer__email:hover { opacity: .6; } }
.footer__bottom {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 16px; align-items: end;
}
.footer__note { grid-column: 1 / 9; opacity: .5; }
.footer__copy { grid-column: 11 / 13; opacity: .5; text-align: right; }

/* ---- Modal --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center; padding: var(--page-pad);
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .5s;
}
.modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal__backdrop { position: absolute; inset: 0; background: var(--bg-dark); opacity: 0; transition: opacity .5s var(--ease); }
.modal.is-open .modal__backdrop { opacity: .6; }
.modal__panel {
  position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto;
  background: var(--bg-dark); color: var(--fg-inverse);
  border: 1px solid rgba(232, 232, 232, .2);
  padding: var(--page-pad);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  outline: none;
}
.modal.is-open .modal__panel { opacity: 1; transform: translateY(0); }
.modal__head { display: flex; justify-content: space-between; align-items: baseline; padding-right: 20px; opacity: 1; }
.modal__head > span { opacity: .5; }
.modal__name { margin: 48px 0 16px; overflow-wrap: anywhere; }
.modal__meta { opacity: .5; margin-bottom: 40px; }
.modal__desc {
  border-top: 1px solid rgba(232, 232, 232, .2); padding-top: 24px;
  font-size: var(--fs-body); line-height: 1.6; max-width: 44ch; overflow-wrap: anywhere;
}
.modal__note { opacity: .5; margin-top: 16px; line-height: 1.3; }

/* ---- Loader -------------------------------------------------------------- */
.loader { position: fixed; inset: 0; z-index: 1010; color: var(--fg-inverse); overflow: hidden; }
.loader.is-done { display: none; }
.loader__bg { position: absolute; inset: 0; background: var(--bg-dark); }
.loader__grid {
  position: relative; height: 100%; padding: var(--page-pad);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  grid-template-rows: auto 1fr auto;
}
.loader__logo { grid-column: 1 / 7; grid-row: 1; position: relative; justify-self: start; white-space: nowrap; }
.loader__logo-base { opacity: .2; }
.loader__logo-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; will-change: transform; }
.loader__logo-text { display: block; white-space: nowrap; will-change: transform; }
.loader__progress {
  grid-column: 1 / 13; grid-row: 2; align-self: center; justify-self: center;
  width: max(18vw, 180px); text-align: center;
}
.loader__label { opacity: 0; }
.loader__bar { height: 1px; margin-top: 14px; background: rgba(232, 232, 232, .2); overflow: hidden; }
.loader__bar-fill { height: 100%; background: var(--fg-inverse); transform: scaleX(0); transform-origin: left center; }
.loader__baseline { grid-column: 1 / 9; grid-row: 3; align-self: end; }
.loader__baseline .w { display: inline-block; opacity: 0; white-space: pre; }
.loader__scroll { grid-column: 9 / 13; grid-row: 3; align-self: end; justify-self: end; opacity: 0; }

/* ---- Cursor -------------------------------------------------------------- */
.cursor {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2000;
  pointer-events: none; --cursor-color: var(--fg); color: var(--cursor-color);
  opacity: 0; transition: opacity .5s var(--ease);
}
.cursor.is-on { opacity: 1; }
/* 暗面反色 = JS 判定 .is-dark（源站同机制）。弃用 mix-blend-mode:difference（移动时残影） */
.cursor.is-dark { --cursor-color: var(--fg-inverse); }
.cursor__follow, .cursor__ease {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 100%; background: currentColor; will-change: transform;
}
.cursor__text {
  position: absolute; left: 35px; top: 15px; white-space: nowrap;
  font-size: var(--fs-cursor); line-height: 1.1; opacity: 0;
  transition: opacity .25s var(--ease);
}
.cursor__text.is-on { opacity: 1; }
.cursor__ease > .cursor__text { margin-left: 2.5px; margin-top: 2.5px; }
.is-touch .cursor { display: none; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
.is-dragging, .is-dragging * { user-select: none; -webkit-user-select: none; }

/* ---- Toast（复制提示；difference 自动反色，同页头约定） -------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--page-pad) + 40px);
  transform: translate(-50%, 10px);
  z-index: 2400; pointer-events: none;
  font-family: var(--sans); font-size: var(--fs-cursor); line-height: 1.1;
  padding: 12px 16px;
  background: var(--blend); color: var(--fg);
  mix-blend-mode: difference;
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .hdr__right { gap: 20px; }
  .hdr__count { display: none; }
  .hero__inner { width: 100%; }
  .hero__scroll { position: static; margin-top: 24px; }
  .wall__intro { width: 72vw; }
  .loader__baseline { grid-column: 1 / 13; grid-row: 3; }
  .loader__scroll { grid-column: 1 / 13; grid-row: 4; justify-self: start; margin-top: 12px; }
  .footer__cta { max-width: 100%; }
  .footer__note { grid-column: 1 / 13; }
  .footer__copy { grid-column: 1 / 13; text-align: left; }
}
@media (max-width: 432px) {
  .face__name { font-size: var(--fs-display); }
}

/* ---- Reduced motion:静的化 ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .reveal { opacity: 1; }
}
.is-reduced .reveal { opacity: 1; }
.reveal.is-away { opacity: 0 !important; }