/* ==========================================================================
   base.css — 重置、排版基线、背景层、动效与降级
   依赖 tokens.css 的变量；不包含任何组件外观。
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -14%, rgba(255,120,80,.11), transparent 62%),
    radial-gradient(900px 620px at -6% 106%, rgba(120,150,255,.09), transparent 60%);
  transition:opacity .6s var(--ease);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 700px at 82% -14%, rgba(255,186,120,.34), transparent 62%),
    radial-gradient(900px 620px at -6% 106%, rgba(70,120,140,.12), transparent 60%);
}

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

a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ── 背景：星尘场 ── */
#field{position:fixed;inset:0;width:100vw;height:100dvh;z-index:10;pointer-events:none;opacity:.95}
.grain{
  position:fixed;inset:0;z-index:12;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%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");
}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,4.4vw,44px)}
main{position:relative;z-index:20}

/* ── 动效 ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lineRise{from{transform:translateY(108%)}to{transform:translateY(0)}}
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ── 响应式：背景层降噪 ── */
@media (max-width:720px){
  #field{opacity:.8}
}

/* ── 无障碍：尊重「减少动态效果」 ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}