/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：home / 页面基座与框架
 * pages/home/base.css
 * 区块：页面基座（body.ui-home / .home）、中央扩散辉光、品牌区、页脚备案
 * 视觉：空气投影（纯光投影）——无实体厚度、无实体阴影、无浮雕与立体感；
 *       半透明自发光线框 + 边缘扩散辉光 + 背景穿透
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌；
 *       页面背景层为公共背景（components/holo.css），本页不再私有网格；
 *       点火层内的全息网格见 pages/home/ignite.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;
}

/* ========== 中央扩散辉光：从中心向外渐隐，无实体边界（背景可穿透） ========== */
.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-icon-text);
  font: var(--text-h1);
  letter-spacing: var(--ls-h1);
  color: var(--green-900);
}

/* 网站 logo：与品牌名同高排列，尺寸随字阶在响应式下同步收束。
   外层为手势 / 变换载体（span），内层 img 只负责显示——把指针事件从 img 摘除，
   规避移动端（尤其微信内置浏览器）长按 <img> 弹出的系统「保存图片」菜单 */
.home-brand-logo {
  flex: none;
  display: inline-flex;
  width: 36px;
  height: 36px;
}

.home-brand-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.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);
}