/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：home / 年轮光轨
 * pages/home/orbit.css
 * 区块：年轮光轨容器与连线、中央光球、环形导航入口（节点位置由 home/index.js 按角度注入）
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

/* ========== 年轮光轨容器 ==========
   正方形约束用 aspect-ratio 表达，而不是重复声明 height: var(--orbit-size)：
   窄屏下 --orbit-size 含百分比（见 pages/home/responsive.css），百分比在 width 方向
   以容器宽度为基准可解析，在 height 方向却因 flex 容器高度不确定而解析为 0
   （calc(0 - 100px) 为负 → min() 取负 → 高度被钳到 0），轨道随之塌成一条横线、
   全部节点挤在同一高度。高度改由宽度等比推出，两个方向都基于已确定的宽度，不再受此影响 */
.home-orbit {
  position: relative;
  flex: none;
  width: var(--orbit-size);
  aspect-ratio: 1;
}

/* 光轨（SVG：1px 非缩放描边，保持细线质感） */
.home-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.home-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--line) 70%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 内圈虚线：缓慢自转，作为年轮的“生长”暗示 */
.home-ring-dash {
  fill: none;
  stroke: color-mix(in srgb, var(--green-700) 50%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 10;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: homeRingSpin 26s linear infinite;
}

@keyframes homeRingSpin {
  to { transform: rotate(360deg); }
}

.home-spoke {
  fill: none;
  stroke: color-mix(in srgb, var(--line) 50%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 流动光：hover 时沿光轨由光球流向外侧节点（纯装饰反馈，不承担跳转语义） */
.home-flow {
  fill: none;
  stroke: var(--green-900);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-out);
}

.home-flow.is-flowing {
  opacity: 0.9;
  stroke-dasharray: calc(var(--flow-len) * 0.3) var(--flow-len);
  animation: homeFlowTravel 1.2s linear infinite;
}

@keyframes homeFlowTravel {
  from { stroke-dashoffset: calc(var(--flow-len) * 0.3); }
  to   { stroke-dashoffset: calc(var(--flow-len) * -1); }
}

/* ========== 中央光球（语言同 loading 过渡页，尺寸随轨道略放大） ========== */
.home-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
}

.home-orb-halo {
  position: absolute;
  inset: -24px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--green-500) 20%, transparent) 0%,
      transparent 68%);
  filter: blur(6px);
  animation: homeOrbHalo 3.2s var(--ease-in-out) infinite;
}

@keyframes homeOrbHalo {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

.home-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  border: 1px solid color-mix(in srgb, var(--green-900) 38%, transparent);
}

.home-orb-scan {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  background: conic-gradient(from 0deg,
      transparent 0deg,
      color-mix(in srgb, var(--green-900) 55%, transparent) 48deg,
      transparent 110deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: homeOrbScan 2.4s linear infinite;
}

@keyframes homeOrbScan {
  to { transform: rotate(360deg); }
}

.home-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-circle);
  background: var(--green-900);
  box-shadow: 0 0 14px color-mix(in srgb, var(--green-500) 70%, transparent);
  animation: homeOrbCore 2.4s var(--ease-in-out) infinite;
}

@keyframes homeOrbCore {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* ========== 环形导航入口（节点位置由 home/index.js 按角度注入） ========== */
.home-nodes {
  position: absolute;
  inset: 0;
}

/* 入口整体为链接（圆点 + 悬浮标签），零尺寸定位盒，命中区域由子元素撑开 */
.home-node {
  position: absolute;
  width: 0;
  height: 0;
  text-decoration: none;
  cursor: pointer;
}

.home-node:focus-visible {
  outline: none;
}

/* 节点圆点：半透明自发光线框，无实体填充厚度 */
.home-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-soft);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  font: var(--text-mono);
  color: var(--text-secondary);
  transition: border-color var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out),
              background var(--duration-hover) var(--ease-out);
}

.home-node:hover .home-dot,
.home-node:focus-visible .home-dot {
  border-color: var(--green-900);
  color: var(--green-900);
  background: color-mix(in srgb, var(--green-500) 10%, transparent);
}

/* 悬浮标签：默认半透明，hover 变实并轻微上浮；朝向由 .dir-* 决定，避免环形排布时相互叠压 */
.home-label {
  position: absolute;
  width: 150px;
  opacity: 0.5;
  transition: opacity var(--duration-hover) var(--ease-out);
}

.home-node:hover .home-label,
.home-node:focus-visible .home-label {
  opacity: 1;
}

.home-label-in {
  transition: transform var(--duration-hover) var(--ease-out);
}

.home-node:hover .home-label-in {
  transform: translateY(-3px);
}

.home-label-title {
  font: var(--text-ui);
  color: var(--green-900);
}

.home-label-desc {
  font: var(--text-caption);
  color: var(--text-secondary);
}

.dir-r .home-label { left: 22px; top: 0; transform: translateY(-50%); text-align: left; }
.dir-l .home-label { right: 22px; top: 0; transform: translateY(-50%); text-align: right; }
.dir-t .home-label { left: 0; bottom: 22px; width: 168px; transform: translateX(-50%); text-align: center; }
.dir-b .home-label { left: 0; top: 22px; width: 168px; transform: translateX(-50%); text-align: center; }