/* ============================================================
   THE GILDED ORRERY — boot sequence.
   The instrument calibrating: rings swing out from the hub,
   the plate rule draws across, the wordmark takes its foil.
   Plays once per session; any input skips (hub/js/intro.js).
   ============================================================ */

.boot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, #14110c 0%, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-void) 100%);
  background-color: var(--ink-void);
  transition: opacity 0.5s var(--ease);
}
.boot.is-done { opacity: 0; pointer-events: none; }

.boot-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(90vw, 700px);
  aspect-ratio: 1 / 1;
  max-height: 74vh;
}

/* three rings, laid over, swinging out from the hub in sequence */
.boot-ring {
  position: absolute;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.05) rotateX(0deg);
  animation: boot-ring 1.5s var(--ease) both;
}
.boot-ring.r1 { width: 34%; height: 12%; animation-delay: 0.10s; }
.boot-ring.r2 { width: 62%; height: 22%; animation-delay: 0.24s; }
.boot-ring.r3 { width: 92%; height: 32%; animation-delay: 0.38s; }

@keyframes boot-ring {
  0%   { opacity: 0; transform: scale(0.06); }
  38%  { opacity: 1; }
  100% { opacity: 0.55; transform: scale(1); }
}

/* the hub of the instrument */
.boot-pip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-lit);
  box-shadow: 0 0 22px var(--brass);
  opacity: 0;
  animation: boot-pip 0.7s var(--ease) 0.05s both;
}
@keyframes boot-pip {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

.boot-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.boot-rule {
  height: 1px;
  width: min(56vw, 460px);
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--brass) 42%, var(--brass-lit) 50%, var(--brass) 58%, transparent);
  transform: scaleX(0);
  animation: boot-rule 1s var(--ease-cut) 0.5s both;
}
@keyframes boot-rule { to { transform: scaleX(1); } }

.boot-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0;
  animation: boot-rise 0.7s var(--ease) 0.95s both;
}

.boot-wordmark {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: var(--ivory);
  opacity: 0;
  animation: boot-rise 0.9s var(--ease) 1.2s both;
}
.boot-wordmark em {
  font-style: italic;
  font-weight: 600;
  background: var(--foil);
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: boot-foil 1.5s var(--ease) 1.5s both;
}
@keyframes boot-foil {
  from { background-position: 0 0; }
  to   { background-position: 78% 0; }
}

.boot-sub {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
  animation: boot-rise 0.7s var(--ease) 1.95s both;
}

@keyframes boot-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.boot-skip {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ash-dim);
  opacity: 0;
  animation: boot-rise 0.6s var(--ease) 1.1s both;
}