/*!
 * 开运堂 KAIYUNTANG (www.kaiyuntang.com)
 * Copyright (c) 2026 开运堂. All Rights Reserved.
 * 本样式/脚本为开运堂原创作品，未经书面授权禁止复制、转载或用于其他站点。
 *//* ============================================================
 * 导航：透明 → 毛玻璃沉浸式
 * ============================================================ */

.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.topbar.scrolled{background:rgba(16,13,30,.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(212,168,87,.15);box-shadow:0 4px 30px rgba(0,0,0,.4)}
.topbar-in{max-width:var(--w);width:100%;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:24px}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-icon{color:var(--gold);flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(212,168,87,.35));
  transition:filter .4s var(--ease),transform .6s var(--ease-bounce);
  animation:tjSpin 60s linear infinite}
.brand:hover .logo-icon{filter:drop-shadow(0 0 14px rgba(212,168,87,.6));animation-play-state:paused}
@keyframes tjSpin{to{transform:rotate(360deg)}}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-zhuan);
  font-size:22px;font-weight:700;letter-spacing:6px;
  background:linear-gradient(180deg,#fff4d6,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-sub{font-size:9px;color:var(--ink-4);letter-spacing:4px;margin-top:3px;font-weight:500}

.nav{display:flex;gap:4px;flex:1;justify-content:center}
.nav a{position:relative;padding:9px 18px;font-size:16px;color:var(--ink-2);
  letter-spacing:4px;transition:color .3s;border-radius:var(--r-sm)}
.nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-50%);transition:width .35s var(--ease)}
.nav a:hover{color:var(--gold-2)}
.nav a:hover::after{width:70%}
.nav a.on{color:var(--gold-2)}
.nav a.on::after{width:70%}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}

.nav-toggle{display:none;width:42px;height:42px;border-radius:var(--r-sm);
  border:1px solid var(--glass-border);background:rgba(255,255,255,.04);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  backdrop-filter:blur(10px)}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--gold-2);border-radius:1px;transition:.3s}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:960px){
  :root{--nav-h:60px}
  .topbar-in{padding:0 18px;gap:12px}
  /* 移动端去除毛玻璃（backdrop-filter 会创建包含块，导致下拉导航定位错乱被遮挡） */
  .topbar.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,13,30,.96)}
  .nav{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:rgba(16,13,30,.94);backdrop-filter:blur(30px);
    flex-direction:column;justify-content:flex-start;gap:0;padding:24px 20px;
    transform:translateX(100%);transition:transform .4s var(--ease);z-index:99;overflow-y:auto}
  .nav.open{transform:translateX(0)}
  .nav a{padding:18px 16px;font-size:17px;letter-spacing:6px;border-bottom:1px solid rgba(212,168,87,.1);border-radius:0}
  .nav a::after{display:none}
  .nav a.on{background:rgba(212,168,87,.08)}
  .nav-toggle{display:flex;margin-left:auto}
  .brand-text{display:flex}
  .brand-sub{display:none}
  .brand-name{font-size:18px;letter-spacing:4px}
}

/* === 页脚 === */
.footer{position:relative;padding:52px 0 36px;margin-top:64px;
  background:linear-gradient(180deg,transparent,rgba(10,8,20,.4) 40%,rgba(8,6,16,.6));
  border-top:1px solid rgba(212,168,87,.1)}
.footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:240px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.footer-inner{max-width:var(--w);margin:0 auto;padding:0 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.footer-top{display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.footer-top .logo-icon{width:48px;height:48px;animation-duration:120s;
  filter:drop-shadow(0 0 12px rgba(212,168,87,.4))}
.footer-name{font-family:var(--font-zhuan);font-size:26px;font-weight:900;letter-spacing:10px;
  background:linear-gradient(180deg,#fff4d6,var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-left:10px}
.footer-tagline{font-size:12px;color:var(--ink-3);letter-spacing:6px}
.footer-line{display:flex;align-items:center;gap:14px;width:280px;margin:4px 0}
.footer-line span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,87,.3),transparent)}
.footer-bagua{display:flex;align-items:center;gap:9px;flex-shrink:0}
.footer-bagua svg{fill:var(--gold-3);opacity:.78;display:block;width:16px;height:20px}
.footer-copy{font-size:11px;color:var(--ink-4);letter-spacing:1.5px;margin-top:4px}
@media(max-width:860px){
  .footer{padding:56px 0 32px;margin-top:48px}
  .footer-inner{gap:10px}
  .footer-name{font-size:22px;letter-spacing:8px}
  .footer-tagline{font-size:11px;letter-spacing:4px}
  .footer-line{width:200px}
  .footer-bagua{gap:6px}
  .footer-bagua svg{width:14px;height:18px}
}