/* ============================================================
 * 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);
  transition: border-color var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out);
}

.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);
  transition: background var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out);
  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 变实并轻微上浮
   对位逻辑——沿半径向外精确对位：偏移量 --lb-x / --lb-y 由 home/index.js 按节点角度注入（px），
   斜位节点沿斜向贴出（不再是固定 22px 的水平 / 垂直偏移）；文字不旋转，故对齐侧仍分四向，
   宽度随标题自适应，取的是靠圆心那一侧的对齐 */
.home-label {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 132px;
  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);
}

/* 四向对齐：先把盒子按半径偏移（--lb-x / --lb-y），再让「靠圆心的那一条边」的中边中点
   正好落在圆点沿半径向外 LABEL_GAP 处——左 / 右取竖边中线，上 / 下取横边中线；
   逐个 translate 组合，避免百分比与 px 混算（translate 之间顺序不影响结果） */
.dir-r .home-label { transform: translate(var(--lb-x), var(--lb-y)) translateY(-50%); text-align: left; }
.dir-l .home-label { transform: translate(var(--lb-x), var(--lb-y)) translateX(-100%) translateY(-50%); text-align: right; }
.dir-t .home-label { transform: translate(var(--lb-x), var(--lb-y)) translate(-50%, -100%); text-align: center; }
.dir-b .home-label { transform: translate(var(--lb-x), var(--lb-y)) translate(-50%, 0); text-align: center; }