/* Vanik wake-boot — moodboard "Awakening System" stages (web chat). */

.wake-boot{
  --wb-bg:#0F172A;
  --wb-panel:#1E293B;
  --wb-blue:#3B82F6;
  --wb-hi:#60A5FA;
  --wb-ok:#22C55E;
  --wb-muted:#94A3B8;
  --wb-line:#334155;
  box-sizing:border-box;
  width:min(100%, 22rem);
  margin:.15rem 0 .35rem;
  padding:.85rem .95rem 1rem;
  border-radius:14px;
  background:linear-gradient(165deg, var(--wb-bg) 0%, #111827 100%);
  border:1px solid color-mix(in srgb, var(--wb-blue) 35%, transparent);
  color:#E2E8F0;
  font-family:var(--font-data, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  overflow:hidden;
}
.wake-boot *,.wake-boot *::before,.wake-boot *::after{ box-sizing:border-box; }

.wake-boot__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-bottom:.55rem;
}
.wake-boot__kicker{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wb-hi); font-weight:600;
}
.wake-boot__eta{ font-size:.72rem; color:var(--wb-muted); white-space:nowrap; }

.wake-boot__stage-title{
  font-size:.92rem; font-weight:600; color:#F8FAFC; margin:0 0 .15rem;
  letter-spacing:.01em;
}
.wake-boot__stage-desc{
  font-size:.75rem; color:var(--wb-muted); margin:0 0 .7rem; line-height:1.35;
}

.wake-boot__row{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:.75rem;
  align-items:center;
}
@media (max-width:420px){
  .wake-boot__row{ grid-template-columns:1fr; }
}

.wake-boot__icon{
  width:5.5rem; height:5.5rem; margin:0 auto;
  border-radius:12px;
  background:var(--wb-panel);
  border:1px solid var(--wb-line);
  display:grid; place-items:center;
  position:relative;
}
.wake-boot__icon svg{ width:3.6rem; height:3.6rem; display:block; overflow:visible; }

.wake-boot__log{
  min-height:5.5rem;
  padding:.45rem .55rem;
  border-radius:10px;
  background:rgba(15,23,42,.65);
  border:1px solid var(--wb-line);
  font-size:.68rem; line-height:1.45;
  color:var(--wb-muted);
}
.wake-boot__log-line{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wake-boot__log-line.is-done{ color:#CBD5E1; }
.wake-boot__log-line.is-active{ color:var(--wb-hi); }
.wake-boot__log-line.is-ok{ color:var(--wb-ok); font-weight:600; }

.wake-boot__bar{
  margin-top:.75rem;
  height:6px;
  border-radius:999px;
  background:var(--wb-panel);
  border:1px solid var(--wb-line);
  overflow:hidden;
}
.wake-boot__bar-fill{
  height:100%; width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--wb-blue), var(--wb-hi));
  box-shadow:0 0 12px color-mix(in srgb, var(--wb-blue) 55%, transparent);
  transition:width .35s ease-out;
}
.wake-boot.is-ready .wake-boot__bar-fill{
  background:linear-gradient(90deg, #16A34A, var(--wb-ok));
}

.wake-boot__pct{
  margin-top:.35rem;
  display:flex; justify-content:space-between; gap:.5rem;
  font-size:.68rem; color:var(--wb-muted);
}
.wake-boot.is-ready .wake-boot__pct-val{ color:var(--wb-ok); font-weight:600; }

/* —— SVG motion —— */
@media (prefers-reduced-motion: no-preference){
  .wake-boot__ring{ transform-origin:32px 32px; animation:wb-spin 1.4s linear infinite; }
  .wake-boot__ring-track{ opacity:.25; }
  .wake-boot__star{ transform-origin:32px 32px; animation:wb-pulse 1.6s ease-in-out infinite; }
  .wake-boot__layer{ animation:wb-layer-in .55s ease-out both; }
  .wake-boot__cube{ animation:wb-cube-in .7s ease-out both; }
  .wake-boot__orbit{ transform-origin:32px 32px; animation:wb-spin 3.2s linear infinite; }
  .wake-boot__orbit--rev{ animation-direction:reverse; animation-duration:4.2s; }
  .wake-boot__node{ animation:wb-pulse 1.2s ease-in-out infinite; }
  .wake-boot__check{ animation:wb-pop .45s ease-out both; }
  .wake-boot__mascot{ animation:wb-pop .55s cubic-bezier(.2,1.2,.3,1) both; }
}
@keyframes wb-spin{ to{ transform:rotate(360deg); } }
@keyframes wb-pulse{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
@keyframes wb-layer-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes wb-cube-in{
  from{ opacity:0; transform:scale(.7); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes wb-pop{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}