/* ============================================================
   商域风云 · 主题系统 v2 — 亮金奢华版
   色板  Ivory #FBF7EE / #F3ECDB · Ink #2B2318 · Gold #C8941A→#F4D78A
        Lacquer #7A1F1F · Jade #24463C
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+SC:wght@400;600;700&display=swap');

:root{
  --ivory:#FBF7EE;
  --ivory-2:#F3ECDB;
  --ink:#2B2318;
  --ink-soft:#5B4E3B;
  --stone:#8A7658;
  --mist:#B9A97E;
  --gold:#C8941A;
  --gold-light:#E8B84B;
  --gold-pale:#F4D78A;
  --lacquer:#7A1F1F;
  --lacquer-2:#9A2E24;
  --jade:#24463C;
  --hair:rgba(200,148,26,0.28);
  --card-bg:linear-gradient(160deg, rgba(255,253,247,0.92), rgba(250,242,222,0.88));
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{ color:var(--ink); }

.kaiti{ font-family:"KaiTi","STKaiti","Noto Serif SC",serif; }

.eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:500;
  letter-spacing:0.35em; font-size:0.72rem;
  color:var(--lacquer-2);
}

.seal-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--lacquer-2); box-shadow:0 0 8px rgba(154,46,36,0.5);
  margin-right:8px; vertical-align:middle;
}

/* ---------- 按钮 ---------- */
.btn-seal{ position:relative; overflow:hidden; isolation:isolate; }
.btn-seal::before{
  content:''; position:absolute; inset:0; background:var(--lacquer-2);
  transform:translateY(101%); transition:transform .45s cubic-bezier(.65,0,.35,1); z-index:-1;
}
.btn-seal:hover::before{ transform:translateY(0); }
.btn-seal:hover{ color:var(--ivory) !important; }

.btn-ghost{
  border:1px solid var(--gold); color:var(--lacquer-2);
  transition:all .35s;
}
.btn-ghost:hover{ background:rgba(200,148,26,0.08); border-color:var(--gold-light); }

/* ---------- ink divider ---------- */
.ink-divider{ width:100%; overflow:hidden; }
.ink-divider svg{ display:block; width:100%; height:auto; }
.ink-divider path{
  fill:none; stroke:url(#ink-gold-grad); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.ink-divider.in-view path{ stroke-dashoffset:0; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- 驼队视差带 ---------- */
.caravan-strip{
  position:relative; height:60px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  background:linear-gradient(180deg, rgba(200,148,26,0.05), transparent);
}
.caravan-track{ position:absolute; top:0; left:0; height:100%; display:flex; align-items:center; animation:caravan-walk 38s linear infinite; opacity:.7; }
.caravan-track span{ font-size:30px; margin:0 44px; filter:drop-shadow(0 2px 4px rgba(122,31,31,0.2)); }
@keyframes caravan-walk{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- card ---------- */
.card{
  background:var(--card-bg);
  border:1px solid var(--hair);
  position:relative;
  box-shadow:0 10px 26px rgba(122,90,20,0.08);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s;
  transform-style:preserve-3d;
  will-change:transform;
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(200,148,26,0.14), transparent 60%);
  opacity:0; transition:opacity .4s;
}
.card:hover::after{ opacity:1; }
.card:hover{
  border-color:rgba(200,148,26,0.6);
  box-shadow:0 28px 54px rgba(122,90,20,0.20), 0 0 0 1px rgba(200,148,26,0.15);
}

/* ---------- 数字滚动 stat ---------- */
.stat-num{
  font-family:"KaiTi","STKaiti","Noto Serif SC",serif;
  background:linear-gradient(120deg,var(--lacquer-2),var(--gold) 55%,var(--gold-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}

/* ---------- 光标金粉跟随 hero ---------- */
.gold-cursor-glow{
  position:absolute; width:460px; height:460px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(200,148,26,0.16), transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s; opacity:0; z-index:1;
}

/* ---------- 印章角标 ---------- */
.corner-seal{
  position:absolute; top:18px; right:18px; width:34px; height:34px;
  border:1.5px solid var(--lacquer-2); color:var(--lacquer-2);
  display:flex; align-items:center; justify-content:center;
  font-family:"KaiTi","STKaiti",serif; font-size:15px; font-weight:700;
  background:rgba(154,46,36,0.06);
}

/* ---------- nav ---------- */
.nav-link{ position:relative; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-8px; height:1.5px; width:0; background:var(--gold); transition:width .35s cubic-bezier(.22,.61,.36,1); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--lacquer-2); }
.nav-link.active::after{ width:100%; background:var(--lacquer-2); }

/* ---------- 滚动进度条 ---------- */
#scrollProgress{ position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--lacquer-2),var(--gold-light)); z-index:60; transition:width .1s linear; }

/* ---------- loader ---------- */
#pageLoader{ position:fixed; inset:0; z-index:200; background:var(--ivory); display:flex; align-items:center; justify-content:center; transition:opacity .7s ease, visibility .7s ease; }
#pageLoader.hide{ opacity:0; visibility:hidden; }
#pageLoader .seal-ring{
  width:74px; height:74px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:"KaiTi","STKaiti",serif; color:var(--lacquer-2); font-size:22px;
  animation:seal-pulse 1.4s ease-in-out infinite;
  background:radial-gradient(circle, rgba(200,148,26,0.08), transparent);
}
@keyframes seal-pulse{ 0%,100%{ transform:scale(1) rotate(0deg); opacity:.75;} 50%{ transform:scale(1.08) rotate(8deg); opacity:1;} }

/* ============================================================
   3D 旋转印鉴环 — 签名元素 (signature rotating relic ring)
   ============================================================ */
.relic-stage{
  perspective:1400px;
  width:100%; height:340px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.relic-ring{
  position:relative; width:200px; height:200px;
  transform-style:preserve-3d;
  animation:relic-spin 26s linear infinite;
}
.relic-ring:hover{ animation-play-state:paused; }
.relic-item{
  position:absolute; top:50%; left:50%; width:120px; height:120px;
  margin:-60px 0 0 -60px;
  border-radius:50%; overflow:hidden;
  border:2.5px solid var(--gold-light);
  box-shadow:0 12px 30px rgba(122,90,20,0.28), inset 0 0 20px rgba(255,255,255,0.4);
  background:var(--ivory-2);
}
.relic-item img{ width:100%; height:100%; object-fit:cover; }
@keyframes relic-spin{ from{ transform:rotateY(0deg);} to{ transform:rotateY(360deg);} }

@media (max-width: 767px){
  .relic-stage{ height:280px; }
  .relic-ring{ width:160px; height:160px; }
  .relic-item{ width:96px; height:96px; margin:-48px 0 0 -48px; }
}

/* ---------- 3D tilt for cards ---------- */
.tilt{ transition:transform .25s cubic-bezier(.22,.61,.36,1); }

/* ---------- 文创跑马灯 ---------- */
.marquee-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll 32s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee-item{
  width:180px; height:180px; margin:0 18px; flex-shrink:0;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,0.9), rgba(243,236,219,0.6));
  border:1px solid var(--hair); border-radius:12px;
  display:flex; align-items:center; justify-content:center; padding:14px;
  box-shadow:0 10px 24px rgba(122,90,20,0.10);
}
.marquee-item img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(122,90,20,0.15)); }

/* ---------- 移动端导航 ---------- */
#mobileMenu{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,.61,.36,1); }
#mobileMenu.open{ max-height:280px; }

/* utility */
::selection{ background:var(--gold); color:var(--ivory); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .reveal, .ink-divider path, #pageLoader, .card, .relic-ring, .marquee-track, .caravan-track{ transition:none !important; animation:none !important; }
}