/* ============================================================
   BOOT SCREEN — launching an application, not loading a page.
============================================================ */

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #060a10;
  color: var(--fg-primary);
}

/* subtle grid backdrop */
.boot-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(238, 242, 247, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 242, 247, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.boot-glow {
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 999px;
  filter: blur(60px);
  animation: boot-glow 5s ease-in-out infinite;
}

.boot-glow-orange { right: -8rem; top: 4rem; background: rgba(255, 107, 53, .12); }
.boot-glow-blue { bottom: -10rem; left: -8rem; background: rgba(0, 212, 255, .1); animation-delay: -2.4s; }

.boot-shell {
  position: relative;
  width: min(30rem, calc(100% - 3rem));
  animation: boot-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}

.boot-brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.8rem;
}

.boot-brand-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(255, 107, 53, .65);
  border-radius: .8rem;
  color: var(--accent-orange);
  font: 700 1.1rem/1 var(--font-heading);
  box-shadow: 0 0 24px rgba(255, 107, 53, .2), inset 0 0 18px rgba(255, 107, 53, .08);
}

.boot-title {
  font: 700 clamp(1.6rem, 4vw, 2.3rem)/1 var(--font-heading);
  letter-spacing: -.055em;
  animation: boot-glitch 2.8s steps(1, end) infinite;
}

.boot-subtitle {
  margin-top: .35rem;
  color: var(--fg-muted);
  font: .72rem/1.2 var(--font-mono);
  letter-spacing: .04em;
}

/* ---- Progress bar: ABOVE the initializing box, connected to boot ---- */
.boot-progress {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.1rem;
}

.boot-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--border-subtle);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .12);
}

.boot-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-cyan));
  box-shadow: 0 0 14px rgba(0, 212, 255, .55);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.boot-progress-pct {
  min-width: 3ch;
  text-align: right;
  font: 500 .62rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--accent-cyan);
}

/* ---- Terminal box ---- */
.boot-terminal {
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, .28);
  border-radius: 1.1rem;
  background: rgba(10, 15, 22, .88);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .4), 0 0 50px rgba(0, 212, 255, .07);
  backdrop-filter: blur(14px);
}

.boot-terminal-bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(238, 242, 247, .1);
  color: rgba(168, 184, 204, .75);
  font: .6rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.boot-terminal-bar span {
  width: .4rem;
  height: .4rem;
  border-radius: 999px;
  background: rgba(238, 242, 247, .3);
}

.boot-terminal-bar span:first-child { background: var(--accent-orange); }
.boot-terminal-bar span:nth-child(2) { background: var(--accent-cyan); }

.boot-terminal-bar b { margin-left: .45rem; font-weight: 400; }

.boot-lines { min-height: 8.4rem; padding: 1.1rem 1.2rem 1.3rem; }

.boot-line {
  display: flex;
  align-items: center;
  min-height: 1.45rem;
  color: rgba(168, 184, 204, .4);
  font: .72rem/1.4 var(--font-mono);
  opacity: 0;
  transform: translateY(5px);
}

.boot-line.is-visible {
  animation: boot-rise .35s ease forwards;
  color: rgba(238, 242, 247, .8);
}

.boot-line:last-child.is-visible { color: var(--accent-cyan); }

.boot-prompt { width: 1.2rem; color: var(--accent-orange); }

.boot-ellipsis { display: inline-flex; width: 1.55em; margin-left: .08rem; }

.boot-ellipsis i {
  font-style: normal;
  opacity: 0;
  transition: opacity .12s ease;
}

.boot-line.is-visible .boot-ellipsis i { animation: boot-dot .45s ease forwards; }
.boot-line.is-visible .boot-ellipsis i:nth-child(2) { animation-delay: .11s; }
.boot-line.is-visible .boot-ellipsis i:nth-child(3) { animation-delay: .22s; }

.boot-cursor {
  display: inline-block;
  width: .38rem;
  height: .9rem;
  margin-left: .35rem;
  background: var(--accent-orange);
  animation: boot-cursor .8s steps(1) infinite;
}

.boot-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  color: rgba(168, 184, 204, .6);
  font: .58rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.boot-status span {
  width: .35rem;
  height: .35rem;
  border-radius: 999px;
  background: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan);
}

.boot-status b { margin-left: auto; color: rgba(255, 107, 53, .7); font-weight: 400; }

/* ---- exit transition ---- */
.boot-screen.is-exiting {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* page content stays hidden while the boot screen owns the stage */
body.is-booting main,
body.is-booting .nav,
body.is-booting .footer { visibility: hidden; }

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

@keyframes boot-glow {
  0%, 100% { opacity: .42; transform: scale(.96); }
  50% { opacity: .7; transform: scale(1.04); }
}

@keyframes boot-cursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes boot-dot {
  to { opacity: 1; }
}

@keyframes boot-glitch {
  0%, 92%, 100% { transform: translate3d(0, 0, 0); text-shadow: none; }
  93% { transform: translate3d(2px, -1px, 0) skewX(-1deg); text-shadow: -2px 0 rgba(0, 212, 255, .7), 2px 0 rgba(255, 107, 53, .7); }
  94% { transform: translate3d(-2px, 1px, 0) skewX(1deg); text-shadow: 2px 0 rgba(0, 212, 255, .7), -2px 0 rgba(255, 107, 53, .7); }
  96% { transform: translate3d(0, 0, 0); text-shadow: none; }
}