/* ============================================================
   重置 + 排版基线 + 焦点环 + 动效降级 + 氛围层
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;              /* 中文正文需要更松的行高 */
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0;
  /* 中文没有真正的斜体，浏览器会做机械倾斜 —— 全站禁止 */
  font-style: normal;
}
/* 中文标题：字面比拉丁大，需要更松的行高和不那么紧的字距 */
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
h1, h2, h3, h4 { letter-spacing: -.015em; }
em, i, .italic { font-style: normal; } /* 同上，用字重/颜色代替强调 */

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding-left: 1.2em; }

/* 数字一律等宽，价格表/订单号对齐才不塌 */
.num, .price, .mono, td.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }

/* ——— 焦点环：键盘可达性硬要求 ——— */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ——— 滚动条 ——— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(22,19,15,.18);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(22,19,15,.30); background-clip: padding-box; }

/* ============================================================
   氛围层：极光网格 + 胶片颗粒
   玻璃要有东西可折射，背景不能是纯色平面。
   ============================================================ */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 4% -8%,   var(--aura-coral), transparent 58%),
    radial-gradient(30rem 26rem at 96% 2%,   var(--aura-amber), transparent 56%),
    radial-gradient(34rem 28rem at 88% 42%,  var(--aura-mint),  transparent 58%),
    radial-gradient(36rem 28rem at 14% 74%,  var(--aura-amber), transparent 58%),
    radial-gradient(30rem 24rem at 70% 104%, var(--aura-coral), transparent 56%),
    var(--bg-deep);
}

/* 缓慢漂移的极光，让玻璃上的反射是"活"的 */
.atmosphere::before {
  content: '';
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(32rem 25rem at 24% 28%, var(--aura-amber), transparent 60%),
    radial-gradient(28rem 23rem at 76% 66%, var(--aura-mint),  transparent 60%);
  filter: blur(52px);
  opacity: .50;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 细网格：给深空一点"坐标感"，不喧宾夺主 */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background-image:
    linear-gradient(rgba(22,19,15,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,19,15,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70rem 50rem at 50% 20%, #000 20%, transparent 78%);
}

.page { position: relative; z-index: 2; }

/* ============================================================
   入场编排：4 组，间隔 90ms
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.d1 { transition-delay:  90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }
.reveal.d4 { transition-delay: 360ms; }

/* ——— 动效降级：整站一处关闭 ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .atmosphere::before { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .atmosphere::before { animation: drift 34s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
  }
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 跳转到主内容 */
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 99;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { left: 16px; }

/* [hidden] 必须能压过组件自己的 display，否则 JS 的 .hidden=true 不生效 */
[hidden] { display: none !important; }