/* ============================================================================
 * 暮色手帖 · 开屏动画（splash.css）
 * ----------------------------------------------------------------------------
 * 风格对齐 dsh-startup-screen 的暗色开机序列：黑色序幕（厂牌标识）→ 过曝洗白 →
 * 暗色「技术档案」底板（左上角品牌块 + REV/时钟 + 六段流程指示）→
 * 六步访问授权（中文主字 + 等宽英文副标题逐字打出 + 橙色光标）→
 * 色散故障揭幕。揭幕后进入博客本页，并为页面各区块编排进场动画。
 *
 * 全部字体取系统自带，零网络依赖；配色取参考片暗色板：
 *   底板 #0c0c0d / 文字 #f2efe9 / 强调橙 #ff7500 / 故障红蓝 #ff3b30 #2971b8
 * ========================================================================== */

/* ---------- 开屏期间藏住页面本体，避免黑幕前闪出内容 ---------- */
html.boot-pending body > :not(#boot-root) { visibility: hidden; }
html.boot-pending body { overflow: hidden; }

/* ---------- 顶层容器 ---------- */
#boot-root {
  /* 配色（暗色 / 参考片色板） */
  --bt-bg: #0c0c0d;
  --bt-bg-2: #121214;
  --bt-ink: #f2efe9;
  --bt-ink-soft: #cfcac2;
  --bt-muted: #8b8b88;
  --bt-hair: rgba(242, 239, 233, 0.22);
  --bt-hair-soft: rgba(242, 239, 233, 0.09);
  --bt-accent: #ff7500;
  --bt-glitch-a: #ff3b30;
  --bt-glitch-b: #2971b8;
  --bt-gold: #e8ba82;

  /* 字体（系统自带，三档回退） */
  --bt-din: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Oswald",
    "Arial Narrow", "Roboto Condensed", "Noto Sans Display",
    "Microsoft YaHei", "PingFang SC", sans-serif;
  --bt-mono: "Cascadia Mono", "SFMono-Regular", "Consolas", "Menlo",
    "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;
  --bt-zh: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
    "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #000;
  color: var(--bt-ink);
  font-family: var(--bt-din);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
/* reset 用 :where() 降为零特异性，避免压过后面的 margin/padding 声明 */
:where(#boot-root) :where(*) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:where(#boot-root) :where(*::before, *::after) {
  box-sizing: border-box;
}

/* 逐字渐显：用透明度而非截断，居中排版不会左右抖动 */
.bt-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16em);
  transition: opacity 340ms ease, transform 340ms ease;
}
.bt-in .bt-ch { opacity: 1; transform: none; }

/* ---------- 第一幕：黑色序幕 ---------- */
.boot-black {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 480ms ease;
}
.boot-black.out { opacity: 0; pointer-events: none; }
.boot-black-inner { text-align: center; color: #f2ede4; }

.boot-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 26px;
  border: 1px solid rgba(232, 186, 130, 0.65);
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.boot-mark i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bt-gold);
  box-shadow: 0 0 14px rgba(232, 186, 130, 0.9);
  animation: bt-pulse 1.6s ease-in-out infinite;
}
.boot-black.seen .boot-mark { opacity: 1; transform: none; }
@keyframes bt-pulse {
  0%, 100% { transform: scale(0.72); opacity: 0.65; }
  50% { transform: scale(1.08); opacity: 1; }
}

.boot-brand {
  font-family: var(--bt-zh);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #f2ede4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.boot-brand-en {
  margin-top: 14px;
  font-family: var(--bt-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(232, 186, 130, 0.85);
  opacity: 0;
  transition: opacity 700ms ease 120ms;
}
.boot-black.seen .boot-brand { opacity: 1; transform: none; }
.boot-black.seen .boot-brand-en { opacity: 1; }

.boot-log {
  position: absolute;
  left: 34px;
  bottom: 30px;
  font-family: var(--bt-mono);
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(242, 237, 228, 0.38);
  text-align: left;
  white-space: pre-line;
}
.boot-black-foot {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--bt-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(242, 237, 228, 0.22);
}

/* ---------- 第二幕：过曝洗白 ---------- */
.boot-wash {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
}
.boot-wash.on {
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #fbf6ed 55%, #efe9df 100%);
  animation: bt-wash-grow 760ms cubic-bezier(0.5, 0, 0.8, 0.4) forwards,
             bt-wash-fade 520ms ease 560ms forwards;
}
@keyframes bt-wash-grow {
  0% { opacity: 1; clip-path: circle(0% at 50% 45%); }
  100% { opacity: 1; clip-path: circle(75% at 50% 45%); }
}
@keyframes bt-wash-fade { to { opacity: 0; } }

/* ---------- 第三幕：暗色「技术档案」底板 ---------- */
.boot-plate {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: linear-gradient(160deg, var(--bt-bg-2), var(--bt-bg) 58%, #080809);
  opacity: 0;
  transform: scale(0.988);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 640ms cubic-bezier(0.6, 0, 0.3, 1);
}
.boot-plate.on { opacity: 1; transform: none; }
/* 纸面掠光：底板亮起时扫过一道 */
.boot-plate.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: bt-sweep 1150ms ease 240ms forwards;
  pointer-events: none;
}
@keyframes bt-sweep { to { transform: translateX(130%); } }

/* 底板上的竖向暗面板（参考片的空列） */
.boot-plate .bt-col {
  position: absolute;
  border: 1px solid rgba(242, 239, 233, 0.05);
  background: rgba(255, 255, 255, 0.012);
  pointer-events: none;
}
.boot-plate .bt-col-a { left: 6.5%; top: 4%; width: 200px; height: 56%; }
.boot-plate .bt-col-b { right: 9%; top: 1.5%; width: 300px; height: 96%; }
.boot-plate .bt-col-c { right: 26%; top: 1.5%; width: 210px; height: 96%; }

/* 四角 L 形准星角标 */
.boot-plate .bt-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgba(242, 239, 233, 0.3);
  pointer-events: none;
}
.bt-corner.c-tl { left: 26px; top: 22px; border-left-width: 1.5px; border-top-width: 1.5px; }
.bt-corner.c-tr { right: 26px; top: 22px; border-right-width: 1.5px; border-top-width: 1.5px; }
.bt-corner.c-bl { left: 26px; bottom: 22px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bt-corner.c-br { right: 26px; bottom: 22px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

/* ---------- 左上角：品牌块 + REV/时钟 + 六段流程 ---------- */
.boot-brand-block {
  position: absolute;
  left: 40px;
  top: 30px;
  z-index: 26;
  opacity: 0;
  transition: opacity 600ms ease 200ms;
}
.boot-plate.on .boot-brand-block { opacity: 1; }
.boot-brand-block strong {
  display: block;
  font-family: var(--bt-zh);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--bt-ink);
}
.boot-brand-block small {
  display: block;
  margin-top: 7px;
  font-family: var(--bt-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--bt-muted);
}
.boot-rev {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
  font-family: var(--bt-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bt-muted);
  white-space: nowrap;
}
.boot-rev b {
  color: var(--bt-accent);
  font-weight: 400;
  letter-spacing: 0.14em;
}
.boot-dashes {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  align-items: center;
}
.boot-dashes i {
  width: 26px;
  height: 2px;
  background: rgba(242, 239, 233, 0.16);
  transition: background 300ms ease, width 300ms ease;
}
.boot-dashes i.done { background: rgba(242, 239, 233, 0.62); }
.boot-dashes i.cur { background: var(--bt-accent); width: 34px; }

/* ---------- 跳过按钮 ---------- */
.boot-skip {
  position: absolute;
  top: 34px;
  right: 40px;
  z-index: 28;
  border: 0;
  background: none;
  color: var(--bt-muted);
  font-family: var(--bt-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease 300ms, color 200ms ease;
}
.boot-plate.on .boot-skip { opacity: 1; pointer-events: auto; }
.boot-skip:hover { color: var(--bt-accent); }
.boot-skip::after { content: " ▸"; letter-spacing: 0; }

/* ---------- 十六进制瀑布（第三至五步，右上） ---------- */
.boot-hex {
  position: absolute;
  right: 44px;
  top: 15%;
  width: 224px;
  height: 150px;
  z-index: 18;
  overflow: hidden;
  font-family: var(--bt-mono);
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: 0.12em;
  color: var(--bt-ink-soft);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.boot-hex.on { opacity: 0.55; }
.boot-hex .bt-hex-head {
  color: var(--bt-accent);
  letter-spacing: 0.24em;
  margin-bottom: 4px;
}
.boot-hex pre { font-family: inherit; white-space: pre; }

/* ---------- 中央状态区（中文主字 + 英文等宽副标题） ---------- */
.boot-status {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
  z-index: 22;
  width: min(92vw, 860px);
  text-align: center;
}
.boot-status-zh {
  font-family: var(--bt-zh);
  font-size: clamp(22px, 2.9vw, 42px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1.35;
  color: var(--bt-ink);
  white-space: nowrap;
}
.boot-caret {
  display: inline-block;
  width: 0.42em;
  height: 3px;
  margin-left: 0.28em;
  vertical-align: 0.1em;
  background: var(--bt-accent);
  animation: bt-blink 1.1s steps(2, start) infinite;
}
@keyframes bt-blink { to { visibility: hidden; } }
.boot-status-en {
  margin-top: 18px;
  font-family: var(--bt-mono);
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--bt-ink-soft);
  white-space: nowrap;
}
.boot-rule {
  width: min(58vw, 620px);
  height: 1px;
  margin: 20px auto 0;
  background: var(--bt-hair);
}

/* 欢迎一幕的变体 */
.boot-status.welcome .boot-status-zh {
  font-size: clamp(28px, 3.6vw, 54px);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.boot-status-name {
  position: absolute;
  top: calc(100% + 34px);
  left: 50%;
  white-space: nowrap;
  font-family: var(--bt-zh);
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.34em;
  color: var(--bt-accent);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.boot-status.welcome .boot-status-name { opacity: 1; transform: translate(-50%, 0); }

/* 核验印章（第五步） */
.boot-stamp {
  position: absolute;
  top: calc(100% + 38px);
  left: 50%;
  padding: 7px 18px;
  border: 2px solid var(--bt-accent);
  color: var(--bt-accent);
  font-family: var(--bt-zh);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  transform: translateX(-50%) rotate(-7deg) scale(1.5);
  opacity: 0;
  white-space: nowrap;
}
.boot-stamp.on { animation: bt-stamp 380ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.boot-stamp small {
  display: block;
  font-family: var(--bt-mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  margin-top: 4px;
  font-weight: 400;
}
@keyframes bt-stamp {
  0% { opacity: 0; transform: translateX(-50%) rotate(-7deg) scale(1.5); }
  100% { opacity: 1; transform: translateX(-50%) rotate(-7deg) scale(1); }
}

/* ---------- 中部：身份表 + 操作区 + 小狗 ---------- */
.boot-mid {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  z-index: 24;
  display: grid;
  justify-items: center;
  gap: 24px;
  width: min(92vw, 640px);
}

/* 身份表（第二步）：细行 + 右对齐粗体值，参考片式；隐藏时折叠不占位 */
.boot-idtable {
  display: none;
  width: min(78vw, 400px);
  font-family: var(--bt-mono);
}
.boot-idtable.on { display: block; animation: bt-fade-up 480ms ease; }
.boot-idtable .bt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 8px 2px;
  border-top: 1px solid var(--bt-hair-soft);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--bt-muted);
}
.boot-idtable .bt-row:last-child { border-bottom: 1px solid var(--bt-hair-soft); }
.boot-idtable .bt-row b {
  color: var(--bt-ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: right;
}

/* 操作区：细边框小按钮 + Enter/Space 提示 */
.boot-action {
  display: grid;
  justify-items: center;
  gap: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 460ms ease, transform 460ms ease;
}
.boot-action.on { opacity: 1; pointer-events: auto; transform: none; }
.boot-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  border: 1px solid rgba(242, 239, 233, 0.55);
  background: transparent;
  color: var(--bt-ink);
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.boot-btn #btBtnZh {
  font-family: var(--bt-zh);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.boot-btn #btBtnEn {
  font-family: var(--bt-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bt-muted);
  transition: color 180ms ease;
}
.boot-btn:hover, .boot-btn:focus-visible {
  border-color: var(--bt-accent);
  color: var(--bt-accent);
  outline: none;
}
.boot-btn:hover #btBtnEn, .boot-btn:focus-visible #btBtnEn { color: var(--bt-accent); }
.boot-btn:active { transform: translateY(1px); }
.boot-hint {
  font-family: var(--bt-zh);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--bt-muted);
}
.boot-hint kbd {
  font-family: var(--bt-mono);
  font-size: 10px;
  border: 1px solid var(--bt-hair);
  padding: 1px 6px;
  margin: 0 3px;
  border-radius: 3px;
  color: var(--bt-ink-soft);
}

/* ---------- 密码门（第一步） ---------- */
.boot-pass { display: grid; gap: 10px; justify-items: center; }
.boot-pass-label {
  font-family: var(--bt-mono); font-size: 9px; letter-spacing: .32em;
  color: var(--bt-muted);
}
.boot-pass input {
  width: min(72vw, 300px); padding: 11px 16px;
  background: rgba(242, 239, 233, .04);
  border: 1px solid rgba(242, 239, 233, .4); color: var(--bt-ink);
  font-family: var(--bt-mono); font-size: 15px; letter-spacing: .5em;
  text-align: center; outline: none; caret-color: var(--bt-accent);
  transition: border-color .18s ease, background .18s ease;
}
.boot-pass input:focus { border-color: var(--bt-accent); background: rgba(255, 117, 0, .05); }
.boot-pass input::placeholder { color: rgba(242, 239, 233, .22); letter-spacing: .3em; }
.boot-pass.deny input { border-color: var(--bt-glitch-a); animation: bt-deny 300ms steps(2); }
.boot-pass-error {
  min-height: 14px; font-family: var(--bt-mono); font-size: 9.5px;
  letter-spacing: .2em; color: var(--bt-glitch-a); text-align: center;
}
@keyframes bt-deny {
  0% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* 小狗（第四步读取时出场） */
.boot-dog {
  display: none;
  justify-items: center;
  gap: 10px;
}
.boot-dog.on { display: grid; animation: bt-fade-up 480ms ease; }
@keyframes bt-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.boot-dog img {
  width: 84px;
  height: auto;
  image-rendering: pixelated;
}
.boot-dog .bt-dog-dashes {
  font-family: var(--bt-mono);
  font-size: 10px;
  letter-spacing: 0.5em;
  color: var(--bt-muted);
}

/* ---------- 底栏：左步骤 / 中状态 / 右确认 ---------- */
.boot-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 26;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 40px;
  opacity: 0;
  transition: opacity 600ms ease 240ms;
}
.boot-plate.on .boot-foot { opacity: 1; }
.boot-foot-l { display: grid; gap: 12px; justify-items: start; }
.boot-voice {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.boot-voice i {
  width: 3px;
  background: var(--bt-accent);
  animation: bt-voice 1s ease-in-out infinite alternate;
}
.boot-voice i:nth-child(1) { height: 5px; animation-delay: 0ms; }
.boot-voice i:nth-child(2) { height: 10px; animation-delay: 140ms; }
.boot-voice i:nth-child(3) { height: 14px; animation-delay: 60ms; }
.boot-voice i:nth-child(4) { height: 8px; animation-delay: 220ms; }
.boot-voice i:nth-child(5) { height: 11px; animation-delay: 120ms; }
@keyframes bt-voice { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.boot-stepword {
  font-family: var(--bt-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--bt-ink-soft);
  white-space: nowrap;
}
.boot-foot-c {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
  width: min(60vw, 560px);
}
.boot-foot-c .bt-foot-zh {
  font-family: var(--bt-zh);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--bt-ink-soft);
  white-space: nowrap;
}
.boot-foot-c .bt-foot-en {
  margin-top: 7px;
  font-family: var(--bt-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--bt-muted);
  white-space: nowrap;
}
.boot-foot-r { display: grid; gap: 12px; justify-items: end; }
.boot-idline {
  font-family: var(--bt-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bt-ink-soft);
  opacity: 0;
  transition: opacity 500ms ease;
  white-space: nowrap;
}
.boot-idline.show { opacity: 1; }
.boot-powered {
  font-family: var(--bt-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--bt-muted);
  white-space: nowrap;
}
.boot-powered i {
  display: inline-block;
  width: 16px;
  height: 9px;
  margin-left: 10px;
  background: var(--bt-ink);
  vertical-align: -1px;
}

/* ---------- 底部进度条 ---------- */
.boot-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(242, 239, 233, 0.08);
  z-index: 27;
}
.boot-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--bt-ink);
  transition: width 220ms ease;
}
.boot-progress i.full { background: var(--bt-accent); }

/* ---------- 氛围层：扫描线 / 颗粒 / 暗角 ---------- */
.boot-scanline {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
}
.boot-plate.on .boot-scanline { opacity: 1; }
.boot-scanline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, rgba(242, 239, 233, 0.04) 50%, transparent);
  animation: bt-scan 7s linear infinite;
}
@keyframes bt-scan { from { top: -110px; } to { top: 100%; } }

.boot-grain {
  position: absolute;
  inset: -40px;
  z-index: 33;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.55"/></svg>');
  background-size: 140px 140px;
}
.boot-plate.on .boot-grain { opacity: 0.06; animation: bt-grain 0.7s steps(3) infinite; }
@keyframes bt-grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-14px, 9px); }
  66% { transform: translate(11px, -13px); }
  100% { transform: translate(0, 0); }
}

.boot-vignette {
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.5));
}
.boot-plate.on .boot-vignette { opacity: 1; }

/* ---------- 揭幕：色散故障 ---------- */
.boot-glitch {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
  overflow: hidden;
}
.boot-glitch.on { display: block; }
.boot-glitch i {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bt-bg);
  box-shadow: -9px 0 var(--bt-glitch-a), 9px 0 var(--bt-glitch-b);
  animation: bt-glitch-shift 130ms steps(2) infinite;
}
.boot-glitch i:nth-child(1) { top: 8%; height: 9%; animation-delay: 0ms; }
.boot-glitch i:nth-child(2) { top: 24%; height: 5%; animation-delay: 40ms; }
.boot-glitch i:nth-child(3) { top: 43%; height: 12%; animation-delay: 15ms; }
.boot-glitch i:nth-child(4) { top: 64%; height: 6%; animation-delay: 55ms; }
.boot-glitch i:nth-child(5) { top: 82%; height: 10%; animation-delay: 25ms; }
@keyframes bt-glitch-shift {
  0% { transform: translateX(-16px); }
  50% { transform: translateX(13px); }
  100% { transform: translateX(-6px); }
}
.boot-plate.glitch { animation: bt-shake 120ms steps(2) infinite; }
@keyframes bt-shake {
  0% { transform: translate(2px, -1px); }
  50% { transform: translate(-3px, 1px); }
  100% { transform: translate(1px, 2px); }
}
.boot-plate.glitch .boot-status-zh {
  text-shadow: -4px 0 var(--bt-glitch-a), 4px 0 var(--bt-glitch-b);
}
.boot-plate.glitch .boot-status-en {
  text-shadow: -2px 0 var(--bt-glitch-b), 2px 0 var(--bt-glitch-a);
}

.boot-flash {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.boot-flash.on { animation: bt-flash 460ms steps(1) forwards; }
@keyframes bt-flash {
  0% { opacity: 0.92; }
  18% { opacity: 0; }
  32% { opacity: 0.55; }
  46% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- 退场：底板上掀，暮色浮现 ---------- */
#boot-root.exit { pointer-events: none; }
#boot-root.exit .boot-plate {
  clip-path: inset(0 0 100% 0);
  transform: translateY(-3%);
  opacity: 0.9;
}
#boot-root.exit .boot-glitch, #boot-root.exit .boot-wash,
#boot-root.exit .boot-black, #boot-root.exit .boot-flash { display: none; }
#boot-root.calm .boot-plate {
  opacity: 0;
  transition: opacity 320ms ease;
}

/* ==========================================================================
 * 页面进场编排（揭幕后 body 获得 .booted）
 * ========================================================================== */
@keyframes bt-enter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-enter-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes bt-enter-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
@keyframes bt-enter-land {
  from { opacity: 0; transform: translateY(46px); }
  to { opacity: 1; transform: none; }
}

body.booted .sky { animation: bt-enter-fade 1.2s ease both; }
body.booted .landscape { animation: bt-enter-land 1.3s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .site-header { animation: bt-enter-drop 0.7s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .hero-content > * { animation: bt-enter-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .hero-content > *:nth-child(1) { animation-delay: 0.3s; }
body.booted .hero-content > *:nth-child(2) { animation-delay: 0.4s; }
body.booted .hero-content > *:nth-child(3) { animation-delay: 0.5s; }
body.booted .hero-content > *:nth-child(4) { animation-delay: 0.6s; }
body.booted .hero-side { animation: bt-enter-rise 0.9s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .calendar-panel { animation: bt-enter-rise 0.9s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .notes-section { animation: bt-enter-rise 0.9s 0.56s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .dog-card { animation: bt-enter-rise 0.9s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .quote-card { animation: bt-enter-rise 0.9s 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .review-card { animation: bt-enter-rise 0.9s 0.74s cubic-bezier(0.22, 1, 0.36, 1) both; }
body.booted .sidebar-note { animation: bt-enter-fade 1s 0.85s both; }
body.booted .site-footer { animation: bt-enter-fade 1.1s 0.8s both; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .boot-brand-block { left: 20px; top: 20px; }
  .boot-rev .bt-rev-clock { display: none; }
  .boot-hex { display: none; }
  .boot-skip { top: 20px; right: 20px; }
  .boot-foot { padding: 0 20px; bottom: 20px; }
  .boot-foot-c { display: none; }
  .boot-log { left: 20px; bottom: 52px; font-size: 9px; }
  .boot-status { width: 94vw; }
  .boot-status-zh { white-space: normal; }
  .boot-idtable { width: min(88vw, 400px); }
  .boot-mid { top: 56%; gap: 20px; }
  .boot-plate .bt-col { display: none; }
}

/* ---------- 弱化动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .boot-mark i, .boot-caret, .boot-voice i,
  .boot-scanline::before, .boot-grain,
  .boot-glitch i, .boot-plate.glitch,
  .boot-plate.on::after { animation: none !important; }
  .bt-ch { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  body.booted .sky, body.booted .landscape, body.booted .site-header,
  body.booted .hero-content > *, body.booted .hero-side,
  body.booted .calendar-panel, body.booted .notes-section,
  body.booted .dog-card, body.booted .quote-card,
  body.booted .review-card, body.booted .sidebar-note,
  body.booted .site-footer { animation: none !important; }
}