/* ============================================================
   烛心 · 主题 (theme.css)
   ------------------------------------------------------------
   设计原则（重要）：
     1. 本文件是唯一的视觉层，必须在 bundle.css 之后加载
     2. 不叠加、不重复定义 —— 所有规则只出现一次
     3. 动效只用 transform / opacity（走合成层，零 layout）
     4. 入场动画只用一套：riseIn
     5. 兼容性降级放在文件末尾，用 html 类名切换
   ============================================================ */

:root{
  /* 鎏金主色 */
  --gold-1:#7a5a1e;
  --gold-2:#c9982f;
  --gold-3:#e8a33d;
  --gold-4:#ffd68a;
  --gold-5:#fff4d6;
  /* 极光辅色 */
  --aurora-1:#4a7cff;
  --aurora-2:#9b5cff;
  --aurora-3:#2ee6c8;
  /* 深空底 */
  --void-1:#0d1119;
  --void-2:#111725;
  --void-3:#161d2b;
  /* 文本 */
  --tx-1:#e8edf6;
  --tx-2:#b0b8c6;
  --tx-3:#8b94a3;
  /* 描边 */
  --line:rgba(255,255,255,.075);
  --line-gold:rgba(232,163,61,.30);
}

/* ============================================================
   1. 底色（只定义一次，html 承载实色，body 承载光晕）
   ============================================================ */
html{
  background-color:var(--void-2);
  color-scheme:dark only;
}
body{
  background-color:transparent;
  background-image:
    linear-gradient(180deg, rgba(232,163,61,.06), transparent 26%),
    radial-gradient(76% 48% at 78% 0%,  rgba(232,163,61,.15), transparent 71%),
    radial-gradient(60% 44% at 5% 25%,  rgba(74,124,255,.12), transparent 73%),
    radial-gradient(62% 48% at 93% 73%, rgba(155,92,255,.10), transparent 75%),
    radial-gradient(50% 36% at 31% 103%, rgba(46,230,200,.07), transparent 77%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--tx-2);
  font-family:"LXGW WenKai","PingFang SC",system-ui,sans-serif;
}

/* ============================================================
   2. 入场动画（唯一一套）
   ============================================================ */
@keyframes riseIn{
  from{ opacity:0; transform:translate3d(0, 20px, 0) }
  to  { opacity:1; transform:translate3d(0, 0, 0) }
}
.gn-anim{
  animation:riseIn .6s cubic-bezier(.22,.75,.28,1) both;
}
.gn-anim.d1{ animation-delay:.05s }
.gn-anim.d2{ animation-delay:.12s }
.gn-anim.d3{ animation-delay:.19s }
.gn-anim.d4{ animation-delay:.26s }
.gn-anim.d5{ animation-delay:.33s }

/* 滚动出现（用 transition，不用 animation，避免重播） */
.reveal{
  animation:none !important;
  opacity:0;
  transform:translate3d(0, 16px, 0);
  transition:opacity .5s cubic-bezier(.22,.75,.28,1),
             transform .5s cubic-bezier(.22,.75,.28,1);
}
.reveal.in{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

/* ============================================================
   3. 顶栏
   ============================================================ */
.topbar{
  background:linear-gradient(180deg, rgba(20,26,37,.92), rgba(16,21,31,.68));
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:background .35s ease, border-color .35s ease;
}
.topbar.is-scrolled{
  background:linear-gradient(180deg, rgba(17,22,32,.97), rgba(14,18,27,.88));
  border-bottom-color:var(--line-gold);
}
.topbar::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(255,214,138,.45) 30%,
    rgba(255,244,214,.72) 50%,
    rgba(255,214,138,.45) 70%, transparent);
  opacity:.5;
  pointer-events:none;
}
.brand-text b{
  background:linear-gradient(100deg, var(--gold-2), var(--gold-4) 45%, var(--gold-5) 55%, var(--gold-3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-avatar{
  box-shadow:0 0 0 1px rgba(255,214,138,.26), 0 0 18px -6px rgba(232,163,61,.5);
  animation:avatarBreath 4.5s ease-in-out infinite;
}
@keyframes avatarBreath{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,214,138,.22), 0 0 15px -6px rgba(232,163,61,.42) }
  50%    { box-shadow:0 0 0 1px rgba(255,214,138,.42), 0 0 26px -3px rgba(232,163,61,.62) }
}
.topbar .loginbtn{
  background:linear-gradient(140deg, rgba(232,163,61,.22), rgba(232,163,61,.09));
  border:1px solid rgba(255,214,138,.44);
  color:var(--gold-4);
  transition:transform .28s cubic-bezier(.22,.75,.28,1), background .28s ease;
}
.topbar .groupbtn{
  background:linear-gradient(140deg, rgba(74,124,255,.22), rgba(74,124,255,.09));
  border:1px solid rgba(140,185,255,.44);
  color:#b8d4ff;
  transition:transform .28s cubic-bezier(.22,.75,.28,1), background .28s ease;
}
.topbar .loginbtn:hover,
.topbar .groupbtn:hover{
  transform:translateY(-2px);
}

/* ============================================================
   4. Hero
   ============================================================ */
.gn-hero{ position:relative }

.gn-eyebrow{
  position:relative;
  padding-left:14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px;
  letter-spacing:.18em;
  color:var(--gold-4);
}
.gn-eyebrow::before{
  content:'';
  position:absolute; left:0; top:50%;
  width:2px; height:14px;
  transform:translateY(-50%);
  background:linear-gradient(180deg, var(--gold-4), var(--gold-2));
  border-radius:2px;
  box-shadow:0 0 12px rgba(232,163,61,.6);
}

.gn-title{
  text-shadow:0 0 30px rgba(232,163,61,.14), 0 2px 28px rgba(0,0,0,.55);
}
.gn-title .accent{
  background:linear-gradient(100deg, var(--gold-2) 0%, var(--gold-4) 40%, var(--gold-5) 55%, var(--gold-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.gn-btn{
  transition:transform .3s cubic-bezier(.22,.75,.28,1),
             border-color .3s ease, box-shadow .3s ease;
}
.gn-btn.primary{
  background:linear-gradient(120deg, var(--gold-3), var(--gold-4) 52%, var(--gold-3));
  color:#1a1408;
  font-weight:600;
  box-shadow:0 10px 26px -14px rgba(232,163,61,.9);
}
.gn-btn.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -16px rgba(232,163,61,1);
}
.gn-btn:not(.primary){
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:var(--tx-1);
}
.gn-btn:not(.primary):hover{
  transform:translateY(-3px);
  border-color:var(--line-gold);
  background:rgba(232,163,61,.10);
}

.gn-stat .num{
  color:var(--gold-4);
  text-shadow:0 0 16px rgba(232,163,61,.34);
}
.gn-stat .label{
  color:var(--tx-3);
}

.gn-term{
  background:linear-gradient(165deg, #1c2331, #151b26);
  border:1px solid var(--line-gold);
  box-shadow:0 20px 48px -26px rgba(0,0,0,.9);
  transition:transform .4s cubic-bezier(.22,.75,.28,1), box-shadow .4s ease;
}
.gn-term:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px -28px rgba(0,0,0,.95), 0 0 60px -32px rgba(232,163,61,.5);
}

/* ============================================================
   5. 卡片（通用）
   ============================================================ */
.gn-card,
.gn-doing-card{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.058), rgba(255,255,255,.020));
  border-radius:16px;
  overflow:hidden;
  transition:transform .36s cubic-bezier(.22,.75,.28,1),
             border-color .36s ease, box-shadow .36s ease;
}
.gn-card:hover,
.gn-doing-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-gold);
  box-shadow:0 24px 52px -28px rgba(0,0,0,.9);
}

/* ============================================================
   6. 「最近在折腾」区块
   ============================================================ */
.gn-doing{ padding:10px 0 44px }
.gn-sec-title{
  display:flex; align-items:center; gap:12px;
  margin:0 0 26px;
  font-size:clamp(19px, 2.6vw, 24px);
  font-weight:600;
  color:var(--tx-1);
}
.gn-sec-title .gn-bar{
  display:block; width:3px; height:1.05em;
  border-radius:3px;
  background:linear-gradient(180deg, var(--gold-4), var(--gold-2));
  box-shadow:0 0 14px rgba(232,163,61,.55);
}
.gn-doing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.gn-doing-card{ padding:22px 22px 20px }
.gn-doing-card .gdc-ic{
  display:block; font-size:26px; line-height:1; margin-bottom:14px;
  transition:transform .4s cubic-bezier(.22,.75,.28,1);
}
.gn-doing-card:hover .gdc-ic{ transform:translateY(-3px) scale(1.10) }
.gn-doing-card h3{
  margin:0 0 8px; font-size:16px; font-weight:600; color:var(--tx-1);
}
.gn-doing-card p{
  margin:0 0 16px; font-size:13px; line-height:1.78; color:var(--tx-3);
}
.gn-doing-card .gdc-tag{
  display:inline-block; padding:3px 10px; border-radius:20px;
  border:1px solid rgba(232,163,61,.28);
  background:rgba(232,163,61,.08);
  font-size:11px; color:var(--gold-4);
}

/* ============================================================
   7. 滚动条（桌面细金，移动端隐藏）
   ============================================================ */
::-webkit-scrollbar{ width:6px; height:6px; background:transparent }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:rgba(232,163,61,.24);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(232,163,61,.42) }
.scroll-progress{
  background:linear-gradient(90deg, var(--gold-2), var(--gold-4));
  transform-origin:0 50%;
  width:100% !important;
  transform:scaleX(0);
}
@media(max-width:900px), (pointer:coarse){
  ::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important }
  ::-webkit-scrollbar-thumb{ display:none !important }
  html{ scrollbar-width:none }
}
html, body{ overscroll-behavior:none }

/* ============================================================
   8. 抽屉
   ============================================================ */
.drawer{
  background:linear-gradient(160deg, #171d2a, #111621);
  border-right:1px solid rgba(232,163,61,.22);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.drawer-nav .dnav-item{
  color:#c4ccd9;
  transition:background .28s ease, color .28s ease, padding-left .28s cubic-bezier(.22,.75,.28,1);
}
.drawer-nav .dnav-item:hover{
  background:linear-gradient(90deg, rgba(232,163,61,.13), transparent);
  color:var(--gold-4);
  padding-left:22px;
}
.drawer-nav .dnav-item.active{
  background:linear-gradient(90deg, rgba(232,163,61,.16), transparent);
  color:var(--gold-4);
}
.drawer-close{
  position:fixed; top:22px; right:14px; z-index:1002;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#b6bfce;
  font-size:14px; line-height:1;
  cursor:pointer;
  opacity:0; visibility:hidden;
  transform:scale(.86);
  transition:opacity .26s ease, visibility .26s ease,
             transform .3s cubic-bezier(.22,.75,.28,1),
             background .24s ease, border-color .24s ease, color .24s ease;
}
html body.drawer-open .drawer-close{
  opacity:1; visibility:visible; transform:scale(1);
}
.drawer-close:hover{
  background:rgba(232,163,61,.20);
  border-color:rgba(232,163,61,.55);
  color:var(--gold-4);
}
.drawer-head{ padding-right:52px }

/* ============================================================
   9. 弹窗
   ============================================================ */
.gmodal-note{
  display:flex; gap:9px; align-items:flex-start; text-align:left;
  margin:14px 0 12px; padding:11px 13px;
  border-radius:11px;
  border:1px solid rgba(232,163,61,.26);
  background:rgba(232,163,61,.055);
  font-size:12px; line-height:1.7; color:var(--tx-3);
}
.gmodal-note b{ display:block; margin-bottom:2px; color:var(--gold-4); font-size:12.5px }
.gmodal-actions{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:9px;
  margin-top:14px;
}
.gmodal-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:100%; min-width:0;
  padding:11px 6px;
  border-radius:10px;
  font-size:12px; line-height:1.3; text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.22,.75,.28,1), border-color .28s ease, background .28s ease;
}
.gmodal-btn:not(.accent){
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:#c3cad6;
}
.gmodal-btn:not(.accent):hover{
  transform:translateY(-2px);
  border-color:rgba(255,214,138,.42);
  color:var(--gold-4);
}
.gmodal-btn.accent{
  border:1px solid transparent;
  background:linear-gradient(120deg, var(--gold-2), var(--gold-4) 55%, var(--gold-3));
  color:#1a1408;
  font-weight:600;
}
.gmodal-btn.accent:hover{
  transform:translateY(-2px);
}

/* ============================================================
   10. 无障碍
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .gn-anim, .brand-avatar{ animation:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
  *{ transition-duration:.01ms !important }
}

/* ============================================================
   11. 兼容降级（由 compat.js 给 html 加类触发）
   ------------------------------------------------------------
   低端引擎：关掉模糊、发光、动效，改用实底
   ============================================================ */
html.eng-weak .topbar,
html.no-backdrop .topbar{
  background:#141a25;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html.eng-weak .topbar.is-scrolled,
html.no-backdrop .topbar.is-scrolled{
  background:#111621;
}
html.eng-weak .gn-term,
html.eng-weak .gn-terminal{
  background:#1a2130;
  backdrop-filter:none;
}
html.eng-weak .drawer{
  background:#141a25;
  backdrop-filter:none;
}
html.eng-weak .brand-avatar,
html.eng-weak .gn-anim,
html.eng-weak .topbar,
html.eng-weak .gn-title,
html.eng-weak .gn-stat .num{
  animation:none !important;
}
html.eng-weak .gn-anim{
  opacity:1 !important;
  transform:none !important;
}
html.eng-weak .gn-title,
html.eng-weak .gn-stat .num{
  text-shadow:none !important;
}
html.eng-weak .gn-card:hover,
html.eng-weak .gn-doing-card:hover,
html.eng-weak .gn-btn:hover{
  transform:none !important;
}
html.eng-weak .gn-card::before,
html.eng-weak .gn-doing-card::before{
  display:none !important;
}
/* 移动端 */
@media(max-width:640px){
  .gn-doing-grid{ grid-template-columns:1fr; gap:13px }
  .gn-doing-card{ padding:19px 18px 17px }
  .topbar{ backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px) }
}

/* ============================================================
   12. 性能管制（统一在此，不要在别处再写同类规则）
   ------------------------------------------------------------
   bundle.css 遗留问题：
     · 38 个 will-change（合成层堆积 + width 类触发 layout）
     · 16 个无限循环动画
   这里统一收敛。
   ============================================================ */

/* ---- ① will-change：全部归零，只放行必要的 ---- */
*,
*::before,
*::after{
  will-change:auto !important;
}
.topbar{ will-change:transform !important }
.scroll-progress{ will-change:transform !important }
.gn-hero .gn-anim{ will-change:transform, opacity !important }

/* ---- ② 明确禁止 width 类 will-change（layout 杀手） ---- */
.scroll-progress,
.tab-underline,
.tabs .tab,
.tab{
  will-change:auto !important;
}

/* ---- ③ 无限动画降频（保留视觉，降低消耗） ---- */
.orb o1, .orb.o1{ animation-duration:60s !important }
.orb o2, .orb.o2{ animation-duration:70s !important }
.star-nebula{ animation-duration:120s !important }
.aurora{ animation-duration:100s !important }
.stars-d{ animation-duration:10s !important }
.groupbtn{ animation:none !important }
.dnav-hot, .hotPulse{ animation-duration:3s !important }

/* ---- ④ 入场动画只保留一套 ---- */
.gn-anim,
.gn-hero .gn-anim,
.gn-sec-title.gn-anim,
.gn-doing-card.gn-anim{
  animation-name:riseIn !important;
  animation-duration:.6s !important;
  animation-timing-function:cubic-bezier(.22,.75,.28,1) !important;
  animation-fill-mode:both !important;
  animation-iteration-count:1 !important;
}

/* ---- ⑤ 过渡只用 transform / opacity / color ---- */
.gn-card, .gn-doing-card, .gn-btn, .loginbtn, .groupbtn,
.dnav-item, .drawer-close, .gmodal-btn{
  transition-property:transform, opacity, color, background-color, border-color;
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(.22,.75,.28,1);
}