/* 主页开屏演出：真实主页在底层加载，最后由三层斜切遮罩完成交接。 */
#bootIntro {
  --boot-paper: #f2efe7;
  --boot-ink: #0d0f0d;
  --boot-orange: #f4512f;
  --boot-yellow: #f0c933;
  --boot-progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: auto;
  background: #101110;
}
#bootIntro.finish {
  pointer-events: none;
}
#bootIntro.boot-leave {
  background: transparent;
}
body.boot-active {
  overflow: hidden;
  overscroll-behavior: none;
}
.boot-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: var(--boot-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, -8% 100%);
  will-change: clip-path;
}
.boot-grid {
  position: absolute;
  inset: -2%;
  background:
    linear-gradient(rgba(242, 239, 231, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 231, 0.085) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: translate3d(0, 0, 0);
  animation: boot-grid-drift 2.6s linear forwards;
}
.boot-grid:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 60% 54%,
    rgba(240, 201, 51, 0.08),
    transparent 32%
  );
}
.boot-frame {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(242, 239, 231, 0.16);
  opacity: 0;
  animation: boot-frame-on 0.16s 0.1s steps(1, end) forwards;
}
.boot-frame:before,
.boot-frame:after {
  content: "";
  position: absolute;
  background: var(--boot-paper);
}
.boot-frame:before {
  left: -1px;
  top: 8%;
  width: 1px;
  height: 21px;
}
.boot-frame:after {
  right: 12%;
  bottom: -1px;
  width: 32px;
  height: 1px;
}
.boot-meta {
  position: absolute;
  left: 52px;
  right: 52px;
  top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c8c6bd;
  font: 700 9px/1.2 "DM Mono", Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  animation: boot-meta-in 0.22s 0.16s forwards;
}
.boot-meta b {
  color: var(--boot-yellow);
  font-weight: 700;
}
.boot-brand {
  position: absolute;
  left: 6vw;
  top: 14vh;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--boot-paper);
  opacity: 0;
  animation: boot-brand-in 0.25s 0.24s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.boot-logo {
  width: 27px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid var(--boot-yellow);
  color: var(--boot-yellow);
  font: 900 12px Arial, sans-serif;
  transform: skewY(-4deg);
}
.boot-brandtext {
  font: 900 11px/0.92 Arial, sans-serif;
  letter-spacing: 0.08em;
}
.boot-brandtext em {
  display: block;
  color: var(--boot-yellow);
  font-style: normal;
}
.boot-rail {
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 32vh;
  height: 1px;
  background: rgba(242, 239, 231, 0.19);
  transform-origin: left;
  transform: scaleX(0);
  animation: boot-rail 0.3s 0.34s forwards;
}
.boot-rail:after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--boot-orange);
  transform: rotate(45deg);
}
.boot-side {
  position: absolute;
  left: 50px;
  top: 50%;
  color: #a8aaa3;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font: 700 8px/1.6 "DM Mono", Consolas, monospace;
  letter-spacing: 0.15em;
  opacity: 0;
  animation: boot-side-in 0.2s 0.5s forwards;
}
.boot-hero {
  position: absolute;
  left: 6vw;
  top: 36vh;
  right: 5vw;
  z-index: 3;
}
.boot-kicker {
  margin-bottom: 18px;
  color: var(--boot-orange);
  font: 800 9px/1 "DM Mono", Consolas, monospace;
  letter-spacing: 0.17em;
  opacity: 0;
  animation: boot-kicker-in 0.18s 0.36s forwards;
}
.boot-hero h1 {
  position: relative;
  margin: 0;
  color: var(--boot-paper);
  font-family: var(--display, Arial, sans-serif);
  font-size: clamp(74px, 10.9vw, 178px);
  font-weight: 950;
  line-height: 0.78;
  letter-spacing: -0.085em;
  transform-origin: left center;
  opacity: 0;
  animation: boot-hero-hit 0.42s 0.42s cubic-bezier(0.12, 0.96, 0.18, 1) forwards;
}
.boot-hero h1:before,
.boot-hero h1:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
}
.boot-hero h1:before {
  color: var(--boot-orange);
  clip-path: inset(12% 0 68% 0);
  animation: boot-glitch-top 0.6s 0.84s steps(1, end) 2;
}
.boot-hero h1:after {
  color: var(--boot-yellow);
  clip-path: inset(66% 0 10% 0);
  animation: boot-glitch-bottom 0.54s 0.93s steps(1, end) 2;
}
.boot-strike {
  position: absolute;
  left: 5.8vw;
  top: 55.4vh;
  width: 44vw;
  height: 4.6vh;
  min-height: 25px;
  background: var(--boot-yellow);
  mix-blend-mode: screen;
  opacity: 0.88;
  transform-origin: left;
  transform: scaleX(0);
  animation: boot-strike 0.22s 0.76s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
.boot-actions {
  position: absolute;
  left: 6vw;
  top: 72vh;
  color: #a9aaa4;
  font: 700 clamp(9px, 0.85vw, 13px)/1.5 "DM Mono", Consolas, monospace;
  letter-spacing: 0.14em;
  opacity: 0;
  animation: boot-actions-in 0.2s 0.93s forwards;
}
.boot-actions b {
  color: var(--boot-orange);
  font-weight: 800;
}
.boot-burst {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: rgba(242, 239, 231, 0.72);
  font: 700 8px/1 "DM Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.boot-burst span {
  position: absolute;
  opacity: 0;
  animation: boot-data-pop 0.32s var(--boot-delay) steps(3, end) both;
}
.boot-burst span:nth-child(1) { left: 19%; top: 22%; }
.boot-burst span:nth-child(2) { left: 47%; top: 18%; }
.boot-burst span:nth-child(3) { left: 68%; top: 76%; }
.boot-burst span:nth-child(4) { left: 28%; top: 82%; }
.boot-burst span:nth-child(5) { left: 79%; top: 25%; }
.boot-burst span:nth-child(6) { left: 56%; top: 27%; }
.boot-slab {
  position: absolute;
  right: -7vw;
  top: 0;
  width: 43vw;
  height: 100%;
  z-index: 5;
  background: var(--boot-orange);
  transform: skewX(-12deg) translateX(120%);
  transform-origin: bottom right;
  animation:
    boot-slab-in 0.34s 1.18s cubic-bezier(0.12, 0.96, 0.18, 1) forwards,
    boot-slab-out 0.28s 2.1s cubic-bezier(0.72, 0.02, 0.25, 1) forwards;
}
.boot-slab:before {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--boot-yellow);
  box-shadow: -12px 0 0 rgba(242, 239, 231, 0.92);
}
.boot-slabcopy {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: min(27vw, 480px);
  min-width: 320px;
  z-index: 2;
  color: var(--boot-ink);
  opacity: 0;
  transform: skewX(12deg) translate(-50%, -50%) translateX(28px);
  transform-origin: center;
  animation:
    boot-slab-text 0.19s 1.43s forwards,
    boot-slab-text-out 0.1s 2.02s forwards;
}
.boot-slab-label,
.boot-slab-row,
.boot-ready small,
.boot-corner {
  font-family: "DM Mono", Consolas, monospace;
}
.boot-slab-label {
  margin-bottom: 15px;
  font: 900 8px/1 "DM Mono", Consolas, monospace;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.boot-slabcopy h2 {
  margin: 0 0 18px;
  font-size: clamp(52px, 5.2vw, 86px);
  font-weight: 950;
  line-height: 0.82;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.boot-slab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(13, 15, 13, 0.35);
  font-size: 7px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.boot-ready {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 7vw;
  background: var(--boot-paper);
  color: var(--boot-ink);
  opacity: 0;
  animation: boot-ready-on 0.45s 2.1s steps(1, end) both;
}
.boot-ready-main {
  font-size: clamp(76px, 14vw, 220px);
  font-weight: 950;
  line-height: 0.75;
  letter-spacing: -0.09em;
}
.boot-ready small {
  display: block;
  margin-top: 28px;
  color: var(--boot-orange);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.16em;
}
.boot-ready-num {
  font: 900 clamp(90px, 15vw, 230px)/0.8 "DM Mono", Consolas, monospace;
  letter-spacing: -0.09em;
}
.boot-loadline {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 12vh;
  height: 2px;
  background: rgba(13, 15, 13, 0.18);
}
.boot-loadline:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--boot-progress);
  height: 2px;
  background: var(--boot-ink);
  transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.boot-corner {
  position: absolute;
  right: 48px;
  bottom: 46px;
  color: #a5a79f;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-align: right;
}
.boot-corner b {
  color: var(--boot-orange);
}
.boot-handoff {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.boot-edge {
  position: absolute;
  top: -10%;
  left: 0;
  width: 8px;
  height: 120%;
  background: var(--boot-yellow);
  box-shadow:
    -10px 0 0 var(--boot-paper),
    -18px 0 0 var(--boot-orange);
  opacity: 0;
  transform: translateX(0) skewX(-7deg);
  transform-origin: top center;
  will-change: transform;
}
@keyframes boot-grid-drift { to { transform: translate(-18px, -9px); } }
@keyframes boot-frame-on { to { opacity: 1; } }
@keyframes boot-meta-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes boot-brand-in { from { opacity: 0; transform: translateY(-13px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes boot-rail { to { transform: scaleX(1); } }
@keyframes boot-kicker-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes boot-hero-hit { 0% { opacity: 0; transform: translateX(-10vw) scaleX(1.18); filter: blur(8px); } 65% { opacity: 1; transform: translateX(1vw) scaleX(0.98); filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes boot-glitch-top { 0%, 18%, 28%, 63%, 72%, 100% { opacity: 0; transform: none; } 19%, 27% { opacity: 0.95; transform: translateX(18px); } 64%, 71% { opacity: 0.8; transform: translateX(-10px); } }
@keyframes boot-glitch-bottom { 0%, 25%, 34%, 70%, 79%, 100% { opacity: 0; transform: none; } 26%, 33% { opacity: 0.9; transform: translateX(-15px); } 71%, 78% { opacity: 0.8; transform: translateX(8px); } }
@keyframes boot-strike { to { transform: scaleX(1); } }
@keyframes boot-actions-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes boot-side-in { from { opacity: 0; transform: translate(-8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes boot-data-pop { 0% { opacity: 0; transform: translateY(7px); } 22%, 74% { opacity: 0.92; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes boot-slab-in { to { transform: skewX(-12deg) translateX(0); } }
@keyframes boot-slab-out { to { transform: skewX(-12deg) translateX(122%); } }
@keyframes boot-slab-text { to { opacity: 1; transform: skewX(12deg) translate(-50%, -50%) translateX(0); } }
@keyframes boot-slab-text-out { to { opacity: 0; transform: skewX(12deg) translate(-50%, -50%) translateX(20px); } }
@keyframes boot-ready-on { 0% { opacity: 0; } 3% { opacity: 1; background: var(--boot-paper); color: var(--boot-ink); } 25% { background: var(--boot-ink); color: var(--boot-paper); } 40% { background: var(--boot-orange); color: var(--boot-ink); } 55%, 100% { opacity: 1; background: var(--boot-paper); color: var(--boot-ink); } }
@keyframes boot-scene-reveal {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, -8% 100%); }
  to { clip-path: polygon(108% 0, 108% 0, 100% 100%, 100% 100%); }
}
@keyframes boot-edge-reveal {
  from { transform: translateX(0) skewX(-7deg); }
  to { transform: translateX(108vw) skewX(-7deg); }
}
.boot-leave .boot-scene {
  animation: boot-scene-reveal 0.72s cubic-bezier(0.72, 0.02, 0.18, 1) forwards;
}
.boot-leave .boot-edge {
  opacity: 1;
  animation: boot-edge-reveal 0.72s cubic-bezier(0.72, 0.02, 0.18, 1) forwards;
}
@media (max-width: 760px) {
  .boot-frame { inset: 14px; }
  .boot-meta { left: 28px; right: 28px; top: 30px; }
  .boot-brand { left: 8vw; top: 13vh; }
  .boot-side { display: none; }
  .boot-rail { left: 8vw; right: 8vw; }
  .boot-hero { left: 8vw; top: 36vh; }
  .boot-hero h1 { font-size: clamp(64px, 22vw, 116px); }
  .boot-strike { left: 7.8vw; top: 54.5vh; width: 72vw; }
  .boot-actions { left: 8vw; top: 68vh; max-width: 80vw; }
  .boot-slab { width: 78vw; }
  .boot-slabcopy { left: 50%; right: auto; top: 50%; width: 58vw; min-width: 0; }
  .boot-slabcopy h2 { font-size: 12vw; }
  .boot-ready { padding: 0 8vw; grid-template-columns: 1fr; }
  .boot-ready-num { position: absolute; right: 7vw; bottom: 18vh; opacity: 0.12; }
  .boot-corner { right: 28px; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #bootIntro { display: none; }
}