/* =========================================================
   玉衡 · 首页视觉（Figma 风格重构）
   设计目标：克制留白 · 单一焦点 · 柔和层次 · 安静的高级感
   ========================================================= */

#heroSection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero 底部渐变过渡，消除与内容区的硬切 */
#heroSection::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8rem;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--qn-xuan-zhi-soft)) 100%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="collection"] #heroSection::after {
  background: linear-gradient(180deg, transparent 0%, rgb(8 6 14) 100%);
}
[data-theme="celestial"] #heroSection::after {
  background: linear-gradient(180deg, transparent 0%, rgb(4 4 8) 100%);
}
[data-theme="paper"] #heroSection::after {
  background: linear-gradient(180deg, transparent 0%, rgb(var(--qn-xuan-zhi-dark)) 100%);
}

/* ---- 1. 背景：每种主题仅保留一层优雅的径向光晕，不再叠加繁杂元素 ---- */
.fg-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.fg-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgb(0 0 0 / 0.25) 100%);
}

/* 默认：现代素白 —— 宣纸白 + 极淡金辉 + 微纹理 */
.fg-hero__bg--default {
  background:
    radial-gradient(60% 45% at 50% 0%, rgb(var(--qn-hu-po-jin) / 0.10) 0%, transparent 55%),
    radial-gradient(35% 30% at 18% 85%, rgb(var(--qn-dai-qing) / 0.04) 0%, transparent 55%),
    linear-gradient(180deg, rgb(var(--qn-xuan-zhi-soft)) 0%, rgb(var(--qn-xuan-zhi)) 100%);
}
.fg-hero__bg--default::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.04'/%3E%3C/svg%3E");
  opacity: .5;
}

/* 典藏：太素玄青 —— 深底 + 顶部金辉 + 底部暗角 */
.fg-hero__bg--collection {
  background:
    radial-gradient(60% 45% at 50% 8%, rgb(var(--qn-hu-po-jin) / 0.14) 0%, transparent 60%),
    radial-gradient(40% 30% at 85% 80%, rgb(var(--qn-ziwei-purple) / 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgb(10 48 48) 0%, rgb(8 6 14) 60%, rgb(4 4 8) 100%);
}

/* 宣纸：松烟落墨 —— 暖宣纸 + 一角柔金 */
.fg-hero__bg--paper {
  background:
    radial-gradient(45% 40% at 78% 18%, rgb(var(--qn-hu-po-jin) / 0.14) 0%, transparent 55%),
    radial-gradient(40% 35% at 18% 82%, rgb(var(--qn-dai-qing) / 0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgb(var(--qn-xuan-zhi)) 0%, rgb(var(--qn-xuan-zhi-dark)) 100%);
}
.fg-hero__bg--paper::after {
  background: radial-gradient(120% 80% at 50% 0%, transparent 60%, rgb(var(--qn-ink-black) / 0.10) 100%);
}

/* 星象：璇玑夜观 —— 深夜蓝紫 + 柔星辉 */
.fg-hero__bg--celestial {
  background:
    radial-gradient(55% 45% at 50% 12%, rgb(100 160 160 / 0.22) 0%, transparent 55%),
    radial-gradient(45% 40% at 82% 78%, rgb(var(--qn-ziwei-purple) / 0.20) 0%, transparent 50%),
    radial-gradient(35% 30% at 14% 80%, rgb(var(--qn-hu-po-jin) / 0.10) 0%, transparent 50%),
    linear-gradient(180deg, rgb(6 6 18) 0%, rgb(8 8 24) 55%, rgb(4 4 8) 100%);
}

[data-theme="collection"] .fg-hero__bg--collection,
[data-theme="paper"] .fg-hero__bg--paper,
[data-theme="celestial"] .fg-hero__bg--celestial { opacity: 1; }

/* 默认（无 data-theme）→ 现代素白 */
.fg-hero__bg--default { opacity: 1; }
:root:not([data-theme]) .fg-hero__bg--default { opacity: 1; }

/* ---- 2. 文案区：单一焦点，克制留白 ---- */
.fg-hero__brand {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 clamp(1rem, 4vw, 2rem);
  max-width: 46rem;
}
.fg-hero__brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 38rem);
  height: 22rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgb(var(--qn-dai-qing-dark) / 0.55) 0%, transparent 65%);
  z-index: -1;
  filter: blur(20px);
  pointer-events: none;
}
[data-theme="paper"] .fg-hero__brand::before {
  background: radial-gradient(ellipse at center, rgb(var(--qn-xuan-zhi-soft) / 0.7) 0%, transparent 65%);
}

.fg-hero__label {
  font-family: var(--qn-font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgb(var(--qn-hu-po-jin) / 0.9);
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(16px);
  animation: fgFadeUp 0.8s 0.15s var(--qn-ease, ease) forwards;
}

.fg-hero__title {
  font-family: var(--qn-font-serif);
  font-size: clamp(4rem, 13vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(0.06em, 1.6vw, 0.12em);
  margin: 0;
  display: flex;
  justify-content: center;
  gap: clamp(0.02em, 1vw, 0.06em);
}
.fg-hero__title .gold-foil-text {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px) scale(0.94);
  animation: fgHeroChar 0.9s var(--qn-ease, ease) forwards;
  /* 默认素白主题：沉静墨色 + 微古铜渐变 */
  background: linear-gradient(180deg, rgb(var(--qn-dai-qing-dark)) 0%, rgb(var(--qn-dai-qing)) 55%, rgb(var(--qn-hu-po-jin-dark)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fg-hero__title .gold-foil-text:nth-child(1) { animation-delay: 0.1s; }
.fg-hero__title .gold-foil-text:nth-child(2) { animation-delay: 0.24s; }

.fg-hero__divider {
  width: 4.5rem;
  height: 1px;
  margin: 2rem auto 0;
  background: linear-gradient(90deg, transparent, rgb(var(--qn-hu-po-jin) / 0.6), transparent);
  opacity: 0;
  transform: scaleX(0);
  animation: fgDivider 0.8s 0.5s var(--qn-ease, ease) forwards;
}

.fg-hero__motto {
  font-family: var(--qn-font-serif);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.18em;
  margin-top: 1.75rem;
  color: rgb(var(--qn-dai-qing) / 0.8);
  opacity: 0;
  transform: translateY(16px);
  animation: fgFadeUp 0.7s 0.6s var(--qn-ease, ease) forwards;
}

.fg-hero__desc {
  font-size: 0.95rem;
  line-height: 1.9;
  margin: 1rem auto 0;
  max-width: 32rem;
  color: rgb(var(--qn-dai-qing) / 0.6);
  opacity: 0;
  transform: translateY(16px);
  animation: fgFadeUp 0.7s 0.72s var(--qn-ease, ease) forwards;
}

.fg-hero__actions {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(16px);
  animation: fgFadeUp 0.7s 0.86s var(--qn-ease, ease) forwards;
}
@media (min-width: 640px) {
  .fg-hero__actions { flex-direction: row; justify-content: center; }
}

/* Hero 次按钮在浅色背景上增强可辨识性 */
.fg-hero__actions .qn-btn--outline {
  border-color: rgb(var(--qn-dai-qing) / 0.38);
  background: rgb(var(--qn-xuan-zhi-soft) / 0.55);
}
.fg-hero__actions .qn-btn--outline:hover {
  border-color: rgb(var(--qn-hu-po-jin));
  background: rgb(var(--qn-hu-po-jin) / 0.1);
}
[data-theme="collection"] .fg-hero__actions .qn-btn--outline,
[data-theme="celestial"] .fg-hero__actions .qn-btn--outline {
  background: rgb(var(--qn-dai-qing-dark) / 0.35);
}

.fg-hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: rgb(var(--qn-dai-qing) / 0.45);
  opacity: 0;
  animation: fgFadeIn 0.6s 1.3s ease forwards;
  z-index: 10;
}
.fg-hero__mouse {
  width: 1.4rem;
  height: 2.3rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.4;
  position: relative;
}
.fg-hero__mouse::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 0.22rem;
  height: 0.22rem;
  background: currentColor;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: fgMouse 1.8s ease-in-out infinite;
}
@keyframes fgMouse { 0%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); } 50% { opacity: 1; transform: translateX(-50%) translateY(0.5rem); } }

/* 主题文案适配 */
[data-theme="paper"] .gold-foil-text {
  background: linear-gradient(180deg, rgb(var(--qn-dai-qing-dark)) 0%, rgb(var(--qn-dai-qing)) 55%, rgb(var(--qn-hu-po-jin-dark)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="paper"] .fg-hero__motto { color: rgb(var(--qn-dai-qing) / 0.82); }
[data-theme="collection"] .fg-hero__motto,
[data-theme="collection"] .fg-hero__desc { color: rgb(var(--qn-dai-qing) / 0.72); }
[data-theme="celestial"] .fg-hero__motto { color: rgb(var(--qn-dai-qing) / 0.85); }
[data-theme="celestial"] .gold-foil-text {
  filter: drop-shadow(0 0 24px rgb(var(--qn-hu-po-jin) / 0.35));
}

/* ---- 古籍跑马灯（主题响应） ---- */
.fg-hero__marquee {
  position: absolute;
  bottom: 5.5rem;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: auto;
  padding: 0.85rem 0;
  opacity: 0;
  animation: fgFadeIn 0.8s 1.1s ease forwards;
}
.fg-hero__marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* 默认隐藏所有主题项，只显示当前主题 */
.fg-marquee__item {
  display: none;
  align-items: center;
  white-space: nowrap;
  font-family: var(--qn-font-serif);
  padding: 0 1.6rem;
  color: rgb(var(--qn-dai-qing) / 0.28);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
:root:not([data-theme]) .fg-marquee__item[data-theme-item="default"],
[data-theme="default"] .fg-marquee__item[data-theme-item="default"] { display: inline-flex; }
[data-theme="collection"] .fg-marquee__item[data-theme-item="collection"] { display: inline-flex; }
[data-theme="paper"] .fg-marquee__item[data-theme-item="paper"] { display: inline-flex; }
[data-theme="celestial"] .fg-marquee__item[data-theme-item="celestial"] { display: inline-flex; }

/* default / 素白：克制名录 */
:root:not([data-theme]) .fg-marquee__item,
[data-theme="default"] .fg-marquee__item {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: rgb(var(--qn-dai-qing) / 0.26);
}
:root:not([data-theme]) .fg-hero__marquee::before,
[data-theme="default"] .fg-hero__marquee::before {
  background: linear-gradient(90deg, transparent, rgb(var(--qn-hu-po-jin) / 0.04), transparent);
  opacity: 1;
}

/* collection / 典藏：长句经文，博物馆级 */
[data-theme="collection"] .fg-hero__marquee::before {
  background:
    linear-gradient(90deg, transparent 0%, rgb(var(--qn-hu-po-jin) / 0.05) 15%, rgb(var(--qn-hu-po-jin) / 0.05) 85%, transparent 100%);
  opacity: 1;
  border-top: 1px solid rgb(var(--qn-hu-po-jin) / 0.08);
  border-bottom: 1px solid rgb(var(--qn-hu-po-jin) / 0.08);
}
[data-theme="collection"] .fg-marquee__item {
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: rgb(var(--qn-dai-qing) / 0.42);
}
[data-theme="collection"] .fg-marquee__item:hover {
  color: rgb(var(--qn-hu-po-jin) / 0.85);
}

/* paper / 宣纸：竖排书名，从右向左滚动 */
[data-theme="paper"] .fg-hero__marquee::before {
  background:
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 48px,
      rgb(var(--qn-dai-qing) / 0.03) 48px,
      rgb(var(--qn-dai-qing) / 0.03) 49px
    ),
    linear-gradient(90deg, transparent, rgb(var(--qn-hu-po-jin) / 0.04), transparent);
  opacity: 1;
}
[data-theme="paper"] .fg-marquee__item--paper {
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 4.2rem;
  justify-content: flex-end;
  padding: 0 0.85rem;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: rgb(var(--qn-dai-qing) / 0.45);
  border-left: 1px solid rgb(var(--qn-dai-qing) / 0.06);
}
[data-theme="paper"] .fg-marquee__item--paper:hover {
  color: rgb(var(--qn-zhu-sha) / 0.85);
}

/* celestial / 星象：星图经文，夜光效果 */
[data-theme="celestial"] .fg-hero__marquee::before {
  background:
    radial-gradient(120% 80% at 30% 50%, rgb(var(--qn-hu-po-jin) / 0.08) 0%, transparent 40%),
    radial-gradient(120% 80% at 70% 50%, rgb(var(--qn-ziwei-purple) / 0.08) 0%, transparent 40%),
    linear-gradient(90deg, transparent, rgb(var(--qn-hu-po-jin) / 0.04), transparent);
  opacity: 1;
}
[data-theme="celestial"] .fg-marquee__item {
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: rgb(var(--qn-dai-qing) / 0.6);
  text-shadow: 0 0 16px rgb(var(--qn-hu-po-jin) / 0.12);
}
[data-theme="celestial"] .fg-marquee__item:hover {
  color: rgb(var(--qn-hu-po-jin-light) / 0.95);
  text-shadow: 0 0 24px rgb(var(--qn-hu-po-jin) / 0.35);
}

/* 跑马灯速度：星象更慢更庄重 */
[data-theme="celestial"] .fg-marquee__track {
  animation-duration: 55s;
}
[data-theme="collection"] .fg-marquee__track {
  animation-duration: 48s;
}
[data-theme="paper"] .fg-marquee__track {
  animation-duration: 42s;
}

/* 减弱动画：暂停跑马灯并静态展示 */
@media (prefers-reduced-motion: reduce) {
  .fg-hero__marquee {
    animation: none;
    opacity: 1;
  }
  .fg-marquee__track {
    animation: none !important;
    transform: none !important;
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
    gap: 0.5rem;
  }
  .fg-marquee__item {
    display: inline-flex !important;
    padding: 0.3rem 0.8rem;
    opacity: 0.7;
  }
  [data-theme="paper"] .fg-marquee__item--paper {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    height: auto;
    border-left: none;
  }
}

/* ---- 3. 内容区通用 ---- */
.fg-section {
  position: relative;
  padding-top: clamp(4.5rem, 9vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
}

/* Section 背景统一为同色系金辉渐变，消除色彩断裂 */
.fg-section--gold {
  background: linear-gradient(180deg,
    transparent 0%,
    rgb(var(--qn-hu-po-jin) / 0.025) 30%,
    rgb(var(--qn-hu-po-jin) / 0.025) 70%,
    transparent 100%);
}

/* Section 之间用细分隔线衔接，替代突兀的背景切换 */
.fg-section + .fg-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80vw, 3rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--qn-hu-po-jin) / 0.18), transparent);
}

.fg-section__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.fg-section__head .fg-lead {
  margin: 1rem auto 0;
}

/* 卡片图标徽标 */
.fg-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--qn-font-serif);
  font-size: 1.25rem;
  color: rgb(var(--qn-hu-po-jin-dark));
  background: rgb(var(--qn-hu-po-jin) / 0.08);
  border: 1px solid rgb(var(--qn-hu-po-jin) / 0.18);
  transition: transform 0.4s var(--qn-ease, ease), background-color 0.3s ease;
}
.group:hover .fg-icon {
  transform: scale(1.08);
  background: rgb(var(--qn-hu-po-jin) / 0.14);
}

/* 滚动揭示 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s var(--qn-ease, ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* 每日运势标签 / 数值（沿用既有系统） */
.daily-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgb(var(--qn-hu-po-jin) / 0.1);
  color: rgb(var(--qn-hu-po-jin));
  border: 1px solid rgb(var(--qn-hu-po-jin) / 0.2);
}
.stat-value {
  font-family: var(--qn-font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(var(--qn-hu-po-jin));
  letter-spacing: 0.1em;
}

/* 减弱动画 */
@media (prefers-reduced-motion: reduce) {
  .fg-hero__label, .fg-hero__motto, .fg-hero__desc, .fg-hero__actions,
  .fg-hero__divider, .fg-hero__scroll, .gold-foil-text {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---- 关键帧 ---- */
@keyframes fgFadeUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fgHeroChar { 0% { opacity: 0; filter: blur(14px); transform: translateY(28px) scale(0.94); } 100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes fgDivider { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } }
@keyframes fgFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }