/* ============================================================
   戴森球计划 · 体验页面 公共样式
   设计稿基准：1920 x 1080
   ============================================================ */

/* ---- 自托管字体（OFL，离线可用，仅拉丁子集供英文/数字使用） ----
   Orbitron：科技感几何显示体（Logo 副标题、英文标题、光谱型）
   JetBrains Mono：等宽数据体（轨道/周期/储量等数字，配合 tabular-nums）
   均为可变字体，单文件覆盖多字重；中文走系统字体回退链。 */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/orbitron-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
}

/* 注册角标颜色为可动画属性，使悬停提亮平滑过渡（不支持的浏览器自动退化为瞬变） */
@property --bc {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(120, 210, 255, 0.55);
}

:root {
  --bg-deep:    #03060f;   /* 深空底色 */
  --bg-panel:   rgba(8, 18, 36, 0.55);
  --line:       rgba(120, 200, 255, 0.35);
  --accent:     #38d6ff;   /* 主色：青蓝 */
  --accent-2:   #ffb648;   /* 辅色：恒星金 */
  --text:       #d8ecff;
  --text-dim:   #7f9bbd;
  --glow:       0 0 18px rgba(56, 214, 255, 0.55);
  --bracket:    rgba(120, 210, 255, 0.55);   /* HUD 角标青色 */

  /* 字体族：拉丁/数字优先专用字体，中文回退到系统黑体 */
  --font-base:    "Microsoft YaHei", "PingFang SC", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Orbitron", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-mono:    "JetBrains Mono", "Microsoft YaHei", ui-monospace, "Consolas", monospace;

  /* 圆角刻度（统一体系：小=图标/控件内沿，中=面板/按钮，圆=胶囊/圆形） */
  --r-sm:   6px;
  --r-md:   10px;
  --r-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

/* ---- 星空背景（纯 CSS，多层径向渐变模拟星点 + 星云） ---- */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(40, 110, 170, 0.22), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(30, 120, 150, 0.16), transparent 60%),
    radial-gradient(640px 460px at 16% 16%, rgba(255, 182, 72, 0.05), transparent 60%),
    radial-gradient(1600px 900px at 50% 50%, rgba(10, 24, 48, 0.6), transparent 70%),
    var(--bg-deep);
}
.space-bg::before,
.space-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
/* 远景细密星点 */
.space-bg::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, #cfe8ff, transparent),
    radial-gradient(1px 1px at 220px 160px, #fff, transparent),
    radial-gradient(1px 1px at 310px 50px, #bcd, transparent),
    radial-gradient(2px 2px at 90px 200px, #fff, transparent);
  background-size: 350px 240px;
  opacity: 0.3;   /* 固定远景星点（不随场景缩放），保持微弱即可 */
  animation: twinkle 6s ease-in-out infinite alternate;
}
/* 近景大星点 */
.space-bg::after {
  background-image:
    radial-gradient(2px 2px at 60px 120px, #9fd, transparent),
    radial-gradient(1.5px 1.5px at 200px 40px, #fff, transparent),
    radial-gradient(2px 2px at 300px 220px, #fcd, transparent);
  background-size: 420px 320px;
  opacity: 0.25;
  animation: twinkle 9s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.7; } }

/* ---- 颗粒/噪点叠层：固定贴视口、不拦截事件，柔化大面积径向渐变的色带（banding），增加质感 ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;            /* 位于 stage(1) 之上、极淡，仅做表面质感 */
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---- 偶发流星层（由 effects.js 动态注入光痕，位于背景之上、UI 之下） ---- */
.sky-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.meteor {
  position: absolute;
  width: var(--len, 200px);
  height: 2px;
  border-radius: var(--r-pill);
  /* 头部亮、拖尾渐隐 */
  background: linear-gradient(90deg, rgba(180, 230, 255, 0) 0%, rgba(200, 238, 255, 0.95) 100%);
  filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.85));
  opacity: 0;
  animation: meteor-fly linear forwards;
}
@keyframes meteor-fly {
  0%   { opacity: 0;    transform: rotate(28deg) translateX(0); }
  12%  { opacity: 0.95; }
  100% { opacity: 0;    transform: rotate(28deg) translateX(440px); }
}

/* ---- UI 入场编排：载入时元素自下浮入（含自身 transform 的元素改用纯透明度版） ---- */
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

.logo     { animation: ui-rise 0.7s 0.05s ease both; }
.back-btn { animation: ui-rise 0.6s 0.55s ease both; }

/* ---- 舞台：固定 1920x1080，由 stage.js 适配视口（不含滚轮缩放） ---- */
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  z-index: 1;
}

/* ---- 层级容器：三个层级（星图/恒星系/行星）共存于同一舞台 ----
   各 .tier 铺满 .stage；同一时刻通常仅一个可见，交接时两个同时可见做
   交叉淡变。透明度作用于整层，使其中的场景与 UI 面板一起平滑淡入/淡出。 */
.tier {
  position: absolute;
  inset: 0;
  transform-origin: top left;
}
.tier[hidden] { display: none; }

/* 交接进行中：冻结公转/轨道运动，使「行星节点 ↔ 星球模型」在交接的
   720ms 内保持像素对齐，不因持续公转而漂移（自转等纯装饰动画不受影响）。 */
.stage.transitioning .orbit-arm,
.stage.transitioning .planet-node { animation-play-state: paused; }
/* 交接期间取消星系节点的悬停放大并去除其缓动，使其实际尺寸与交接数学
   （按布局尺寸计算）严格一致，避免交接瞬间的尺寸跳变。 */
.stage.transitioning .galaxy-node { transition: none; transform: none; }

/* ---- 场景层：星空 + 星球/星系/轨道，仅此层随滚轮缩放与拖拽 ----
   作为 .tier 的第一个子元素，不设 z-index，使其后的 UI 元素自然覆盖其上。 */
.scene {
  position: absolute;
  inset: 0;                 /* 与设计稿同为 1920x1080，子元素坐标保持不变 */
  transform-origin: 0 0;
  will-change: transform;
}
/* ---- Logo / 大标题 ---- */
.logo {
  position: absolute;
  left: 50px;
  top: 46px;
  user-select: none;
}
.logo .logo-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--text);
  text-shadow: var(--glow);
}
.logo .logo-title .hl { color: var(--accent); }
.logo .logo-sub {
  margin-top: 8px;
  font-family: var(--font-display);   /* 拉丁副标题用 Orbitron，科技感 */
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--text-dim);
}

/* ---- 信息面板（左侧介绍框通用外观） ---- */
.panel {
  position: absolute;
  background: var(--bg-panel);
  border: 0;
  border-radius: 0;                /* 角标 HUD：直角，配合四角角标 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 真玻璃质感：顶部 1px 高光（折射边缘）+ 内辉光 + 染色外阴影（浮起） */
  box-shadow:
    inset 0 1px 0 rgba(220, 240, 255, 0.12),
    inset 0 0 30px rgba(56, 214, 255, 0.06),
    0 10px 34px rgba(2, 8, 20, 0.45);
  padding: 22px 26px;              /* 留白更足，整体更大气 */
}

/* ---- HUD 四角角标（L 形线）：面板与箭头共用，替代整圈描边 ----
   用 8 道渐变各画一段短线，分辨率无关、不影响阴影；
   --bk 线宽 / --bl 臂长 / --bc 颜色（可被悬停态覆盖）。 */
.panel::before,
.arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --bk: 1.5px;
  --bl: 18px;
  --bc: var(--bracket);
  background:
    linear-gradient(var(--bc) 0 0) 0 0       / var(--bl) var(--bk) no-repeat,
    linear-gradient(var(--bc) 0 0) 0 0       / var(--bk) var(--bl) no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 0    / var(--bl) var(--bk) no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 0    / var(--bk) var(--bl) no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100%    / var(--bl) var(--bk) no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100%    / var(--bk) var(--bl) no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 100% / var(--bl) var(--bk) no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 100% / var(--bk) var(--bl) no-repeat;
  transition: --bc 0.25s ease;
}
.panel .panel-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: var(--glow);
  letter-spacing: 2px;
}
.panel .panel-meta {
  margin-top: 6px;
  font-family: var(--font-mono);          /* 数据行：等宽 */
  font-variant-numeric: tabular-nums;     /* 等宽数字，避免数值跳动 */
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.panel .panel-body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
}
.panel .panel-placeholder {
  color: var(--text-dim);
  font-style: italic;
}

/* 面板淡入 */
.fade-in { animation: fadeIn 0.35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- 返回按钮（左下角通用） ---- */
.back-btn {
  position: absolute;
  left: 50px;
  bottom: 40px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-panel);
  text-decoration: none;
  transition: all 0.25s ease;
}
.back-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow);
  transform: scale(1.06);
}
.back-btn:focus-visible {
  outline: none;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow), 0 0 0 3px rgba(56, 214, 255, 0.35);
}
.back-btn:active { transform: scale(0.96); }

/* ============================================================
   无障碍：尊重「减少动态效果」系统偏好
   关闭/弱化所有无限循环动画（星点闪烁、星系/轨道公转、恒星脉动、
   行星浮动与自转、面板淡入），避免对前庭敏感用户造成不适。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}