html.boot-skip #boot { display: none; }
html.boot-on, html.boot-on body { overflow: hidden; }

#boot {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  background: var(--surface-void); color: var(--text-body); font-family: var(--font-core);
  opacity: 1; transition: opacity 220ms var(--ease-out);
}
#boot[data-phase="done"] { opacity: 0; visibility: hidden; pointer-events: none; }

.bt-stars { position: absolute; inset: 0; opacity: 0; }
.bt-stars i { position: absolute; inset: 0; background: var(--starfield); opacity: var(--starfield-opacity); }

.bt-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-10);
}

.bt-hex { position: relative; width: 86px; height: 94px; clip-path: var(--hex-clip); background: var(--accent-soft); opacity: 0; }
.bt-hex u { position: absolute; inset: 1.5px; clip-path: var(--hex-clip); background: var(--surface-void); }
.bt-hex b { position: absolute; inset: 9px; clip-path: var(--hex-clip); background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%; }
.bt-hex s { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--accent-ink); transform: var(--diamond); opacity: 0; }

.bt-word {
  display: flex; margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-bold);
  letter-spacing: var(--track-tight); line-height: var(--leading-tight); color: var(--text-body);
}
.bt-word span { opacity: 0; }

.bt-sub { display: flex; align-items: center; gap: var(--space-8); width: var(--bt-sub-w, 320px); min-width: max-content; opacity: 0; }
.bt-sub hr { flex: 1; min-width: 20px; height: 1px; border: 0; margin: 0; background: var(--line-edge); transform: scaleX(0); }
.bt-sub hr:first-of-type { transform-origin: 100% 50%; }
.bt-sub hr:last-of-type { transform-origin: 0 50%; }
.bt-sub em {
  font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: var(--track-stencil);
  text-transform: uppercase; color: var(--text-mute); white-space: nowrap;
}

.bt-tele {
  display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0;
  width: var(--bt-word-w, 320px); height: 46px;
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--track-normal); opacity: 0;
}
.bt-tele li {
  display: flex; align-items: center; gap: var(--space-4); list-style: none; white-space: nowrap;
  color: var(--text-mute); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-linear), color var(--dur-fast) var(--ease-linear);
}
.bt-tele li[data-age] { opacity: 1; }
.bt-tele li[data-age="0"] { color: var(--text-body); }
.bt-tele li[data-age="1"] { color: var(--text-dim); }
.bt-tele li[data-age="2"] { color: var(--text-mute); opacity: .6; }
.bt-tele li em { font-style: normal; color: var(--accent); opacity: .7; }

.bt-edge {
  position: absolute; display: flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: var(--track-stencil); text-transform: uppercase; color: var(--text-mute);
  opacity: 0; white-space: nowrap;
}
.bt-edge[data-at="tl"] { left: var(--space-12); top: var(--space-12); }
.bt-edge[data-at="tr"] { right: var(--space-12); top: var(--space-12); }
.bt-edge[data-at="bl"] { left: var(--space-12); bottom: var(--space-12); }
.bt-edge[data-at="br"] { right: var(--space-12); bottom: var(--space-12); }

.bt-pill {
  position: relative; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-3) var(--space-6); clip-path: var(--chamfer-sm);
  background: var(--surface-panel); border: var(--border-hair);
}
.bt-dia { position: relative; width: 7px; height: 7px; background: var(--signal-ok); transform: var(--diamond); }

.bt-rack { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bt-rack span { position: absolute; left: 0; right: 0; top: var(--h-topbar); height: 1px; background: var(--line-hair); transform: scaleX(0); }
.bt-rack u { position: absolute; left: 0; right: 0; top: 0; height: var(--h-topbar); background: var(--surface-shell); opacity: 0; }

.is-running .bt-stars { animation: bt-fade 420ms var(--ease-out) 60ms forwards; }
.is-running .bt-hex { animation: bt-fade 200ms var(--ease-out) 180ms forwards; }
.is-running .bt-hex b { animation: bt-fill 320ms var(--ease-out) 250ms forwards; }
.is-running .bt-hex s { animation: bt-fade 160ms var(--ease-out) 520ms forwards; }
.is-running .bt-word { animation: bt-fringe 460ms steps(1,end) 600ms forwards; }
.is-running .bt-word span { animation: bt-up 200ms var(--ease-out) forwards; }
.is-running .bt-sub { animation: bt-fade 240ms var(--ease-out) 740ms forwards; }
.is-running .bt-sub hr { animation: bt-draw 380ms var(--ease-out) 760ms forwards; }
.is-running .bt-tele { animation: bt-fade 240ms var(--ease-out) 820ms forwards; }
.is-running .bt-edge[data-at="tl"] { animation: bt-fade 300ms var(--ease-out) 880ms forwards; }
.is-running .bt-edge[data-at="tr"] { animation: bt-fade 300ms var(--ease-out) 940ms forwards; }
.is-running .bt-edge[data-at="bl"] { animation: bt-fade 300ms var(--ease-out) 1000ms forwards; }
.is-running .bt-edge[data-at="br"] { animation: bt-fade 300ms var(--ease-out) 1060ms forwards; }

#boot[data-phase="exit"] .bt-tele,
#boot[data-phase="exit"] .bt-edge,
#boot[data-phase="exit"] .bt-sub {
  animation: none; opacity: 0; transition: opacity 180ms var(--ease-out);
}
#boot[data-phase="exit"] .bt-rack { opacity: 1; }
#boot[data-phase="exit"] .bt-rack span { animation: bt-draw 260ms var(--ease-out) forwards; }
#boot[data-phase="exit"] .bt-rack u { animation: bt-fade 220ms var(--ease-out) 160ms forwards; }

@keyframes bt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-up { 0% { opacity: 0; } 45% { opacity: .4; } 100% { opacity: 1; } }
@keyframes bt-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bt-fringe {
  0% { transform: translateX(0); text-shadow: none; }
  10% { transform: translateX(1px); text-shadow: -2px 0 var(--signal-fail), 2px 0 var(--signal-work); }
  22% { transform: translateX(0); text-shadow: none; }
  52% { transform: translateX(-1px); text-shadow: 2px 0 var(--signal-fail); }
  62% { transform: translateX(0); text-shadow: none; }
  100% { transform: translateX(0); text-shadow: none; }
}
@keyframes bt-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 520px) {
  .bt-edge[data-at="bl"], .bt-edge[data-at="br"] { bottom: var(--space-8); }
  .bt-edge[data-at="tl"] span { display: none; }
  .bt-word { font-size: 52px; }
}