/* ══════════════════════════════════════════════════════════════
   Boot Loader — Futuristic Industrial Dashboard Theme
   Nemi Digital Twin
══════════════════════════════════════════════════════════════ */

#dt-boot-loader {
  position: fixed; inset: 0; z-index: 99999;
  overflow: hidden;
  transition: opacity .65s ease, visibility .65s ease;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(233,242,238,.7) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 5%  5%,  rgba(221,234,227,.55) 0%, transparent 45%),
    radial-gradient(ellipse 40% 45% at 95% 5%,  rgba(221,234,227,.55) 0%, transparent 45%),
    radial-gradient(ellipse 35% 35% at 8%  95%, rgba(227,238,232,.40) 0%, transparent 40%),
    radial-gradient(ellipse 35% 35% at 92% 95%, rgba(227,238,232,.40) 0%, transparent 40%),
    linear-gradient(175deg, #e3eee9 0%, #f2f7f4 30%, #f8fbfa 55%, #f2f7f4 80%, #e3eee9 100%);
}
#dt-boot-loader.bl-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── Canvas (background grid + particle wave) ───────────────────── */
.bl-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SIDE SCAFFOLD TOWERS — 4-column perspective industrial lattice
══════════════════════════════════════════════════════════════════ */
.bl-scaffold {
  position: absolute; top: 0; bottom: 0;
  width: 280px; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.bl-scaffold-l { left: 0; }
.bl-scaffold-r { right: 0; transform: scaleX(-1); }
.bl-scaffold svg { width: 100%; height: 100%; display: block; }
/* Lighting: bright edge on the near face */
.bl-scaffold-l::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(to right, rgba(227,238,232,.55), transparent);
  z-index: 2;
}
/* Top / bottom fade */
.bl-scaffold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(233,242,238,.95) 0%,
    transparent 12%,
    transparent 88%,
    rgba(233,242,238,.95) 100%
  );
  pointer-events: none; z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════
   TOP-LEFT TELEMETRY
══════════════════════════════════════════════════════════════════ */
.bl-data {
  position: absolute; top: 28px; left: 36px; z-index: 3;
  font-family: 'Courier New', monospace;
  font-size: .68rem; line-height: 1.85;
  color: rgba(45,220,127,.70);
  user-select: none;
}
.bl-data-head {
  font-weight: 700; font-size: .74rem; letter-spacing: 1.2px;
  color: rgba(46,74,62,.88);
}
.bl-cyan  { color: #2cdd7f; font-weight: 700; }
.bl-telemetry { margin-top: 4px; opacity: .72; }

/* ══════════════════════════════════════════════════════════════════
   TOP-RIGHT PROFILE ICON
══════════════════════════════════════════════════════════════════ */
.bl-profile {
  position: absolute; top: 22px; right: 32px; z-index: 3;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.bl-profile-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(44,221,127,.38);
  box-shadow: 0 0 0 4px rgba(44,221,127,.1), 0 0 20px rgba(44,221,127,.2);
  animation: bl-profile-pulse 3s ease-in-out infinite;
}
@keyframes bl-profile-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(44,221,127,.1), 0 0 20px rgba(44,221,127,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(44,221,127,.2), 0 0 35px rgba(44,221,127,.35); }
}
.bl-profile-icon {
  font-size: 1.7rem; position: relative; z-index: 1;
  filter: drop-shadow(0 0 8px rgba(44,221,127,.4));
}

/* ══════════════════════════════════════════════════════════════════
   CENTRAL ICOSAHEDRON — SVG star-hexagram geometric structure
══════════════════════════════════════════════════════════════════ */
.bl-struct {
  position: absolute;
  top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: 540px; height: 540px;
  z-index: 2; pointer-events: none;
}
.bl-icosa-svg {
  width: 100%; height: 100%;
  overflow: visible;
  animation: bl-icosa-spin 120s linear infinite;
}
@keyframes bl-icosa-spin { to { transform: rotate(360deg); } }

.bl-icosa-halo {
  animation: bl-halo-pulse 3.5s ease-in-out infinite;
}
@keyframes bl-halo-pulse {
  0%,100% { opacity: .40; }
  50%      { opacity: .70; }
}
.bl-icosa-core {
  animation: bl-core-breathe 2.8s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes bl-core-breathe {
  0%,100% { opacity: .85; transform: scale(1);    }
  50%      { opacity: 1;   transform: scale(1.12); }
}
.bl-icosa-orb {
  animation: bl-orb-pulse 2.8s ease-in-out infinite;
}
@keyframes bl-orb-pulse {
  0%,100% { opacity: .90; }
  50%      { opacity: 1;   }
}


/* ══════════════════════════════════════════════════════════════════
   BRAND TEXT — overlaid inside the central structure
══════════════════════════════════════════════════════════════════ */
.bl-brand {
  position: absolute;
  top: 44%; left: 50%;
  transform: translate(-50%, 62px);
  text-align: center; z-index: 5;
  white-space: nowrap;
}
.bl-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2.0rem; font-weight: 800; letter-spacing: 7px;
  color: #233930;
  text-shadow: 0 0 28px rgba(208,227,218,.55), 0 1px 0 rgba(255,255,255,.6);
  animation: bl-title-breathe 4.5s ease-in-out infinite;
}
@keyframes bl-title-breathe {
  0%,100% { color: #233930; text-shadow: 0 0 24px rgba(139,236,184,.45), 0 1px 0 rgba(255,255,255,.6); }
  50%      { color: #2cdd7f; text-shadow: 0 0 46px rgba(104,231,163,.70), 0 1px 0 rgba(255,255,255,.7); }
}
.bl-sub {
  font-size: .60rem; letter-spacing: 3.8px; font-weight: 500;
  color: rgba(47,76,64,.62); margin-top: 8px;
  text-shadow: 0 0 12px rgba(196,219,208,.40);
}

/* ══════════════════════════════════════════════════════════════════
   PROGRESS BAR (bottom-center)
══════════════════════════════════════════════════════════════════ */
.bl-bar-wrap {
  position: absolute;
  bottom: 110px; left: 50%;
  transform: translateX(-50%);
  width: 340px; z-index: 3;
}
.bl-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bl-bar-label { font-size: .7rem; color: rgba(44,221,127,.62); letter-spacing: 1px; font-weight: 600; }
.bl-pct { font-size: .92rem; font-weight: 700; color: #2cdd7f; font-family: 'Courier New', monospace; }
.bl-bar {
  height: 5px; background: rgba(44,221,127,.1); border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(44,221,127,.2);
}
.bl-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2cdd7f, #2cdd7f, #2cdd7f);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(44,221,127,.65);
  animation: bl-prog 1.9s cubic-bezier(.38,0,.18,1) forwards;
}
@keyframes bl-prog { 0%{width:0%} 28%{width:40%} 65%{width:72%} 88%{width:90%} 100%{width:100%} }
.bl-status-lbl { font-size: .72rem; color: rgba(44,221,127,.52); letter-spacing: .04em; margin-top: 9px; }
.bl-dots::after { content: ''; animation: bl-dot 1.2s steps(4,end) infinite; }
@keyframes bl-dot { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }

/* ── Stats row ──────────────────────────────────────────────────── */
.bl-stats {
  position: absolute;
  bottom: 75px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 30px; z-index: 3;
}
.bl-stat { font-size: .68rem; color: rgba(44,221,127,.62); display: flex; align-items: center; gap: 7px; letter-spacing: .04em; }
.bl-stat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g, #2cdd7f);
  box-shadow: 0 0 8px var(--g, #2cdd7f);
  animation: bl-blink 1.5s ease-in-out infinite;
}
.bl-stats .bl-stat:nth-child(1) .bl-stat-dot { --g:#00cc88; animation-delay:0s; }
.bl-stats .bl-stat:nth-child(2) .bl-stat-dot { --g:#2cdd7f; animation-delay:.4s; }
.bl-stats .bl-stat:nth-child(3) .bl-stat-dot { --g:#6de7d3; animation-delay:.8s; }
@keyframes bl-blink { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }

/* ── Bottom process list ─────────────────────────────────────────── */
.bl-process {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  text-align: center;
  font-family: 'Courier New', monospace; font-size: .72rem;
  color: rgba(44,221,127,.62); line-height: 2;
  white-space: nowrap; z-index: 3;
}
.bl-ok { color: #2cdd7f; font-weight: 700; }