/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：home / 页面基座与框架
 * pages/home/base.css
 * 区块：页面基座（body.ui-home / .home）、全息网格与中央扩散辉光、品牌区、页脚备案
 * 视觉：空气投影（纯光投影）——无实体厚度、无实体阴影、无浮雕与立体感；
 *       半透明自发光线框 + 边缘扩散辉光 + 背景穿透
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 *       首页双视图：pages/home/ 只承载 GUI 主页视图，与 CUI 视图（pages/index/）互不污染
 *       引入顺序：base → orbit → ignite → ignite-burst → responsive
 * ============================================================ */

/* ========== 页面基座 ==========
   首页双视图：本目录只承载 GUI 主页视图的样式，根级样式按视图作用域
   （视图类 ui-home / ui-cui 由入口 main.js 按账号模式添加），
   避免与 CUI 视图（pages/index/）在同文档中互相污染 */
body.ui-home {
  min-height: 100%;
  background: var(--bg-secondary);
  overflow-x: hidden;
}

.home {
  /* 页面私有几何：轨道容器边长与轨道半径（半径同时被 home/index.js 引用为 RADIUS） */
  --orbit-size: min(58vmin, 440px);
  --orbit-radius: 36;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-card-lg);
  padding: var(--space-section) var(--space-page-desktop);
  overflow: hidden;
}

/* ========== 全息网格（与开屏／过渡页同一视觉语言；页面私有，不跨页引用 pages/loading.css） ========== */
.home-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line, var(--line)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, var(--line)) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: var(--grid-opacity, 0.15);
  pointer-events: none;
}

/* 中央扩散辉光：从中心向外渐隐，无实体边界（背景可穿透） */
.home::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84vmin, 620px);
  height: min(84vmin, 620px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--green-500) 14%, transparent) 0%,
      transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* ========== 品牌区 ========== */
.home-hero {
  position: relative;
  text-align: center;
}

.home-brand {
  font: var(--text-h1);
  letter-spacing: var(--ls-h1);
  color: var(--green-900);
}

.home-slogan {
  margin-top: var(--space-icon-text);
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
}

/* ========== 页脚（备案信息） ========== */
.home-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-icon-text);
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-card-lg);
}

/* 备案信息行：链接色沿用 base.css 的 a（--green-900，明暗主题各自取值），hover 时额外泛一层辉光；
   分隔符取更弱的次级文字色，不抢备案号 */
.home-foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-icon-text);
}

.home-foot-sep {
  color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}

/* 备案链接：颜色由 base.css 的 a 决定（--green-900，明暗主题各自取值，无需本页覆写），
   hover 走 base 的下划线 + 此处叠加的一层辉光，过渡只作用于这条辉光 */
.home-foot-meta a {
  transition: text-shadow var(--duration-hover) var(--ease-out);
}

.home-foot-meta a:hover {
  text-shadow: 0 0 12px color-mix(in srgb, var(--green-500) 45%, transparent);
}