/* DC-Lab Redesign — BOOT preloader: interior render-engine "thinking" (V-Ray VFB)
   hidden message: while you wait, the very program taught here finishes a production render */

.preloader{background:radial-gradient(125% 95% at 50% 36%,#11192c 0%,#0a0e16 58%,#070a11 100%)}

.boot{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,3vw,34px);width:min(92vw,520px)}

/* render viewport */
.boot__vp{position:relative;width:100%;aspect-ratio:240/160;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.85)}
.boot__wire{position:absolute;inset:0;width:100%;height:100%;display:block}
.boot__wire>*{fill:none;stroke:rgba(125,224,214,.55);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:bootDraw 1.05s ease forwards}
@keyframes bootDraw{to{stroke-dashoffset:0}}

/* render buckets sweeping the frame */
.boot__buckets{position:absolute;inset:0;pointer-events:none}
.boot__bk{position:absolute;box-sizing:border-box;border:1px solid transparent;background:transparent;
  transition:background .28s ease,border-color .15s ease,box-shadow .15s ease}
.boot__bk.is-render{border-color:rgba(150,238,228,.95);
  box-shadow:0 0 10px rgba(18,181,168,.75),inset 0 0 9px rgba(18,181,168,.4)}
.boot__bk.is-done{background:rgba(18,181,168,.13);border-color:rgba(125,224,214,.1)}

/* huge floating percentage */
.boot__pct{font-family:var(--ff-display);font-weight:800;line-height:.9;color:#fff;
  font-size:clamp(54px,12vw,92px);letter-spacing:-.03em;display:flex;align-items:flex-start;gap:.04em;
  font-variant-numeric:tabular-nums;text-shadow:0 8px 40px rgba(18,181,168,.25)}
.boot__pct i{font-size:.32em;font-style:normal;color:rgba(125,224,214,.92);margin-top:.18em}

/* glass VFB readout */
.boot__readout{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px 12px;
  padding:10px 18px;border-radius:100px;backdrop-filter:blur(10px);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  font:700 11px/1 var(--ff-text),monospace;letter-spacing:.1em;text-transform:uppercase}
.boot__brand{color:#7de0d6;font-weight:800}
.boot__stat{color:rgba(220,230,245,.62);font-variant-numeric:tabular-nums}
.boot__sep{width:4px;height:4px;border-radius:50%;background:rgba(125,224,214,.5)}
.boot__status{color:rgba(125,224,214,.92)}
.boot.is-complete .boot__status{color:#b6f2ea}
.boot.is-complete .boot__pct i{color:#b6f2ea}

.boot__logo{font-family:var(--ff-display);font-weight:700;font-size:clamp(1rem,2.4vw,1.3rem);
  letter-spacing:-.02em;color:rgba(255,255,255,.72)}
.boot__logo b{color:var(--teal)}

@media (max-width:560px){.boot{width:88vw;gap:22px}}