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

/* 第一语言星球首页 v2 —— 光的种子：黑暗中涌出，蔓延，像太阳照亮 */
/* 复用 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%); } }

/* 暗星球：大爆炸废墟里等待被点亮的，各带一粒火种 */
.fph-dark-planet {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--primitive-text-faint) 30%, transparent), color-mix(in srgb, var(--primitive-bg-d) 92%, transparent) 62%);
  box-shadow: inset -6px -8px 18px color-mix(in srgb, var(--primitive-bg-d) 88%, transparent), 0 0 22px color-mix(in srgb, var(--primitive-nebula-b) 60%, transparent);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s;
}
.fph-dark-planet::after {
  content: ''; position: absolute; left: 26%; top: 22%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--primitive-warm-glow);
  box-shadow: 0 0 8px var(--primitive-warm-glow), 0 0 16px color-mix(in srgb, var(--primitive-warm-glow) 50%, transparent);
  animation: fph-spark 4.5s ease-in-out infinite;
}
.fph-dark-planet.d1 { width: 46px; height: 46px; left: 16%; top: 30%; }
.fph-dark-planet.d2 { width: 30px; height: 30px; right: 20%; top: 24%; }
.fph-dark-planet.d2::after { animation-delay: -1.6s; }
.fph-dark-planet.d3 { width: 20px; height: 20px; right: 12%; top: 47%; }
.fph-dark-planet.d3::after { animation-delay: -3.1s; }
@keyframes fph-spark { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.stage-world .fph-dark-planet { opacity: .5; transform: translateY(-14px); }

/* ── 第一语言星球 v2：光的种子从中心涌出 ── */
.fph-planet-wrap {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  transition: top 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.stage-world .fph-planet-wrap { top: 21%; transform: translate(-50%, -50%) scale(.42); }

.fph-planet {
  position: relative; width: min(300px, 46vw); aspect-ratio: 1; border-radius: 50%;
  /* 球体：中心亮核向外涌光，边缘沉入深蓝 */
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--primitive-star-bright) 96%, transparent) 0 6%,
      color-mix(in srgb, var(--primitive-warm-glow) 72%, transparent) 14%,
      color-mix(in srgb, var(--primitive-cool-glow) 52%, transparent) 30%,
      color-mix(in srgb, var(--primitive-nebula-a) 66%, transparent) 52%,
      color-mix(in srgb, var(--primitive-bg-c) 92%, transparent) 78%,
      color-mix(in srgb, var(--primitive-bg-d) 96%, transparent) 100%);
  box-shadow:
    0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent),
    0 0 110px color-mix(in srgb, var(--primitive-cool-glow) 40%, transparent),
    0 0 220px color-mix(in srgb, var(--primitive-nebula-a) 80%, transparent),
    inset -18px -26px 60px color-mix(in srgb, var(--primitive-bg-d) 72%, transparent);
  animation: fph-breathe 7s ease-in-out infinite, fph-glowpulse 7s ease-in-out infinite;
}
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes fph-glowpulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

/* 种子：近乎白的亮核 */
.fph-planet .seed {
  position: absolute; left: 50%; top: 50%; width: 16%; height: 16%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf4 0 18%, var(--primitive-star-bright) 42%, color-mix(in srgb, var(--primitive-warm-glow) 66%, transparent) 68%, transparent 78%);
  filter: blur(0.5px);
  box-shadow: 0 0 26px var(--primitive-warm-glow), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 55%, transparent);
}

/* 涌光：从种子向外扩散的三层光晕 */
.fph-planet .swell {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid transparent;
}
.fph-planet .s1 { width: 34%; height: 34%; border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent); opacity: .8; }
.fph-planet .s2 { width: 56%; height: 56%; border-color: color-mix(in srgb, var(--primitive-cool-glow) 38%, transparent); opacity: .6; }
.fph-planet .s3 { width: 80%; height: 80%; border-color: color-mix(in srgb, var(--primitive-cool-glow) 24%, transparent); opacity: .4; }

/* 旋臂：星系感的发光弧（光蔓延的轨迹） */
.fph-planet .arm {
  position: absolute; border-radius: 50%;
  border: 2.5px solid transparent;
  filter: blur(1.2px);
}
.fph-planet .a1 {
  inset: 12%;
  border-top-color: color-mix(in srgb, var(--primitive-warm-glow) 82%, transparent);
  border-right-color: color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent);
  animation: fph-spin 30s linear infinite;
}
.fph-planet .a2 {
  inset: 26%;
  border-bottom-color: color-mix(in srgb, var(--primitive-cool-glow) 74%, transparent);
  border-left-color: color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--primitive-cool-glow) 30%, transparent);
  animation: fph-spin 19s linear infinite reverse;
}
@keyframes fph-spin { to { transform: rotate(360deg); } }

/* 球面星点：种子蔓延出的星群，冷暖交织呼吸 */
.fph-planet .speck {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, var(--primitive-cool-glow) 88%, #fff);
  box-shadow: 0 0 6px color-mix(in srgb, var(--primitive-cool-glow) 60%, 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);
  box-shadow: 0 0 7px color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent);
}
@keyframes fph-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* 废墟：大爆炸留下的碎光，漂在星球外圈 */
.fph-planet .debris {
  position: absolute; border-radius: 50%;
  background: color-mix(in srgb, var(--primitive-text-faint) 60%, transparent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--primitive-nebula-a) 80%, transparent);
  opacity: .5;
  animation: fph-twinkle var(--tw-d, 4s) ease-in-out infinite;
  animation-delay: var(--tw-dl, 0s);
}

/* 外晕：星球的光漫进宇宙 */
.fph-planet .halo {
  position: absolute; inset: -16%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primitive-cool-glow) 36%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent);
  opacity: .55;
  animation: fph-halo 7s ease-in-out infinite;
}
@keyframes fph-halo { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.05); opacity: .7; } }

.fph-planet-reflection {
  position: absolute; left: 50%; top: calc(100% + 8px); width: 68%; height: 50%;
  transform: translateX(-50%) scaleY(-1);
  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--primitive-warm-glow) 26%, transparent), color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent) 42%, transparent 72%);
  filter: blur(6px); opacity: .55;
}

/* 首屏：编号门 */
.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: 58%; 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, transform .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: 9vh; }
.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, background .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%; }
}