/**
 * 首页视觉：入口卡片、当前节气、查询面板（与 Tailwind / site-tokens 协调）
 */
#page-home .surface-plain,
#home-query-panel .surface-plain {
  backdrop-filter: blur(8px);
}

/* —— 首屏标题 —— */
.home-hero {
  text-align: center;
}
.home-hero .home-hero-lead {
  text-align: left;
}
@media (max-width: 640px) {
  .home-hero .home-hero-lead {
    text-align: left;
  }
}
.home-hero-lead {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.home-hero-accent {
  display: none;
}
.dark .home-hero-accent {
  display: none;
}
.home-hero-title {
  font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Kaiti SC', 'Songti SC', 'Noto Serif SC', serif;
  font-size: clamp(var(--site-text-xl), 3vw, var(--site-text-3xl));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--site-leading-tight);
  color: rgb(15 23 42);
  margin: 0;
}
.dark .home-hero-title {
  color: rgb(248 250 252);
}
.home-hero-desc-line {
  margin: 0;
  font-size: var(--site-text-sm);
  line-height: var(--site-leading-normal);
  font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Kaiti SC', 'Songti SC', 'Noto Serif SC', serif;
  letter-spacing: 0.06em;
  color: rgb(71 85 105);
}
.dark .home-hero-desc-line {
  color: rgb(148 163 184);
}

/* —— 首页英雄卡片：黑底白字（仅用于「二十四节气 · 时序与人间」入口块） —— */
.home-hero-box--black.surface-plain {
  /* 黑底半透明 + 顶部轻微蓝绿色高光，保证“高级感”同时不刺眼 */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, rgb(22 93 255 / 0.18), transparent 55%),
    radial-gradient(700px 380px at 85% 20%, rgb(76 175 80 / 0.12), transparent 50%),
    rgba(0, 0, 0, 0.62);
  border-color: rgba(226, 232, 240, 0.16) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35) !important;
}
.home-hero-box--black.surface-plain::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.95),
    rgba(56, 189, 248, 0.65),
    rgba(255, 125, 0, 0.55)
  );
  opacity: 0.55;
  filter: blur(0.25px);
}

.home-hero-box--black .home-hero-title {
  color: rgb(248 250 252) !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.home-hero-box--black .home-hero-desc-line {
  color: rgb(226 232 240) !important;
  opacity: 0.92;
}

/* —— 四宫格入口（方框卡片） —— */
.home-portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .home-portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}
@media (min-width: 1024px) {
  .home-portal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.home-portal-card {
  display: block;
  padding: 1.55rem 1.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 10px 28px rgba(15, 23, 42, 0.07);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  min-height: 7.25rem;
}
.dark .home-portal-card {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.home-portal-grid .home-portal-card.home-portal-reveal.reveal-visible:hover {
  transform: translate3d(0, -3px, 0);
  border-color: rgb(var(--site-primary-rgb, 22 163 74) / 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 16px 40px rgba(15, 23, 42, 0.12);
}
.dark .home-portal-grid .home-portal-card.home-portal-reveal.reveal-visible:hover {
  border-color: rgb(var(--site-primary-rgb, 22 163 74) / 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.home-portal-card h3 {
  font-family: var(--site-font-serif);
  font-size: var(--site-text-lg);
  line-height: var(--site-leading-snug);
  font-weight: 700;
  margin-bottom: 0;
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.dark .home-portal-card h3 {
  color: rgb(var(--site-primary-rgb, 22 163 74));
}

.home-portal-desc {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgb(71 85 105);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dark .home-portal-desc {
  color: rgb(148 163 184);
}

/* —— 首页四宫格：滚动渐入（通用 .reveal-on-scroll 见 css/reveal-on-scroll.css） —— */
/* 四入口：自上方滑入 + 错落延迟；各具特点的缓动与微变换（仅 GPU 友好属性） */
.home-portal-grid .home-portal-card.home-portal-reveal.reveal-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.62s cubic-bezier(0.2, 0.75, 0.35, 1),
    transform 0.62s cubic-bezier(0.2, 0.75, 0.35, 1),
    filter 0.62s cubic-bezier(0.2, 0.75, 0.35, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-portal-grid .home-portal-card.home-portal-reveal.reveal-visible {
  opacity: 1;
  will-change: auto;
}

/* 节气文库：书页翻开般的轻移 */
.home-portal-grid .home-portal-card.home-portal-reveal--library.reveal-on-scroll {
  transform: translate3d(0, -1rem, 0) rotate(-0.35deg);
  transition-delay: 0ms;
}
.home-portal-grid .home-portal-card.home-portal-reveal--library.reveal-visible {
  transform: translate3d(0, 0, 0) rotate(0deg);
  filter: none;
}

/* 时空漫游：自上方略带回旋，略带景深 */
.home-portal-grid .home-portal-card.home-portal-reveal--roam.reveal-on-scroll {
  transform: translate3d(0, -1.15rem, 0) scale(0.97);
  filter: blur(2px);
  transition-delay: 85ms;
}
.home-portal-grid .home-portal-card.home-portal-reveal--roam.reveal-visible {
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

/* AI 工坊：略小的弹性放大，偏「点亮」感 */
.home-portal-grid .home-portal-card.home-portal-reveal--ai.reveal-on-scroll {
  transform: translate3d(0, -1rem, 0) scale(0.94);
  filter: saturate(0.92);
  transition-delay: 170ms;
  transition-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1);
}
.home-portal-grid .home-portal-card.home-portal-reveal--ai.reveal-visible {
  transform: translate3d(0, 0, 0) scale(1);
  filter: saturate(1);
}

/* 节气圈：自上方聚拢 */
.home-portal-grid .home-portal-card.home-portal-reveal--circle.reveal-on-scroll {
  transform: translate3d(0, -1rem, 0) scale(0.96);
  transition-delay: 255ms;
  transition-timing-function: cubic-bezier(0.25, 0.82, 0.38, 1);
}
.home-portal-grid .home-portal-card.home-portal-reveal--circle.reveal-visible {
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

@media (max-width: 639px) {
  .home-portal-grid .home-portal-card.home-portal-reveal--library.reveal-on-scroll,
  .home-portal-grid .home-portal-card.home-portal-reveal--roam.reveal-on-scroll,
  .home-portal-grid .home-portal-card.home-portal-reveal--ai.reveal-on-scroll,
  .home-portal-grid .home-portal-card.home-portal-reveal--circle.reveal-on-scroll {
    transition-delay: 0ms;
  }
}

/* —— 当前节气大卡片 —— */
.home-current-term {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(10px);
}
.dark .home-current-term {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.58);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.home-term-block {
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(248, 250, 252, 0.95);
}
.dark .home-term-block {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.4);
}
.home-term-block h5 {
  font-weight: 600;
  color: rgb(71 85 105);
}
.dark .home-term-block h5 {
  color: rgb(148 163 184);
}

/* 进度环 SVG */
.home-term-ring-track {
  stroke: rgb(var(--site-primary-rgb, 22 163 74) / 0.22);
  stroke-width: 4;
}
.home-term-ring-fill {
  stroke: rgb(var(--site-primary-rgb, 22 163 74) / 0.82);
  stroke-width: 5;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 8px 14px rgb(var(--site-primary-rgb, 22 163 74) / 0.28));
}

.home-term-ring-host {
  border-radius: 9999px;
  /* 只要圆形外阴影，不要“方框感”的外框 */
  box-shadow:
    0 18px 40px rgb(var(--site-primary-rgb, 22 163 74) / 0.18),
    0 6px 18px rgb(var(--site-primary-rgb, 22 163 74) / 0.16);
}

.home-term-circle {
  background:
    radial-gradient(
      circle at 30% 18%,
      rgb(var(--site-primary-rgb, 22 163 74) / 0.22),
      rgb(var(--site-primary-rgb, 22 163 74) / 0.08)
    );
  border: 1px solid rgb(var(--site-primary-rgb, 22 163 74) / 0.28);
}
.dark .home-term-circle {
  background:
    radial-gradient(
      circle at 30% 18%,
      rgb(var(--site-primary-rgb, 22 163 74) / 0.18),
      rgba(15, 23, 42, 0.92)
    );
  border-color: rgb(var(--site-primary-rgb, 22 163 74) / 0.32);
}

.home-term-name {
  font-size: var(--site-text-2xl);
  font-weight: 700;
  font-family: var(--site-font-serif);
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.dark .home-term-name {
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.home-term-meta {
  color: rgb(71 85 105);
}
.dark .home-term-meta {
  color: rgb(148 163 184);
}

.home-term-badge.spring,
.home-term-badge.summer,
.home-term-badge.autumn,
.home-term-badge.winter {
  background: rgb(var(--site-primary-rgb, 22 163 74) / 0.14);
  color: rgb(var(--site-primary-rgb, 22 163 74));
  border: 1px solid rgb(var(--site-primary-rgb, 22 163 74) / 0.35);
  box-shadow:
    0 0 0 1px rgb(var(--site-primary-rgb, 22 163 74) / 0.12),
    0 12px 26px rgb(var(--site-primary-rgb, 22 163 74) / 0.16);
}
.dark .home-term-badge.spring,
.dark .home-term-badge.summer,
.dark .home-term-badge.autumn,
.dark .home-term-badge.winter {
  background: rgb(var(--site-primary-rgb, 22 163 74) / 0.18);
  color: rgb(var(--site-primary-rgb, 22 163 74));
  border-color: rgb(var(--site-primary-rgb, 22 163 74) / 0.42);
}

/* —— 节气与谚语查询面板 —— */
.home-query-section {
  position: relative;
  z-index: 1;
}

.home-query-panel {
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
  padding: 1.5rem 1.35rem 1.75rem;
  backdrop-filter: blur(10px);
}
.dark .home-query-panel {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.62);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.home-query-header {
  margin-bottom: 1.25rem;
}
.home-query-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.dark .home-query-title {
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.home-title-line {
  height: 3px;
  width: 3.5rem;
  margin-top: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgb(var(--site-primary-rgb, 22 163 74)),
    rgba(76, 175, 80, 0.85)
  );
}

.home-query-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.home-query-tab {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.9);
  color: rgb(71 85 105);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.dark .home-query-tab {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.45);
  color: rgb(203 213 225);
}
.home-query-tab:hover {
  border-color: rgb(var(--site-primary-rgb, 22 163 74) / 0.35);
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.home-query-tab--active {
  border-color: rgb(var(--site-primary-rgb, 22 163 74));
  background: rgb(var(--site-primary-rgb, 22 163 74) / 0.12);
  color: rgb(var(--site-primary-rgb, 22 163 74));
  font-weight: 600;
}
.dark .home-query-tab--active {
  background: rgb(var(--site-primary-rgb, 22 163 74) / 0.22);
  color: rgb(var(--site-primary-rgb, 22 163 74));
}

.home-query-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: rgb(var(--site-primary-rgb, 22 163 74));
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgb(var(--site-primary-rgb, 22 163 74) / 0.28);
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.home-query-submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.home-query-form-col label {
  color: rgb(var(--site-primary-rgb, 22 163 74));
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dark .home-query-form-col label {
  color: rgb(var(--site-primary-rgb, 22 163 74) / 0.92);
}

.home-query-result-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--site-primary-rgb, 22 163 74));
  margin-bottom: 0.5rem;
}
.dark .home-query-result-label {
  color: rgb(var(--site-primary-rgb, 22 163 74) / 0.9);
}

.home-query-result-box {
  min-height: 8rem;
  padding: 1rem 1.15rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.95);
}
.dark .home-query-result-box {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.42);
}

/* 动态注入的查询结果 */
.home-query-result-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.home-query-result-meta p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(51 65 85);
}
.dark .home-query-result-meta p {
  color: rgb(203 213 225);
}
.home-query-result-k {
  display: inline-block;
  min-width: 4.5rem;
  margin-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--site-primary-rgb, 22 163 74));
}
.dark .home-query-result-k {
  color: rgb(var(--site-primary-rgb, 22 163 74) / 0.9);
}
.home-query-result-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgb(71 85 105);
}
.dark .home-query-result-desc {
  color: rgb(186 199 214);
}

.home-query-result-grid2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
@media (min-width: 480px) {
  .home-query-result-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-query-result-subcard {
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
}
.dark .home-query-result-subcard {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.45);
}

.home-query-result-proverbs {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.dark .home-query-result-proverbs {
  border-top-color: rgba(148, 163, 184, 0.12);
}
.home-query-result-proverbs-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: rgb(71 85 105);
}
.dark .home-query-result-proverbs-title {
  color: rgb(186 199 214);
}
.home-query-proverb-line {
  margin: 0.35rem 0;
  padding-left: 0.65rem;
  border-left: 3px solid rgb(var(--site-primary-rgb, 22 163 74) / 0.45);
  font-size: 0.85rem;
  font-style: italic;
  color: rgb(51 65 85);
}
.dark .home-query-proverb-line {
  color: rgb(203 213 225);
}

.home-query-result-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgb(100 116 139);
}

.home-query-proverb-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.home-query-proverb-card {
  position: relative;
  padding: 1rem 1rem 1rem 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255, 255, 255, 0.85);
}
.dark .home-query-proverb-card {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.4);
}
.home-query-proverb-icon {
  position: absolute;
  left: 0.85rem;
  top: 1rem;
  color: rgb(var(--site-primary-rgb, 22 163 74) / 0.55);
  font-size: 1rem;
}
.home-query-proverb-text {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 0.35rem;
  color: rgb(30 41 59);
}
.dark .home-query-proverb-text {
  color: rgb(226 232 240);
}
.home-query-proverb-cat {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(var(--site-primary-rgb, 22 163 74));
  margin: 0;
}
.home-query-proverb-origin {
  font-size: 0.72rem;
  color: rgb(100 116 139);
  margin: 0.25rem 0 0;
}
.dark .home-query-proverb-origin {
  color: rgb(148 163 184);
}

/* —— AI+ 节气实验室：与全站主色协调的「画框」感 —— */
#page-home .home-ai-tools-section {
  position: relative;
  padding: 1.25rem 1rem 1rem;
  border-radius: 1.35rem;
  background: linear-gradient(
    160deg,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.07) 0%,
    rgba(255, 255, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.35) 100%
  );
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
.dark #page-home .home-ai-tools-section {
  background: linear-gradient(
    160deg,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.14) 0%,
    rgba(15, 23, 42, 0.55) 45%,
    rgba(15, 23, 42, 0.35) 100%
  );
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
}
#page-home .home-ai-tools-intro .home-query-title {
  margin-bottom: 0.35rem;
}

/* AI 区与压轴「四季叙事之旅」之间的过渡带（对齐修复文档：动线说明 + 视觉分隔） */
.home-journey-bridge-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.35) 20%,
    rgb(16 185 129 / 0.25) 50%,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.35) 80%,
    transparent
  );
  border-radius: 9999px;
}
.dark .home-journey-bridge-line {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.45) 25%,
    rgb(52 211 153 / 0.22) 50%,
    rgb(var(--site-primary-rgb, 22 163 74) / 0.45) 75%,
    transparent
  );
}