/* ============================================================
   WUNDERBAR · boot screen
   ASCII-луч: стоит на месте, но внутри бежит поток.
   Прогресс — тонкая линия сверху, проценты — внизу.
   Палитра сайта: #070707 / #f2f2f2, IBM Plex Mono.
   ============================================================ */

html.boot-lock, html.boot-lock body{overflow:hidden !important}

.boot{
  position:fixed; inset:0; z-index:9999;
  background:#070707;
  color:#f2f2f2;
  font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  overflow:hidden;
  transition:opacity .55s ease, transform .7s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.boot.done{opacity:0; transform:translateY(-14px); pointer-events:none}
.boot.jump{transform:scale(1.16); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.9,.2,1), opacity .5s ease}
.boot.gone{display:none}

.boot pre{
  position:absolute; top:0; left:0; margin:0;
  font-family:inherit; font-size:11px; line-height:11px;
  letter-spacing:0; white-space:pre; font-weight:400;
  user-select:none; pointer-events:none;
}
.boot-warp{position:absolute; inset:0; overflow:hidden}
.boot-warp pre{color:rgba(242,242,242,.22); animation:bootScroll .5s linear infinite; will-change:transform}
@keyframes bootScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.boot-base{color:rgba(242,242,242,.44)}
.boot-hot {color:#f2f2f2; text-shadow:0 0 7px rgba(242,242,242,.55), 0 0 22px rgba(242,242,242,.22)}

.boot-corner{
  position:absolute; font-size:11px; line-height:11px; letter-spacing:0;
  color:rgba(242,242,242,.4); pointer-events:none;
}
.boot-corner.tl{top:14px; left:16px}
.boot-corner.tr{top:14px; right:16px}
.boot-corner.bl{bottom:14px; left:16px}
.boot-corner.br{bottom:14px; right:16px}

.boot-bar{
  position:absolute; top:0; left:0; right:0; height:4px;
  background:rgba(242,242,242,.10);
  opacity:0; transition:opacity .4s ease;
}
.boot-bar.on{opacity:1}
.boot-bar i{
  display:block; height:100%; width:0%;
  background:#f2f2f2;
  border-right:2px solid #fff;
  box-shadow:0 0 12px rgba(242,242,242,.75), 0 0 30px rgba(242,242,242,.3);
  transition:width .16s linear;
}
.boot-bar .ticks{position:absolute; inset:0; display:flex; pointer-events:none}
.boot-bar .ticks span{flex:1; border-right:1px solid rgba(0,0,0,.9)}

.boot-foot{
  position:absolute; left:0; right:0; bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-align:center; pointer-events:none;
}
.boot-label{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(242,242,242,.92);
  text-shadow:0 0 10px rgba(242,242,242,.35);
}
.boot-gen{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,242,242,.92);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease;
  white-space:nowrap;
}
.boot-gen.on{opacity:.95; transform:none}
.boot-gen b{font-weight:400; color:#fff; text-shadow:0 0 12px rgba(255,255,255,.65)}
.boot-caret{display:inline-block; width:.6em; animation:bootBlink .7s steps(1) infinite}
@keyframes bootBlink{50%{opacity:0}}

/* очень лёгкая виньетка + строки, чтобы прелоадер жил в одном языке с сайтом */
.boot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.62) 100%);
  mix-blend-mode:multiply;
}

@media (max-width:700px){
  .boot pre{font-size:9px; line-height:9px}
  .boot-label,.boot-gen{font-size:9px; letter-spacing:.13em}
  .boot-corner{font-size:9px; line-height:9px}
}

@media (prefers-reduced-motion:reduce){
  .boot-warp pre{animation:none}
  .boot-caret{animation:none}
  .boot{transition:opacity .3s linear}
}