/* ============================================================
   Key 20 — BOOT CURTAIN
   Direction 02's terminal opening, used as the intro for the
   Direction 03 page. Types a status readout, counts the proof
   numbers up, then lifts to reveal the site.

   Same hard rule as the plain curtain: the page underneath is
   fully rendered the whole time. Every exit path — including the
   failure paths — removes this overlay.
   ============================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070a;
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.boot.up { transform: translateY(-100%); pointer-events: none; }

/* Blueprint grid, same language as direction 02. */
.boot::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
}

.boot__in {
  position: relative;
  width: min(560px, 88vw);
  padding: 0 4px;
}

.boot__logo {
  width: min(240px, 54vw);
  height: auto;
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(8px);
  animation: boot-fade .5s .05s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes boot-fade { to { opacity: 1; transform: none; } }

.boot__cmd {
  font-size: 13px;
  color: #4b5768;
  margin-bottom: 18px;
  min-height: 20px;
}
.boot__cmd .p { color: #f76518; }
.boot__caret {
  display: inline-block; width: 7px; height: 14px; vertical-align: -2px;
  background: #f76518; margin-left: 1px;
  animation: boot-blink 1.05s step-end infinite;
}
@keyframes boot-blink { 50% { opacity: 0; } }

.boot__rows { border-left: 2px solid #243040; padding-left: 16px; }
.boot__row {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: #7b8a9e; padding: 4px 0;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.boot__row.on { opacity: 1; transform: none; }
.boot__row .k { color: #4b5768; white-space: nowrap; }
.boot__row .fill { flex: 1; border-bottom: 1px dotted #243040; transform: translateY(-4px); min-width: 12px; }
.boot__row .v { color: #f76518; font-variant-numeric: tabular-nums; white-space: nowrap; }

.boot__done {
  margin-top: 20px; font-size: 12px; letter-spacing: .1em;
  color: #35d07f; opacity: 0; transition: opacity .3s;
}
.boot__done.on { opacity: 1; }

.boot__skip {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .1em; color: #3a4452;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 8px 14px;
}
.boot__skip:hover { color: #7b8a9e; }

html.boot-locked, html.boot-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  html.boot-locked, html.boot-locked body { overflow: auto; }
}

/* ---- return visit: logo flash only ----
   The command line, readout and READY are hidden rather than skipped in
   JS, so the layout doesn't jump and the logo stays optically centred. */
.boot--quick .boot__cmd,
.boot--quick .boot__rows,
.boot--quick .boot__done,
.boot--quick .boot__skip { display: none; }
.boot--quick .boot__logo { margin-bottom: 0; animation-duration: .38s; }
.boot--quick { transition-duration: .6s; }