/*!
 * 开运堂 KAIYUNTANG (www.kaiyuntang.com)
 * Copyright (c) 2026 开运堂. All Rights Reserved.
 * 本样式/脚本为开运堂原创作品，未经书面授权禁止复制、转载或用于其他站点。
 *//* ============================================================
 * 全站固定背景：星空 / 北斗 / 明月 / 云雾 / 金粉 / 远山
 * position:fixed 贯穿视口，天地相接，所有页面通用
 * ============================================================ */

/* === 全局天空层（星空/明月/云雾/粒子，随页面滚动，不悬停） === */
.global-bg{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0;pointer-events:none;overflow:hidden}
.gb-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.gb-scene > *{position:absolute}

/* === 星空 === */
.stars{inset:0;width:100%;height:100%}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* === 北斗七星（左上角） === */
.beidou{
  position:absolute;top:9%;left:3%;
  width:320px;height:200px;
  color:rgba(212,168,87,.55);
  opacity:.9;
  animation:beidouFloat 16s ease-in-out infinite;
  pointer-events:none;
}
.bd-star{
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff4d0 0%,#d4a857 50%,rgba(212,168,87,.2) 100%);
  box-shadow:0 0 10px rgba(240,207,135,.85),0 0 24px rgba(212,168,87,.5);
  animation:bdTwinkle 3.6s ease-in-out infinite;
}
.bd-star.s7{left:5%;   top:55%;  width:10px;height:10px;animation-delay:2.5s}
.bd-star.s6{left:22%;  top:33%;  width:8px;height:8px; animation-delay:2.1s}
.bd-star.s5{left:38%;  top:36%;  width:9px;height:9px; animation-delay:1.7s}
.bd-star.s4{left:56%;  top:38%;  width:6px;height:6px; animation-delay:1.3s}
.bd-star.s3{left:65%;  top:68%;  width:7px;height:7px; animation-delay:.9s}
.bd-star.s2{left:88%;  top:53%;  width:8px;height:8px; animation-delay:.5s}
.bd-star.s1{left:88%;  top:18%;  width:9px;height:9px; animation-delay:.1s}
@keyframes bdTwinkle{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.85)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
}
@keyframes beidouFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(.5deg)}
}

/* === 明月 === */
.moon{top:12%;right:15%;width:140px;height:140px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 35% 35%,#fff8e0,#f0cf87 50%,#a8823a 100%);
  box-shadow:inset -20px -20px 40px rgba(120,80,20,.35);
  animation:moonFloat 12s ease-in-out infinite}
.moon::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 40% 50%,rgba(150,105,45,.2) 0%,transparent 24%),
    radial-gradient(circle at 62% 60%,rgba(140,98,42,.16) 0%,transparent 20%),
    radial-gradient(circle at 30% 66%,rgba(135,95,40,.13) 0%,transparent 16%),
    radial-gradient(circle at 58% 38%,rgba(110,80,32,.2) 0%,transparent 4%),
    radial-gradient(circle at 42% 28%,rgba(110,80,32,.16) 0%,transparent 3.5%),
    radial-gradient(circle at 68% 52%,rgba(110,80,32,.15) 0%,transparent 3%),
    radial-gradient(circle at 34% 58%,rgba(110,80,32,.14) 0%,transparent 3%),
    radial-gradient(circle at 52% 68%,rgba(110,80,32,.13) 0%,transparent 2.5%),
    radial-gradient(circle at 76% 34%,rgba(110,80,32,.13) 0%,transparent 3%)}
.moon::after{content:"";position:absolute;inset:-70px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(240,207,135,.22) 0%,
    rgba(240,207,135,.1) 28%,
    rgba(240,207,135,.04) 55%,
    transparent 78%);
  filter:blur(8px);pointer-events:none}
@keyframes moonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* === 云雾（缭绕：多层级 + 轻微上下浮动） === */
.clouds{inset:0;width:100%;height:100%}
.cloud{position:absolute;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(180,170,200,.12),transparent 70%);
  filter:blur(28px);
  animation:cloudDrift var(--dur,80s) linear infinite,
            cloudBob var(--bob,9s) ease-in-out infinite}
.cloud.c1{top:28%;left:-20%;width:520px;height:130px;--dur:80s;--bob:10s}
.cloud.c2{top:50%;left:-30%;width:620px;height:105px;--dur:100s;--bob:12s;animation-delay:-30s,-6s;opacity:.7}
.cloud.c3{top:18%;left:-25%;width:420px;height:85px;--dur:120s;--bob:8s;animation-delay:-60s,-3s;opacity:.5}
.cloud.c4{top:40%;left:-15%;width:300px;height:60px;--dur:70s;--bob:7s;animation-delay:-15s,-2s;opacity:.4}
.cloud.c5{top:62%;left:-35%;width:480px;height:95px;--dur:140s;--bob:13s;animation-delay:-90s,-9s;opacity:.55}
.cloud.c6{top:12%;left:-10%;width:340px;height:70px;--dur:90s;--bob:6s;animation-delay:-40s,-1s;opacity:.35}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 600px))}}
@keyframes cloudBob{0%,100%{translate:0 0}50%{translate:0 -16px}}

/* === 金粉粒子（canvas） === */
.particles{inset:0;width:100%;height:100%}

/* === 飘落光屑（纯CSS） === */
.spark{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 8px var(--gold-glow);
  animation:sparkFall linear infinite;opacity:0}
@keyframes sparkFall{
  0%{transform:translateY(-20px) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(100vh) translateX(40px);opacity:0}
}

/* ============================================================
 * 页面内容层（透明，让全局背景透出）
 * ============================================================ */

/* 确保 main 及所有内容在背景之上 */
main{position:relative;z-index:1}

/* === Hero 首屏（全屏内容容器） === */
.hero-scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--nav-h) 0 80px;z-index:1}
.hero-scene .wrap{position:relative;z-index:3;width:100%}

/* === 子页面场景条（标题下沉，贴近正文输入框） === */
.sub-scene{position:relative;padding:calc(var(--nav-h) + 120px) 0 24px;z-index:1}
.sub-scene .wrap{position:relative;z-index:3;width:100%;text-align:center;padding:0 20px;box-sizing:border-box}

/* === 暗角（仅首屏顶部压暗，底部完全透明以无缝衔接下方版块） === */
.vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,
    rgba(6,5,10,.42) 0%,
    rgba(6,5,10,.14) 20%,
    rgba(6,5,10,0) 42%)}

/* === 内页内容区 === */
.page-content{padding-top:20px;padding-bottom:24px;position:relative;z-index:1}

/* === 页脚在背景之上 === */
.footer{position:relative;z-index:1}

/* ============================================================
 * 响应式
 * ============================================================ */
@media(max-width:860px){
  .moon{width:90px;height:90px;top:9%}
  .beidou{width:240px;height:150px;top:8%;left:2%}
  .hero-scene{min-height:88vh;padding-bottom:60px}
  .sub-scene{padding-top:calc(var(--nav-h) + 90px);padding-bottom:20px}
  .cloud{filter:blur(20px)}
}
@media(max-width:560px){
  .beidou{width:180px;height:112px;top:7.5%;left:1.5%;opacity:.75}
  .bd-star{width:6px!important;height:6px!important}
}
@media(max-width:480px){
  .moon{width:70px;height:70px}
  .sub-scene{padding-top:calc(var(--nav-h) + 72px);padding-bottom:16px}
  .sub-scene .wrap{padding:0 14px}
}

/* 减弱动画 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}