/* Boot screen and background-streaming indicator.
   Everything here must look right before boot.js runs: the reticle spins and
   the frame glows from pure CSS, the canvas warp joins once the module loads. */

/* No scrolling from first paint until the hangar has settled: the hangar
   behind the overlay can be taller than the window, and its arrival zoom
   briefly overflows the viewport. */
html.is-booting, html.is-booting body { overflow: hidden; overscroll-behavior: none; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0b1830 0%, #050a16 55%, #03060e 100%);
  color: var(--ink);
  /* The whole boot screen uses the display face, like the hangar labels. */
  font-family: var(--font-display);
  font-weight: 500;
  transition: opacity .6s ease;
}
.boot-warp { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Corner brackets and HUD captions: a cockpit canopy around the reticle. */
.boot-frame { position: absolute; inset: clamp(14px, 3vmin, 32px); pointer-events: none; }
.boot-frame i {
  position: absolute;
  width: clamp(22px, 4vmin, 44px);
  height: clamp(22px, 4vmin, 44px);
  border: 1px solid #6dcaff66;
  animation: boot-bracket 2.8s ease-in-out infinite;
}
.boot-frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.boot-frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.boot-frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.boot-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
@keyframes boot-bracket { 50% { border-color: #9fe3ffb0; } }

.boot-hud {
  position: absolute;
  top: clamp(24px, 4.5vmin, 46px);
  font-size: var(--label-sm);
  letter-spacing: 3px;
  color: #6f8fae;
}
.boot-hud { display: flex; gap: 14px; }
.boot-hud span:first-child { color: #6dcaff; }
.boot-hud-left { left: clamp(46px, 8vmin, 84px); }
.boot-hud-right { right: clamp(46px, 8vmin, 84px); }

.boot-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  transition: transform .7s cubic-bezier(.6, 0, .9, .4), opacity .5s ease, filter .6s ease;
}

/* --- Reticle ----------------------------------------------------------- */

.boot-reticle {
  position: relative;
  width: clamp(170px, 34vmin, 270px);
  aspect-ratio: 1;
}
.boot-reticle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.boot-reticle circle { fill: none; }
.boot-ticks {
  stroke: #7fb9e04d;
  stroke-width: 5;
  stroke-dasharray: .18 .82;
  transform-origin: 110px 110px;
  animation: boot-spin 40s linear infinite;
}
.boot-orbit {
  stroke: #6dcaff59;
  stroke-width: 1;
  stroke-dasharray: 18 7 3 7;
  transform-origin: 110px 110px;
  animation: boot-spin 11s linear infinite reverse;
}
.boot-track { stroke: #6dcaff1a; stroke-width: 3; }
.boot-arc {
  stroke: #80e3fa;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 110px 110px;
  filter: drop-shadow(0 0 6px #6dcaffcc);
}
.boot-head { transform-origin: 110px 110px; }
.boot-head circle { fill: #e9fbff; filter: drop-shadow(0 0 5px #9fe9ff) drop-shadow(0 0 12px #6dcaff); }

/* A radar sweep inside the ring. */
.boot-scan {
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 290deg, #6dcaff10 320deg, #80e3fa55 359deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
  mask: radial-gradient(circle, transparent 58%, #000 59%);
  animation: boot-spin 2.6s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

.boot-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(34px, 7vmin, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  color: #eaf8ff;
  text-shadow: 0 0 24px #6dcaff80;
}
.boot-readout small { margin-left: 3px; font-size: .36em; letter-spacing: 1px; color: #7fb4d8; }
.boot-dim { color: #6dcaff38; text-shadow: none; }

/* --- Captions and file log --------------------------------------------- */

.boot-brand {
  margin-top: clamp(18px, 3.4vmin, 30px);
  padding-left: .62em; /* Optically re-centre the trailing letter-spacing. */
  font-family: var(--font-display);
  font-size: clamp(15px, 2.4vmin, 20px);
  font-weight: 600;
  letter-spacing: .62em;
  color: #dff4ff;
}
.boot-status {
  min-height: 1.4em;
  margin-top: 10px;
  font-size: var(--label-md);
  letter-spacing: 2.6px;
  color: #80e3fa;
  text-align: center;
  animation: boot-blink 1.6s steps(2, jump-none) infinite;
}
@keyframes boot-blink { 50% { opacity: .62; } }

.boot-log {
  display: grid;
  gap: 7px;
  width: min(360px, calc(100vw - 32px));
  margin: clamp(16px, 3vmin, 26px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--label-sm);
  letter-spacing: 1.4px;
  font-variant-numeric: tabular-nums;
}
.boot-log li {
  --row-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  color: #7f97b1;
  transition: color .3s;
}
.boot-log li i { height: 1px; background: linear-gradient(90deg, #6dcaff 0 calc(var(--row-progress) * 100%), #6dcaff24 0); }
.boot-log li b { font-weight: 500; color: #58738f; }
.boot-log li[data-state='done'] { color: #c7e4f7; }
.boot-log li[data-state='done'] b { color: #78ddb5; }
.boot-log li[data-state='done'] i { background: #78ddb54d; }
.boot-log li[data-state='failed'] b { color: #edb480; }
.boot-log li[data-state='pending'] b { color: #8fb8d8; }

.boot-tip {
  position: absolute;
  bottom: clamp(24px, 5vmin, 48px);
  left: 16px;
  right: 16px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .4px;
  color: #8ea4bb;
  text-align: center;
  transition: opacity .35s ease, transform .35s ease;
}
.boot-tip::before { content: 'PILOT TIP'; margin-right: 12px; font-size: var(--label-sm); letter-spacing: 2px; color: var(--gold); }
.boot-tip.is-swapping { opacity: 0; transform: translateY(4px); }

/* --- Exit: lock on, jump, flash ---------------------------------------- */

.boot.is-complete .boot-arc { stroke: #bdf3ff; filter: drop-shadow(0 0 10px #80e3fa) drop-shadow(0 0 22px #6dcaff); }
.boot.is-complete .boot-status { animation: none; color: #bdf3ff; }
.boot.is-jumping .boot-core { transform: scale(1.6); opacity: 0; filter: blur(6px); }
.boot.is-jumping .boot-tip, .boot.is-jumping .boot-hud, .boot.is-jumping .boot-frame { opacity: 0; transition: opacity .3s; }
.boot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #bff0ff 30%, #6dcaff00 75%);
  opacity: 0;
  pointer-events: none;
}
.boot.is-leaving { opacity: 0; pointer-events: none; }
.boot.is-leaving::after { animation: boot-flash .65s ease-out both; }
@keyframes boot-flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }

/* --- Launch failure: flight control is not answering -------------------- */

.boot { --alarm: #ff4257; }
.boot-frame i, .boot-hud, .boot-hud span, .boot-brand, .boot-status, .boot-readout, .boot-log li, .boot-tip { transition: color .5s, border-color .5s, text-shadow .5s, opacity .35s ease, transform .35s ease; }
.boot-reticle circle { transition: stroke .5s, filter .5s; }

/* Scanlines and a pulsing red vignette over the whole cockpit. */
.boot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, #ff42570f 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 40%, #ff22404d 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.boot.is-failed::before { opacity: 1; animation: boot-alarm 1.4s ease-in-out infinite; }
@keyframes boot-alarm { 50% { opacity: .5; } }

.boot.is-failed .boot-frame i { border-color: var(--alarm); animation: boot-bracket-alarm .7s steps(2, jump-none) infinite; }
@keyframes boot-bracket-alarm { 50% { border-color: #ff425733; } }
.boot.is-failed .boot-hud { color: #ff8e9a; }
.boot.is-failed .boot-hud span:first-child { color: var(--alarm); }

.boot.is-failed .boot-ticks { stroke: #ff42574d; }
.boot.is-failed .boot-orbit { stroke: #ff425766; animation-duration: 3s; }
.boot.is-failed .boot-track { stroke: #ff42571f; }
.boot.is-failed .boot-arc { stroke: var(--alarm); filter: drop-shadow(0 0 8px #ff4257cc); animation: boot-flicker 2.2s linear infinite; }
.boot.is-failed .boot-head circle { fill: #ffd4d9; filter: drop-shadow(0 0 5px #ff6b7c) drop-shadow(0 0 12px var(--alarm)); }
.boot.is-failed .boot-scan { background: conic-gradient(from 0deg, transparent 0 290deg, #ff425714 320deg, #ff425777 359deg, transparent 360deg); animation-duration: 1.1s; }
@keyframes boot-flicker {
  0%, 7%, 11%, 44%, 55%, 100% { opacity: 1; }
  8% { opacity: .25; }
  46% { opacity: .1; }
  49% { opacity: .85; }
  52% { opacity: .35; }
}

.boot.is-failed .boot-readout { color: #ffd9dd; text-shadow: 0 0 24px #ff4257b0; animation: boot-glitch 2.4s steps(1) infinite; }
.boot.is-failed .boot-readout small { display: none; }
.boot.is-failed .boot-brand { color: #ffdfe3; animation: boot-glitch 3.1s steps(1) -1.2s infinite; }
/* Held frames (steps) read as a signal tearing, not an animation. */
@keyframes boot-glitch {
  0%, 10%, 54%, 100% { transform: none; clip-path: none; text-shadow: 0 0 18px #ff4257a0; }
  6% { transform: translate(-3px, 1px) skewX(-8deg); text-shadow: -3px 0 var(--alarm), 3px 0 #3be8ff; }
  8% { transform: translate(2px, -1px); text-shadow: 2px 0 var(--alarm), -2px 0 #3be8ff; }
  50% { transform: translateX(4px); clip-path: inset(38% 0 28% 0); text-shadow: -4px 0 var(--alarm), 4px 0 #3be8ff; }
  52% { transform: translateX(-2px); clip-path: inset(0 0 55% 0); }
}
.boot.is-failed .boot-status { color: var(--alarm); text-shadow: 0 0 12px #ff425780; animation: boot-blink .7s steps(2, jump-none) infinite; }
.boot.is-failed.is-retrying .boot-status { color: #ffb35c; text-shadow: 0 0 12px #ffb35c66; animation-duration: .35s; }
.boot.is-restored .boot-status { color: #78ddb5; animation: none; }

.boot.is-failed .boot-log li:not([data-critical]) { opacity: .45; }
.boot-log li[data-critical][data-state='failed'] { color: #ffb3bb; }
.boot-log li[data-critical][data-state='failed'] b { color: var(--alarm); }
.boot-log li[data-critical][data-state='failed'] i { background: #ff425766; }

.boot.is-failed .boot-tip { color: #dca7ae; }
.boot.is-failed .boot-tip::before { content: 'DIAGNOSTIC'; color: var(--alarm); }

/* The fault console types in below the file log. */
.boot-fault {
  display: grid;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  margin-top: clamp(14px, 2.6vmin, 22px);
  animation: boot-fault-in .35s ease-out both;
  transition: opacity .45s ease, transform .45s ease;
}
.boot-fault.is-leaving { opacity: 0; transform: translateY(6px); }
@keyframes boot-fault-in { from { opacity: 0; transform: translateY(-4px); } }
.boot-fault-log {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  list-style: none;
  border: 1px solid #ff425740;
  border-left: 2px solid var(--alarm);
  background: #2a060d8c;
  font-size: var(--label-sm);
  letter-spacing: 1.4px;
  transition: border-color .5s, background .5s;
}
.boot.is-restored .boot-fault-log { border-color: #78ddb540; border-left-color: #78ddb5; background: #06201a8c; }
.boot-fault-log li { display: grid; grid-template-columns: 1.6em auto 1fr auto; align-items: center; gap: 8px; color: #ffb3bb; }
.boot-fault-log li::before { content: '›'; color: #ff425799; }
.boot-fault-log li i { border-top: 1px dotted #ff425759; }
.boot-fault-log li b { font-weight: 600; color: var(--alarm); }
.boot-fault-log li.is-typing span::after { content: '▌'; color: var(--alarm); animation: boot-blink .5s steps(2, jump-none) infinite; }
.boot-fault-log li[data-kind='fatal'] { color: #ffdfe3; }
.boot-fault-log li[data-kind='fatal']::before { content: '!!'; color: var(--alarm); }
.boot-fault-log li[data-kind='fatal'] b { padding: 1px 6px; color: #fff; background: var(--alarm); }
.boot-fault-log li[data-kind='ok'] { color: #c7f5e2; }
.boot-fault-log li[data-kind='ok']::before { content: '✓'; color: #78ddb5; }
.boot-fault-log li[data-kind='ok'] b { color: #78ddb5; }
.boot-fault-log li[data-kind='ok'] i { border-color: #78ddb559; }

.boot-fault-count { min-height: 1.4em; font-size: var(--label-sm); letter-spacing: 2px; font-variant-numeric: tabular-nums; text-align: center; color: #d98a94; }

/* The fault console must stay clear of the DIAGNOSTIC line at the bottom:
   the cockpit rises, and on short (landscape phone) screens the file log,
   which the fault console repeats, gives way and the reticle shrinks. */
.boot.is-failed .boot-core { margin-bottom: clamp(48px, 12vmin, 110px); }
@media (max-height: 560px) {
  .boot.is-failed .boot-log { display: none; }
  .boot.is-failed .boot-reticle { width: clamp(96px, 26vh, 150px); }
  .boot.is-failed .boot-brand { margin-top: 10px; }
  .boot.is-failed .boot-fault { gap: 8px; margin-top: 10px; }
}

/* Every failed contact shakes the cockpit and flashes it red. */
.boot.is-jolted .boot-core { animation: boot-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes boot-shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(3px, -1px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); }
  40%, 60% { transform: translate(6px, -2px); }
}
.boot.is-jolted::after { background: radial-gradient(circle at 50% 50%, #ff4257 0%, #ff425766 35%, #ff425700 75%); animation: boot-flash-red .6s ease-out both; }
@keyframes boot-flash-red { 0% { opacity: 0; } 12% { opacity: .55; } 100% { opacity: 0; } }

/* The hangar drops out of warp as the boot screen fades. */
.hangar.is-arriving { animation: hangar-arrive 1s cubic-bezier(.16, .84, .3, 1) both; }
@keyframes hangar-arrive { from { opacity: 0; transform: scale(1.06); filter: blur(8px) brightness(1.6); } to { opacity: 1; transform: none; filter: none; } }

/* --- Background streaming indicator ------------------------------------ */

.stream-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
  transition: opacity .8s ease .4s;
}
.stream-track { height: 2px; background: #6dcaff14; }
.stream-track i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #6dcaff00, #6dcaff 60%, #e9fbff);
  box-shadow: 0 0 10px #6dcaffaa;
  transition: width .3s ease;
}
.stream-status > span {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 500;
  display: flex;
  gap: 12px;
  top: 8px;
  right: 16px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #7fa3c2;
}
.stream-status.is-done { opacity: 0; }

@media (max-width: 640px) {
  .boot-hud { display: none; }
  .boot-tip::before { display: block; margin: 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot, .boot-core, .boot-tip { transition: opacity .2s linear; }
  .hangar.is-arriving { animation: none; }
  .boot.is-failed::before, .boot.is-failed .boot-frame i, .boot.is-failed .boot-arc, .boot.is-failed .boot-readout, .boot.is-failed .boot-brand, .boot.is-failed .boot-status, .boot-fault { animation: none; }
}