/* ============================================================
   base.css · 重置 / 场景壳 / 导航 / 页脚
   ============================================================ */

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

html{
  background:var(--c-teal);
  overscroll-behavior-y:contain;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
a,button,label,input,textarea,summary{-webkit-tap-highlight-color:transparent}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.7;
  color:var(--c-cream-2);
  background:
    radial-gradient(120% 80% at 50% -10%,#2c4038 0%,#16241f 42%,#0b1411 100%);
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  touch-action:manipulation;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}

::selection{background:rgba(217,168,90,.32);color:#fff8e6}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* 暗角：把视线收进画面中心 */
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(128% 96% at 50% 44%,transparent 36%,rgba(4,9,7,.5) 100%);
  mix-blend-mode:multiply;
}

.skip{
  position:fixed;left:1rem;top:-5rem;z-index:90;
  padding:.7rem 1.1rem;border-radius:var(--r-pill);
  background:var(--c-cream);color:#3a2a12;font-size:var(--t-sm);
  text-decoration:none;transition:top .3s var(--ease);
}
.skip:focus-visible{top:1rem}

:focus-visible{
  outline:2px solid var(--c-gold-soft);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3D 画布 ---------- */
#gl{
  position:fixed;inset:0;
  width:100vw;height:100vh;height:100lvh;
  z-index:0;
  display:block;
  background:#0b1411;
}
#lvh{
  position:fixed;top:0;left:0;width:0;
  height:100vh;height:100lvh;
  pointer-events:none;visibility:hidden;
}

/* 无 WebGL / 脚本关闭时的静态山景（纯 CSS 绘：天光、山脊、谷雾） */
.scene-fallback{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease);
  background:
    radial-gradient(58% 40% at 20% 10%,rgba(255,214,150,.28),transparent 66%),
    radial-gradient(46% 38% at 76% 24%,rgba(240,180,110,.16),transparent 72%),
    linear-gradient(180deg,#22352f 0%,#16241f 38%,#0e1a17 74%,#080f0c 100%);
}
.scene-fallback::before{
  content:"";position:absolute;left:-8%;right:-8%;bottom:6%;height:64%;
  background:
    radial-gradient(50% 74% at 14% 100%,#0c1714 0%,transparent 62%),
    radial-gradient(58% 80% at 52% 100%,#0a1310 0%,transparent 60%),
    radial-gradient(44% 70% at 88% 100%,#0d1a15 0%,transparent 60%);
  filter:blur(2px);
}
.scene-fallback::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 92% at 50% 112%,transparent 26%,rgba(4,9,7,.7) 100%);
}
.no-webgl .scene-fallback{opacity:1}
.no-webgl #gl{display:none}

/* ---------- 光斑（会呼吸的树影） ---------- */
.dap{
  position:fixed;z-index:1;pointer-events:none;
  filter:url(#leafy) blur(7px);
  mix-blend-mode:screen;
  opacity:.5;
}
.dap-a{
  top:-10%;left:6%;width:52vw;height:62vh;
  background:
    radial-gradient(38% 32% at 48% 42%,rgba(255,229,164,.55),transparent 70%),
    radial-gradient(24% 20% at 26% 66%,rgba(255,216,138,.4),transparent 72%);
}
.dap-b{
  top:16%;right:-8%;width:46vw;height:66vh;
  background:
    radial-gradient(36% 30% at 52% 44%,rgba(255,222,146,.44),transparent 70%),
    radial-gradient(22% 18% at 70% 70%,rgba(255,206,130,.3),transparent 74%);
}
@media (prefers-reduced-motion:no-preference){
  .dap-a{animation:dapA 19s ease-in-out infinite alternate}
  .dap-b{animation:dapB 24s ease-in-out infinite alternate}
}
@keyframes dapA{to{transform:translate(-3vw,2vh) rotate(2deg)}}
@keyframes dapB{to{transform:translate(2vw,-2.5vh) rotate(-2deg)}}

/* ---------- 胶片颗粒 ---------- */
#grain{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.08;
  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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
  mix-blend-mode:overlay;
}

/* ---------- 开场：字在跳 ---------- */
#boot{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:#0b1210;
  transition:opacity .7s var(--ease);
  pointer-events:none;
}
#boot.done{opacity:0}
#boot .bw{
  display:flex;align-items:flex-end;gap:.06em;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,6vw,2.9rem);
  letter-spacing:.16em;color:#f3eede;
}
#boot .bw i{
  font-style:normal;display:inline-block;opacity:.5;
  animation:bootHop 1.7s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:calc(var(--i) * 120ms);
}
#boot .bw em{
  font-family:var(--font-latin);font-style:italic;
  font-size:.66em;letter-spacing:.02em;opacity:.4;
  padding-left:.55rem;padding-bottom:.2em;
  animation:none;
}
@keyframes bootHop{
  0%,58%,100%{transform:translateY(0);opacity:.5;text-shadow:none}
  26%{transform:translateY(-.16em);opacity:1;text-shadow:0 0 20px rgba(217,168,90,.5)}
}
@media (prefers-reduced-motion:reduce){
  #boot .bw i{animation:none;opacity:1}
}

/* ============================================================
   导航
   ============================================================ */
#main-nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:1.35rem var(--pad-x);
  transition:background .6s var(--ease),backdrop-filter .6s var(--ease),padding .6s var(--ease);
}
#main-nav.solid{
  background:linear-gradient(180deg,rgba(10,18,15,.85),rgba(10,18,15,.45) 66%,transparent);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  padding-top:.95rem;padding-bottom:.95rem;
}
.wordmark{
  display:inline-flex;align-items:baseline;gap:.55rem;
  text-decoration:none;color:#f6f1e2;
  text-shadow:0 1px 16px rgba(0,0,0,.45);
}
.wordmark .w-cn{
  font-family:var(--font-display);
  font-size:1.32rem;letter-spacing:.2em;line-height:1;
  padding-left:.2em;
}
.wordmark .w-en{
  font-family:var(--font-latin);font-style:italic;
  font-size:.92rem;letter-spacing:.02em;
  color:var(--c-gold-soft);opacity:.82;
  transition:opacity .5s var(--ease);
}
.wordmark:hover .w-en{opacity:1}

.navlinks{display:flex;align-items:center;gap:clamp(.7rem,1.7vw,1.5rem)}
.navlinks > a:not(.nav-cta){
  position:relative;
  font-size:.88rem;
  letter-spacing:.14em;
  color:rgba(238,240,226,.86);
  text-decoration:none;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  padding:.35rem 0;
  transition:color .45s var(--ease);
}
.navlinks > a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;
  background:linear-gradient(90deg,var(--c-gold),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.navlinks > a:not(.nav-cta):hover{color:#fff8e6}
.navlinks > a:not(.nav-cta):hover::after{transform:scaleX(1)}

.nav-cta{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  min-height:42px;
  font-size:.82rem;font-weight:600;
  letter-spacing:.1em;
  padding:.55rem 1.05rem;
  border-radius:var(--r-pill);
  text-decoration:none;overflow:hidden;
  background:linear-gradient(180deg,rgba(253,251,244,.96),rgba(246,241,228,.9));
  color:#7d5518;
  box-shadow:0 0 0 1px rgba(169,118,42,.34),0 10px 24px -16px rgba(40,22,4,.9);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.nav-cta em{font-style:normal;color:var(--c-gold-deep);transition:transform .5s var(--ease)}
.nav-cta:hover{
  box-shadow:0 0 0 1px rgba(169,118,42,.62),0 0 20px -8px rgba(214,164,88,.55),0 14px 30px -18px rgba(40,22,4,.95);
}
.nav-cta:hover em{transform:translateX(3px)}
.nav-cta:active{transform:scale(.978)}

@media (max-width:820px){
  .navlinks > a:not(.nav-cta){display:none}
}

/* ============================================================
   里程 HUD / 右缘行程尺
   ============================================================ */
.hud{
  position:fixed;left:var(--pad-x);bottom:1.3rem;z-index:30;
  display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  color:rgba(232,236,214,.6);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  pointer-events:none;
  transition:opacity .6s var(--ease);
}
.hud b{color:var(--c-gold-soft);font-weight:400}
.hud-name{letter-spacing:.22em;color:rgba(232,236,214,.78)}
.hud-sep{opacity:.4}

.rail{
  position:fixed;right:1.1rem;top:50%;z-index:30;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.6rem;
  pointer-events:none;
}
.rail i{
  display:block;width:1px;height:9px;
  background:rgba(238,240,226,.24);
  transition:background .5s var(--ease),height .5s var(--ease),box-shadow .5s var(--ease);
}
.rail i.on{background:var(--c-gold);height:18px;box-shadow:0 0 10px rgba(217,168,90,.7)}
@media (max-width:820px){.rail{display:none}}

/* ============================================================
   页脚（刊头）
   ============================================================ */
.foot{
  position:relative;z-index:12;
  background:linear-gradient(180deg,rgba(7,13,10,0) 0%,rgba(7,13,10,.88) 24%,#070d0a 100%);
  padding:clamp(3.5rem,8vw,6rem) var(--pad-x) 2.2rem;
  color:rgba(232,236,214,.72);
}
.foot-inner{max-width:var(--wrap);margin:0 auto}
.foot-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.6rem 2.4rem;
  padding-bottom:1.8rem;
  border-bottom:1px solid rgba(238,240,226,.1);
}
.foot-name{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:.14em;color:var(--c-cream);
  line-height:1.1;
}
.foot-latin{
  display:block;
  font-family:var(--font-latin);font-style:italic;
  font-size:.95rem;letter-spacing:.04em;
  color:var(--c-gold-soft);opacity:.8;
  margin-top:.4rem;
}
.foot-links{display:flex;flex-wrap:wrap;gap:.45rem .9rem;font-size:.86rem}
.foot-links a{
  color:rgba(232,236,214,.82);text-decoration:none;
  border-bottom:1px solid rgba(232,236,214,.22);
  padding-bottom:.1rem;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.foot-links a:hover{color:var(--c-gold-soft);border-color:var(--c-gold)}
.foot-cols{
  display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:2rem;
  padding:1.9rem 0 1.7rem;
  font-size:.86rem;line-height:1.8;
}
.foot-cols h3{
  font-family:var(--font-mono);font-size:.68rem;font-weight:400;
  letter-spacing:.2em;
  color:rgba(217,168,90,.85);
  margin-bottom:.65rem;
}
.foot-cols ul{list-style:none;display:grid;gap:.25rem}
.foot-cols a{color:rgba(232,236,214,.78);text-decoration:none;transition:color .4s var(--ease)}
.foot-cols a:hover{color:var(--c-cream)}
.foot-note{color:rgba(232,236,214,.54);max-width:42ch}
.foot-legal{
  padding-top:1.3rem;border-top:1px solid rgba(238,240,226,.09);
  font-size:.74rem;line-height:1.85;color:rgba(232,236,214,.44);
  display:grid;gap:.45rem;
}
.foot-legal .cr{font-family:var(--font-mono);letter-spacing:.08em;font-size:.66rem}
@media (max-width:760px){
  .foot-cols{grid-template-columns:1fr;gap:1.4rem}
}