hololake-system-architecture/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css

/* 第一语言星球首页 v3 —— 立体悬浮星球：大爆炸中诞生，周围是等待开拓的黯淡星群 */
/* 轻量纯 CSS（球体三要素：高光偏移/暗面内阴影/纹理滚动），无依赖 */
/* 复用 design-tokens 三层令牌（5主题=星球的性格颜色） */

.fph-root {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 108%, var(--primitive-nebula-a), transparent 60%),
    linear-gradient(180deg, var(--primitive-bg-d) 0%, var(--primitive-bg-c) 46%, var(--primitive-bg-b) 72%, var(--primitive-bg-a) 100%);
  color: var(--content-primary);
  font-family: inherit;
}
.fph-starfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--primitive-scene-opacity, 0.8); }

/* 湖面：语言组成的湖 */
.fph-lake {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; overflow: hidden;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--primitive-cool-glow) 9%, transparent) 24%, color-mix(in srgb, var(--primitive-bg-d) 78%, transparent)),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--primitive-glass-top) 4%, transparent) 0 1px, transparent 1px 7px);
  border-top: 1px solid color-mix(in srgb, var(--primitive-glass-edge) 55%, transparent);
}
.fph-lake-lang {
  position: absolute; left: 0; right: 0; top: 34%;
  white-space: nowrap; text-align: center;
  font-size: 11px; letter-spacing: 1.1em; text-indent: 1.1em;
  color: color-mix(in srgb, var(--primitive-cool-glow) 34%, transparent);
  filter: blur(0.6px); opacity: .5;
  animation: fph-lake-drift 26s linear infinite;
}
@keyframes fph-lake-drift { from { transform: translateX(3%); } to { transform: translateX(-3%); } }

/* ── 黯淡星球群：无光、仅 rim、等待被开拓 ── */
.fph-dim {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%,
    color-mix(in srgb, var(--primitive-text-faint) 30%, transparent) 0 18%,
    color-mix(in srgb, var(--primitive-bg-b) 92%, transparent) 58%,
    color-mix(in srgb, var(--primitive-bg-c) 96%, transparent) 100%);
  box-shadow:
    inset -3px -4px 8px color-mix(in srgb, var(--primitive-bg-d) 90%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primitive-glass-edge) 52%, transparent),
    0 0 14px color-mix(in srgb, var(--primitive-nebula-a) 40%, transparent);
  opacity: .95;
}
.fph-dim.spark::after {
  content: ''; position: absolute; left: 30%; top: 26%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--primitive-warm-glow);
  box-shadow: 0 0 8px var(--primitive-warm-glow);
  animation: fph-spark 4.5s ease-in-out infinite;
  animation-delay: var(--tw-dl, 0s);
}
@keyframes fph-spark { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ── 悬浮容器：上下浮动，像真的悬在宇宙里 ── */
.fph-planet-wrap {
  position: absolute; left: 50%; top: 42%;
  width: min(300px, 46vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: fph-float 9s ease-in-out infinite;
  transition: top 1.1s cubic-bezier(.2,.8,.2,1), width 1.1s cubic-bezier(.2,.8,.2,1);
}
@keyframes fph-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -14px; }
}
.stage-world .fph-planet-wrap { top: 20%; width: min(130px, 22vw); }

/* ── 大爆炸：诞生瞬间 ── */
.fph-bang-burst {
  position: absolute; inset: -34%; border-radius: 50%;
  background: conic-gradient(from 10deg,
    transparent 0 4%, color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent) 6%, transparent 9%,
    transparent 0 16%, color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent) 18%, transparent 21%,
    transparent 0 30%, color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent) 32%, transparent 35%,
    transparent 0 46%, color-mix(in srgb, var(--primitive-cool-glow) 15%, transparent) 48%, transparent 51%,
    transparent 0 62%, color-mix(in srgb, var(--primitive-warm-glow) 20%, transparent) 64%, transparent 67%,
    transparent 0 78%, color-mix(in srgb, var(--primitive-cool-glow) 16%, transparent) 80%, transparent 83%,
    transparent 0 92%, color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent) 94%, transparent 97%,
    transparent 100%);
  filter: blur(5px);
  opacity: .55;
  animation: fph-bang-pulse 6s ease-in-out infinite;
}
.fph-bang-ring {
  position: absolute; inset: -18%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent);
  opacity: .5;
  animation: fph-ring 6s ease-out infinite;
}
@keyframes fph-ring {
  0% { transform: scale(.86); opacity: .55; }
  70% { transform: scale(1.12); opacity: .12; }
  100% { transform: scale(1.12); opacity: 0; }
}
@keyframes fph-bang-pulse { 0%,100% { opacity: .4; } 50% { opacity: .65; } }
.fph-shard {
  position: absolute; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent), transparent);
  opacity: .5;
  animation: fph-spark 5s ease-in-out infinite;
}
.fph-shard.warm { background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent), transparent); }
.stage-world .fph-bang-burst, .stage-world .fph-bang-ring, .stage-world .fph-shard { opacity: .18; }

/* ── 立体球体：高光偏移 + 表面纹理 + 明暗交界 + 大气 rim ── */
.fph-planet {
  position: absolute; inset: 0; border-radius: 50%;
  /* 球体基底：光源在左上 */
  background: radial-gradient(circle at 33% 30%,
    color-mix(in srgb, var(--primitive-star-bright) 70%, var(--primitive-cool-glow)) 0 4%,
    color-mix(in srgb, var(--primitive-cool-glow) 70%, var(--primitive-bg-b)) 18%,
    color-mix(in srgb, var(--primitive-nebula-a) 88%, var(--primitive-bg-b)) 42%,
    color-mix(in srgb, var(--primitive-bg-b) 96%, transparent) 68%,
    color-mix(in srgb, var(--primitive-bg-c) 98%, transparent) 100%);
  box-shadow:
    inset -30px -26px 56px color-mix(in srgb, var(--primitive-bg-d) 92%, transparent),
    inset -12px -10px 26px color-mix(in srgb, var(--primitive-bg-d) 60%, transparent),
    inset 8px 8px 22px color-mix(in srgb, var(--primitive-star-bright) 10%, transparent),
    0 0 34px color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
    0 24px 60px color-mix(in srgb, var(--primitive-shadow) 60%, transparent);
  animation: fph-breathe 8s ease-in-out infinite;
}
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* 表面：云带+脉络（SVG经脉），26s 环移=可见自转 */
.fph-planet .surf {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background:
    repeating-linear-gradient(96deg,
      transparent 0 18px,
      color-mix(in srgb, var(--primitive-glass-top) 16%, transparent) 18px 26px,
      transparent 26px 44px,
      color-mix(in srgb, var(--primitive-nebula-a) 42%, transparent) 44px 58px,
      transparent 58px 84px),
    repeating-radial-gradient(circle at 42% 58%,
      transparent 0 14px,
      color-mix(in srgb, var(--primitive-cool-glow) 20%, transparent) 14px 20px,
      transparent 20px 34px);
  opacity: .85;
  -webkit-mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
  mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
  animation: fph-surf-pan 26s linear infinite;
}
@keyframes fph-surf-pan { from { background-position: 0 0, 0 0; } to { background-position: 168px 0, -112px 0; } }

/* 脉络：语言世界的经脉，随球自转流动；首尾同形可无缝环移 */
.fph-planet .surf .veins {
  position: absolute; top: 0; left: 0; height: 100%; width: 200%;
  animation: fph-veins-flow 26s linear infinite;
}
@keyframes fph-veins-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fph-planet .veins path {
  fill: none;
  stroke: color-mix(in srgb, var(--primitive-cool-glow) 62%, transparent);
  stroke-width: 0.7;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent));
  opacity: .75;
}
.fph-planet .veins path.warm {
  stroke: color-mix(in srgb, var(--primitive-warm-glow) 66%, transparent);
  filter: drop-shadow(0 0 1.8px color-mix(in srgb, var(--primitive-warm-glow) 75%, transparent));
  opacity: .8;
}
.fph-planet .veins path.faint { stroke-width: 0.45; opacity: .4; }

/* 球面光点：文明/星群微光，只落在受光面 */
.fph-planet .speck {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, var(--primitive-star-bright) 80%, #fff);
  box-shadow: 0 0 5px color-mix(in srgb, var(--primitive-warm-glow) 55%, transparent);
  animation: fph-twinkle var(--tw-d, 3s) ease-in-out infinite;
  animation-delay: var(--tw-dl, 0s);
}
.fph-planet .speck.warm { background: var(--primitive-star-bright); }
@keyframes fph-twinkle { 0%,100% { opacity: .3; } 50% { opacity: .95; } }

/* 明暗交界：从受光点向外的球面暗化 */
.fph-planet .shade {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 33% 30%,
    transparent 34%,
    color-mix(in srgb, var(--primitive-bg-d) 34%, transparent) 58%,
    color-mix(in srgb, var(--primitive-bg-d) 78%, transparent) 80%,
    color-mix(in srgb, var(--primitive-bg-d) 96%, transparent) 96%);
}

/* 大气 rim：受光缘一线亮 + 外溢大气 */
.fph-planet .atmo {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow:
    inset 1.5px 1.5px 3px color-mix(in srgb, var(--primitive-star-bright) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent);
}

/* 湖中倒影 */
.fph-planet-reflection {
  position: absolute; left: 50%; top: calc(100% + 26px); width: 70%; height: 42%;
  transform: translateX(-50%) scaleY(-1);
  background: radial-gradient(50% 60% at 50% 0%,
    color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
    color-mix(in srgb, var(--primitive-nebula-a) 14%, transparent) 44%, transparent 72%);
  filter: blur(7px); opacity: .5;
}

/* 首屏：编号门 */
.fph-gate {
  position: absolute; inset: 0; display: grid; align-content: end; justify-items: center;
  padding-bottom: 9vh; gap: 10px; text-align: center;
}
.fph-brand { position: absolute; top: 4.5vh; left: 0; right: 0; display: grid; gap: 6px; }
.fph-brand b { font-size: 20px; letter-spacing: .34em; color: var(--content-primary); }
.fph-brand span { font-size: 13px; letter-spacing: .3em; color: var(--content-secondary); }
.fph-brand em { font-style: normal; font-size: 11px; letter-spacing: .42em; color: var(--content-muted); }
.fph-claim { position: absolute; top: 60%; left: 0; right: 0; margin: 0; display: grid; gap: 3px; }
.fph-claim i { font-style: normal; font-size: 10.5px; letter-spacing: .3em; color: var(--content-faint); }
.fph-claim strong { font-size: 12px; letter-spacing: .22em; color: var(--content-muted); }
.fph-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: .12em; color: var(--content-primary); }
.fph-gatebox {
  display: flex; align-items: center; gap: 8px;
  width: min(560px, calc(100vw - 64px));
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--primitive-glass-edge); border-radius: 14px;
  background: color-mix(in srgb, var(--primitive-glass) 78%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px color-mix(in srgb, var(--primitive-shadow) 55%, transparent);
}
.fph-gatebox input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--content-primary); font-size: 15px; letter-spacing: .08em; font-family: inherit;
}
.fph-gatebox input::placeholder { color: var(--content-faint); letter-spacing: .04em; }
.fph-inf {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--primitive-glass-edge); background: var(--primitive-glass);
  color: var(--content-muted); font-size: 18px; line-height: 1; transition: all .25s ease;
}
.fph-inf.lit {
  color: var(--primitive-star-bright);
  border-color: color-mix(in srgb, var(--primitive-warm-glow) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 42%, transparent);
  background: color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent);
}
.fph-enter {
  height: 40px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--button-primary-bg); color: var(--button-primary-text);
  font-weight: 700; letter-spacing: .1em; font-family: inherit;
  box-shadow: var(--button-primary-shadow); transition: opacity .2s ease;
}
.fph-enter:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.fph-gate-msg { margin: 0; min-height: 18px; font-size: 12px; letter-spacing: .1em; color: var(--content-muted); }
.fph-foot { position: absolute; bottom: 2.6vh; left: 0; right: 0; font-size: 10.5px; letter-spacing: .3em; color: var(--content-faint); }

/* 门后：世界展开 */
.fph-world {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 26px; padding: 12vh 24px 8vh;
  animation: fph-world-in .9s ease both;
}
@keyframes fph-world-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fph-world-head { text-align: center; display: grid; gap: 8px; margin-top: 7vh; }
.fph-world-kicker { font-size: 11px; letter-spacing: .34em; color: var(--accent-light); }
.fph-world-head h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: .14em; color: var(--content-primary); }
.fph-world-head p { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--content-muted); }
.fph-world-head b { color: var(--content-secondary); letter-spacing: .12em; }
.fph-pools { display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); gap: 16px; justify-content: center; }
.fph-pool {
  position: relative; display: grid; gap: 6px; justify-items: start; text-align: left;
  padding: 18px 18px 16px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--primitive-glass-edge);
  background: color-mix(in srgb, var(--primitive-glass) 72%, transparent);
  backdrop-filter: blur(14px);
  color: inherit; font-family: inherit;
  transition: transform .25s ease, border-color .25s ease;
}
.fph-pool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primitive-cool-glow) 46%, var(--primitive-glass-edge)); }
.fph-pool .pool-light {
  position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primitive-cool-glow); box-shadow: 0 0 12px var(--primitive-cool-glow);
}
.fph-pool.tone-warm .pool-light { background: var(--primitive-warm-glow); box-shadow: 0 0 12px var(--primitive-warm-glow); }
.fph-pool b { font-size: 15px; letter-spacing: .08em; color: var(--content-primary); }
.fph-pool small { font-size: 11.5px; letter-spacing: .06em; color: var(--content-muted); }
.fph-pool.primary { border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, var(--primitive-glass-edge)); }
.fph-world-note { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--content-muted); }
.fph-back {
  position: absolute; left: 22px; top: 22px; border: 0; background: transparent; cursor: pointer;
  color: var(--content-muted); font-size: 12.5px; letter-spacing: .08em; font-family: inherit;
}
@media (max-width: 860px) {
  .fph-pools { grid-template-columns: repeat(2, minmax(150px, 1fr)); width: 100%; }
}