/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：index / 开屏内容
 * pages/index/boot-content.css
 * 区块：开屏 Logo 与标语、启动日志文本、光标、通用开屏关键帧、窄屏（≤768px）下的 Logo 排布
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

.boot-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  padding: 0 var(--space-page-mobile);
  width: 100%;
}

.boot-logo {
  margin-bottom: var(--space-card-lg);
  opacity: 0;
  animation: none;
  display: flex;
  align-items: center;         /* PC：logo 与文字垂直居中，横向排布 */
  justify-content: center;
  flex-direction: row;
  gap: 20px;
}

#boot-screen.on .boot-logo { animation: fadeIn 0.6s var(--ease-out) 1.2s forwards; }

.boot-logo img {
  width: 64px;
  height: 64px;
  /* 媒体资源占位：src 为空，待补充 */
}

/* 右侧文字组：内部仍为纵向层叠，主副标题左对齐 */
.boot-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* 主标题：品牌名，取 风格.字阶.H3（24/32 600，字距 -0.01em），字体沿用正文黑体 */
.boot-logo-title {
  font: var(--text-h3);
  font-family: var(--font-body);
  letter-spacing: var(--ls-h3);
  color: var(--text-primary);
}

/* 副标语：取 风格.字阶.Caption（12/18 500，字距 0.06em），弱化层级 */
.boot-logo-sub {
  font: var(--text-caption);
  font-family: var(--font-body);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
}

.boot-text {
  font: var(--text-mono);
  color: var(--text-secondary);
  text-align: left;
  min-height: 140px;
  opacity: 0;
  animation: none;
}

#boot-screen.on .boot-text { animation: fadeIn 0.4s var(--ease-out) 1.5s forwards; }

.boot-text .line {
  display: inline;
  white-space: pre;
  color: var(--text-primary);
}

.boot-text .sys-tag  { color: var(--green-primary); }
.boot-text .warn-tag { color: var(--amber); }

.boot-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--green-primary);
  vertical-align: text-bottom;
  margin-left: 2px;
  opacity: 0;
  animation: none;
}

#boot-screen.on .boot-cursor {
  animation: fadeIn 0.4s var(--ease-out) 1.5s forwards, blink 1s step-end 1.9s infinite;
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  /* 终端外壳左右边距沿用 --space-page-mobile（24px，风格.间隔.页面左右边距移动端），
     桌面端同为 24px：终端为全屏应用外壳，非内容页，故不套用 48px 桌面边距 */

  /* 移动端：logo 恢复纵向，文字置于 logo 下方并居中 */
  .boot-logo {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .boot-logo-text {
    align-items: center;
    text-align: center;
  }
}