shengsuantech-home/css/space.css

/* ============================================================
   晟算科技 · 太空主题层
   深空沉浸 + 玻璃面板 + 腐化标题特效
   在 style.css 之后加载,覆盖太空世界观样式
   ============================================================ */

/* === 太空配色覆盖 === */
:root {
  --bg-deep: #02030a;
  --bg-dark: #05060f;
  --bg-card: rgba(13, 17, 30, 0.62);
  --bg-card-hover: rgba(18, 24, 40, 0.7);
  --border-subtle: rgba(160, 180, 255, 0.09);
  --border-glow: rgba(77, 255, 166, 0.3);
  --text-primary: #eef1fa;
  --text-secondary: #96a0bc;
  --text-muted: #5b6480;
  --code-green: #4dffa6;
  --code-dim: #1fbf7a;
  --sun-warm: #fff3d6;
  --nebula-indigo: rgba(88, 70, 220, 0.1);
  --nebula-blue: rgba(40, 90, 220, 0.1);

  --blue: #4dffa6;
  --blue-glow: #8affc9;
  --cyan: #7dd8ff;
  --cyan-dark: #3a9bc9;
  --purple: #a78bff;
  --purple-glow: #c9b3ff;
  --green: #4dffa6;
  --red: #ff4455;
  --orange: #ffb020;

  --shadow-glow: 0 0 40px rgba(77, 255, 166, 0.12);
  --shadow-glow-strong: 0 0 80px rgba(77, 255, 166, 0.18);
}

html, body {
  background: var(--bg-deep);
}

/* === 太空画布层 === */
#spaceCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#spaceCanvas canvas { display: block; }

/* WebGL兜底: CSS星空 */
.space-fallback #spaceCanvas {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(200,220,255,0.8), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,240,200,0.7), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 70% 85%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 30% 90%, rgba(200,220,255,0.5), transparent);
  background-color: var(--bg-deep);
  background-size: 100% 100%;
}

/* === 星云环境光 === */
.nebula {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
}
.nebula-1 { width: 700px; height: 700px; background: var(--nebula-indigo); top: -15%; left: -10%; }
.nebula-2 { width: 600px; height: 600px; background: var(--nebula-blue); bottom: -20%; right: -8%; }

/* === BOOT 加载屏 === */
#spaceBoot {
  position: fixed;
  inset: 0;
  background: #02030a;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.9s ease, visibility 0.9s;
}
#spaceBoot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#spaceBoot .boot-scope {
  width: 120px; height: 120px;
  border: 1px solid rgba(77, 255, 166, 0.35);
  border-radius: 50%;
  margin-bottom: 40px;
  position: relative;
  animation: scopeSpin 3s linear infinite;
}
#spaceBoot .boot-scope::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(77, 255, 166, 0.25);
  border-radius: 50%;
}
#spaceBoot .boot-scope::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--code-green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px var(--code-green);
}
#spaceBoot .boot-cross {
  position: absolute;
  top: 50%; left: -30%;
  width: 160%; height: 1px;
  background: rgba(77, 255, 166, 0.2);
}
#spaceBoot .boot-cross.v { transform: rotate(90deg); }
@keyframes scopeSpin { to { transform: rotate(360deg); } }

#spaceBoot .boot-terminal {
  width: 480px;
  max-width: 88vw;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 2.1;
  color: var(--text-muted);
  min-height: 190px;
}
#spaceBoot .terminal-prompt { color: var(--text-secondary); }
#spaceBoot .terminal-text.ok { color: var(--code-green); }
#spaceBoot .terminal-text.log-error { color: var(--red); }
#spaceBoot .terminal-line { animation: fadeIn 0.25s ease; }

#spaceBoot .boot-progress {
  width: 480px;
  max-width: 88vw;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 28px;
  position: relative;
  overflow: hidden;
}
#spaceBootBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--code-dim), var(--code-green));
  box-shadow: 0 0 12px rgba(77, 255, 166, 0.6);
  transition: width 0.3s ease;
}
#spaceBoot .boot-tag {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* === 玻璃面板(内容浮在太空上) === */
.card, .teaser-card, .feature-card, .belief-card, .philosophy-item,
.structure-block, .contact-card-dark, .contact-form-dark,
.chaos-card, .teaser-main, .teaser-side-item, .about-visual-block {
  background: var(--bg-card);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border-subtle);
}
.card:hover, .teaser-card:hover, .feature-card:hover,
.belief-card:hover, .philosophy-item:hover, .chaos-card:hover {
  border-color: rgba(77, 255, 166, 0.22);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), var(--shadow-glow);
}

/* === 区块在太空中的层级 === */
.section, .page-hero, .cta-section, .footer { position: relative; z-index: 2; }
.footer { background: rgba(3, 4, 10, 0.85); backdrop-filter: blur(20px); }

/* === Hero(太空版) === */
.space-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.space-hero .container, .space-hero a, .space-hero button { pointer-events: auto; }
.space-hero-content {
  max-width: 640px;
  padding: 120px 24px 0;
}

/* === FATAL ERROR 徽章 === */
.fatal-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(255, 68, 85, 0.1);
  border: 1px solid rgba(255, 68, 85, 0.35);
  border-radius: 4px;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 28px;
  animation: fatalBlink 1.6s steps(2) infinite;
}
.fatal-badge .fatal-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--red);
}
@keyframes fatalBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(255, 68, 85, 0); }
  50% { opacity: 0.75; box-shadow: 0 0 30px rgba(255, 68, 85, 0.25); }
}

/* ============================================================
   腐化标题特效 —— 标题本身就是一个正在发生的bug
   ============================================================ */
.corrupt-wrap {
  position: relative;
  display: inline-block;
}
.corrupt-title {
  font-size: clamp(44px, 8vw, 84px);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -1px;
  position: relative;
  font-family: var(--font-sans);
}
/* 色差重影层 */
.corrupt-title::before,
.corrupt-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.corrupt-title::before {
  color: #ff2255;
  animation: chromaA 3.7s steps(1) infinite;
}
.corrupt-title::after {
  color: #22ddff;
  animation: chromaB 3.7s steps(1) infinite;
}
@keyframes chromaA {
  0%, 91%, 100% { opacity: 0; transform: translate(0, 0); }
  92% { opacity: 0.75; transform: translate(-5px, 2px); }
  94% { opacity: 0.5; transform: translate(4px, -2px); clip-path: inset(20% 0 40% 0); }
  96% { opacity: 0.8; transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0); }
  98% { opacity: 0.4; transform: translate(5px, 1px); }
}
@keyframes chromaB {
  0%, 91%, 100% { opacity: 0; transform: translate(0, 0); }
  92% { opacity: 0.75; transform: translate(5px, -2px); }
  94% { opacity: 0.5; transform: translate(-4px, 2px); clip-path: inset(30% 0 30% 0); }
  96% { opacity: 0.8; transform: translate(3px, 0); clip-path: inset(10% 0 60% 0); }
  98% { opacity: 0.4; transform: translate(-5px, -1px); }
}
/* 屏幕震颤(偶发) */
.corrupt-wrap.shake {
  animation: screenShake 0.22s linear;
}
@keyframes screenShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px) skewX(-1deg); }
  40% { transform: translate(4px, -2px) skewX(1deg); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(3px, 1px); }
  100% { transform: translate(0, 0); }
}
/* 腐化字符样式 */
.corrupt-char {
  display: inline-block;
  position: relative;
  transition: color 0.05s;
}
.corrupt-char.glitching {
  color: var(--red);
  text-shadow: 0 0 20px rgba(255, 68, 85, 0.7);
}

/* === 错误代码副标题 === */
.error-code-line {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 26px;
  line-height: 2;
}
.error-code-line .ec-key { color: var(--text-secondary); }
.error-code-line .ec-val { color: var(--code-green); }
.error-code-line .ec-err { color: var(--red); }

/* === Hero 右侧留白给月亮 === */
@media (min-width: 900px) {
  .space-hero-content { margin-left: 6vw; }
}

/* === 滚动场景在太空中的适配 === */
.scroll-scene .scene-sticky {
  background: transparent;
}
.scene-line .line-big { text-shadow: 0 4px 40px rgba(0, 0, 0, 0.8); }

/* === 诊断报告面板 === */
.chaos-card { border-color: rgba(255, 68, 85, 0.14); }
.chaos-card::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }

/* === 碎片修复舱卡片 === */
.frag-card .sys-status.debug { color: var(--code-green); }
.frag-card .sys-status.debug::before { background: var(--code-green); box-shadow: 0 0 10px var(--code-green); }

/* === 按钮太空化 === */
.btn-primary {
  background: linear-gradient(135deg, #1fbf7a, #0d8f5a);
  box-shadow: 0 0 30px rgba(77, 255, 166, 0.25);
}
.btn-primary:hover { box-shadow: 0 0 50px rgba(77, 255, 166, 0.45); }
.btn-outline {
  border-color: rgba(160, 180, 255, 0.2);
  color: var(--text-primary);
}
.btn-outline:hover {
  border-color: var(--code-green);
  background: rgba(77, 255, 166, 0.06);
  box-shadow: 0 0 30px rgba(77, 255, 166, 0.15);
}

/* === 标签/徽章色 === */
.section-label { color: var(--code-green); }
.status-vision { background: rgba(125, 216, 255, 0.1); color: var(--cyan); border-color: rgba(125, 216, 255, 0.2); }
.status-coming { background: rgba(167, 139, 255, 0.1); color: var(--purple); border-color: rgba(167, 139, 255, 0.2); }
.indicator-purple { background: var(--purple); box-shadow: 0 0 12px var(--purple); }
.indicator-cyan { background: var(--code-green); box-shadow: 0 0 12px var(--code-green); }

/* === 进度条(修复能量) === */
.build-progress-fill {
  background: linear-gradient(90deg, var(--code-dim), var(--code-green));
  box-shadow: 0 0 15px rgba(77, 255, 166, 0.5);
}

/* === 加密块 === */
.encrypted-block { border-color: rgba(77, 255, 166, 0.2); }
.encrypted-line { color: var(--code-green); }
.encrypted-block::after { color: var(--orange); }

/* === 导航栏太空化 === */
.header { background: rgba(2, 3, 10, 0.72); }
.nav-link.active { color: var(--code-green); background: rgba(77, 255, 166, 0.08); }
.nav-cta { background: linear-gradient(135deg, #1fbf7a, #0d8f5a); box-shadow: 0 0 20px rgba(77, 255, 166, 0.2); }
.logo-icon { background: linear-gradient(135deg, #1fbf7a, #0a6e46); box-shadow: 0 0 20px rgba(77, 255, 166, 0.25); }

/* === 滚动进度条 === */
.scroll-progress { background: linear-gradient(90deg, var(--code-dim), var(--code-green), var(--cyan)); }

/* === 滚动场景角标配色 === */
.chapter-marker .chapter-num { -webkit-text-stroke-color: rgba(77, 255, 166, 0.3); }
.chapter-marker .chapter-line { background: linear-gradient(90deg, rgba(77, 255, 166, 0.3), transparent); }
.scene-frame::before, .scene-frame::after,
.scene-frame .frame-corner-b, .scene-frame .frame-corner-c { border-color: rgba(77, 255, 166, 0.22); }
.scene-corner .big-pct { color: rgba(77, 255, 166, 0.5); }
.bg-giant-text { -webkit-text-stroke-color: rgba(160, 180, 255, 0.05); }

/* === 宣言高亮色 === */
.manifesto .highlight { color: var(--code-green); text-shadow: 0 0 30px rgba(77, 255, 166, 0.4); }
.scene-line .line-big .accent { color: var(--code-green); text-shadow: 0 0 40px rgba(77, 255, 166, 0.4); }

/* === CTA区 === */
.cta-section::before { background: transparent; }

/* === 自定义光标太空色 === */
.cursor-dot { background: var(--code-green); }
.cursor-ring { border-color: rgba(77, 255, 166, 0.4); }
.cursor-ring.hovering { border-color: rgba(77, 255, 166, 0.8); background: rgba(77, 255, 166, 0.05); }

/* === 入场初始状态(配合boot) === */
body:not(.space-ready) .space-hero-content,
body:not(.space-ready) .scroll-hint {
  opacity: 0;
}
.space-hero-content { transition: opacity 1s ease 0.2s; }