/* ===== Old-School ZEITFRAKTALE Loader ===== */
:root{
  --boot-fg: #eaeaea;
  --boot-fg-dim: #bfc3c8;
  --boot-bg: #0b0b0b;
  --boot-border: #404040;
  --boot-accent: #cfd3d8;
}

.boot{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: radial-gradient(900px 600px at 50% 60%, rgba(255,255,255,.04), rgba(0,0,0,.92)), var(--boot-bg);
  color: var(--boot-fg);
  overflow: hidden;
  font-family: 'Restlicht', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

/* Sterne / Raumrauschen */
.boot-stars, .boot-stars::before, .boot-stars::after{
  position:absolute; inset:-15%; content:""; pointer-events:none;
}
.boot-stars{
  background:
    radial-gradient(1200px 800px at 50% 60%, rgba(0, 0, 0, 0.05), transparent 60%),
    radial-gradient(900px 600px  at 20% 20%, rgba(0, 0, 0, 0.03), transparent 70%);
  opacity:.5;
  animation: bootDrift 16s linear infinite;
  filter: saturate(.75);
}
.boot-stars::before{
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/></filter>\
  <rect width='128' height='128' filter='url(%23n)' opacity='0.18'/></svg>");
  background-size:256px 256px; mix-blend-mode:screen; opacity:.08;
}
.boot-stars::after{
  background: radial-gradient(circle at 40% 55%, rgba(255,255,255,.05), transparent 52%);
  filter: blur(2px);
}
@keyframes bootDrift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-3%, -2%, 0)}
  100%{transform:translate3d(0,0,0)}
}

/* Loader-Box (kleiner Terminal) */
.boot-box{
  position: relative;
  width: min(600px, 92vw);
  background: rgba(0,0,0,.70);
  border: 1px solid rgba(200,200,210,.28);
  border-radius: 12px;
  box-shadow: 0 14px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  animation: bootPulse 3.8s ease-in-out infinite;
}
@keyframes bootPulse{
  0%  { transform: translateZ(0) scale(1);   box-shadow:0 14px 60px rgba(0,0,0,.6) }
  50% { transform: translateZ(0) scale(1.01);box-shadow:0 18px 72px rgba(0,0,0,.64) }
  100%{ transform: translateZ(0) scale(1);   box-shadow:0 14px 60px rgba(0,0,0,.6) }
}

.boot-head{
  display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.boot-head .dots span{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#666;margin-right:6px;
}
.boot-head .dots span:nth-child(2){ background:#777 }
.boot-head .dots span:nth-child(3){ background:#888; margin-right:0 }
.boot-head .ttl{
  font-size:11px; letter-spacing:.08em; color:#aeb2b7; text-transform:uppercase;
}

.boot-body{
  padding: 12px 14px 14px 14px;
}

/* Boot-Zeile (Restlicht, schnell mit … und leichtem Glitch) */
.boot-line{
  font-family:'Restlicht', ui-monospace, monospace;
  font-size: 9px; letter-spacing:.06em; color: var(--boot-fg);
  margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  position: relative;
}
.boot-line::after{
  /* animierte "..." */
  content: ' …';
  animation: dots 1.2s steps(3,end) infinite;
}
@keyframes dots{
  0%{content:' …'}
  33%{content:' ……'}
  66%{content:' ………'}
  100%{content:' …'}
}
/* feiner Glitch */
.boot-line.glitch{
  animation: glitchJitter 2.6s ease-in-out infinite;
}
@keyframes glitchJitter{
  0%,100% { text-shadow: none; transform: translateX(0); }
  12%     { text-shadow: 0 0 0 rgba(255,255,255,0.0); transform: translateX(-0.2px) }
  13%     { text-shadow: 0 0 0 rgba(255,255,255,0.0); transform: translateX( 0.2px) }
  14%     { text-shadow: none; transform: translateX(0) }
}

/* Progressbar: rechts -> links */
.boot-bar{
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
/* entweder ganz ohne Transition (JS macht die Animation) */
.boot-bar-fill{
  height:100%; width:0%;
  background: repeating-linear-gradient(90deg,#c3c6cc 0 10px,#b2b6bc 10px 20px);
  box-shadow: 0 0 12px rgba(255,255,255,.18) inset;
  /* transition: none; */          /* <- Option A: komplett JS */
  transition: width .45s steps(12,end); /* <- Option B: sichtbar langsamer */

}
.boot-percent{
  margin-top: 8px; font-size: 11px; opacity: .85; letter-spacing:.03em; color: var(--boot-fg-dim);
}

/* Minilog (klein, Restlicht) */
.boot-mini{
  margin-top: 10px; font-size: 9px; color: var(--boot-fg-dim); opacity:.9;
  font-family:'Restlicht', ui-monospace, monospace;
}

/* Ausblenden nach Boot */
.boot.boot--hide{
  animation: bootOut .6s ease forwards;
}
@keyframes bootOut{
  to{ opacity: 0; visibility: hidden; }
}

/* Loader-Canvas sichtbar & gleicher Look wie Stage */
.boot{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  /* gleiches Grundschema wie .stage + leichter radialer Lift */
  background:
    radial-gradient(1200px 600px at 20% 0%, #0a0c12 0%, transparent 60%),
    linear-gradient(#050507,#040406);
  color: #eaeaea;
}

/* Boot-Box über der Matrix */
.boot-box{
  position: relative;
  width: min(520px, 92vw);
  border: 1px solid rgba(200,200,210,.28);
  border-radius: 12px;
  padding: 16px 16px 12px;
  background: rgba(0,0,0,.66);
  box-shadow: 0 12px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  z-index: 1; /* Box liegt über dem Boot-Canvas (z-index:0) */
}