/* ── Pack o' Jacks launch / loading overlay ───────────────────────────────── */

#boot-overlay{
  position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:26px;padding:24px;
  background:
    radial-gradient(circle at 15% 5%,rgba(215,25,32,.20),transparent 34%),
    radial-gradient(circle at 88% 92%,rgba(245,181,27,.18),transparent 32%),
    #17120f;
  opacity:1;transition:opacity .42s var(--ease),visibility .42s var(--ease);
}
#boot-overlay[hidden]{display:flex!important;opacity:0;visibility:hidden;pointer-events:none}

/* Stage: fixed square the orbit math is normalised against */
.boot-stage{position:relative;width:min(340px,76vw);aspect-ratio:1;display:grid;place-items:center}

.boot-glow{
  position:absolute;inset:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(215,25,32,.55),rgba(245,181,27,.20) 52%,transparent 70%);
  filter:blur(22px);animation:bootGlow 3.4s var(--ease) infinite;
}
/* Light plate so the brand mark reads crisply against the dark backdrop. */
.boot-plate{
  position:absolute;z-index:1;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffdf9,#f2ece3 68%,#e2d9cc);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),
             inset 0 -8px 22px rgba(120,90,60,.12);
  animation:bootPulse 3.4s var(--ease) infinite;
}
@keyframes bootGlow{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.06);opacity:1}}

.boot-logo{
  position:relative;z-index:2;width:37%;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(60,30,10,.28));
  animation:bootPulse 3.4s var(--ease) infinite;
}
@keyframes bootPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* Each tool is positioned at stage centre; JS drives the transform every frame. */
.boot-tool{
  position:absolute;left:50%;top:50%;width:19%;height:19%;
  margin-left:-9.5%;margin-top:-9.5%;
  will-change:transform,opacity;transform-origin:50% 50%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) brightness(1.12);
}
.boot-tool svg{width:100%;height:100%;display:block;overflow:visible}

.boot-copy{text-align:center;max-width:34ch}
.boot-title{
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#f6ede2;margin-bottom:7px;
}
.boot-msg{font-size:12.5px;color:#a9998a;min-height:1.2em;transition:opacity .2s var(--ease)}

.boot-track{
  width:min(230px,60vw);height:3px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.11);margin:0 auto;
}
.boot-track i{
  display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--poj-red),var(--poj-gold),var(--poj-red));
  animation:bootTrack 1.45s var(--ease) infinite;
}
@keyframes bootTrack{0%{transform:translateX(-100%)}100%{transform:translateX(363%)}}

/* ── Slim top progress bar for lightweight requests ───────────────────────── */
#net-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:11000;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--poj-red),var(--poj-gold));
  box-shadow:0 0 12px rgba(215,25,32,.55);
  transition:transform .28s var(--ease),opacity .3s var(--ease);opacity:0;pointer-events:none;
}
#net-progress.on{opacity:1}

/* ── Inline skeletons for view-level loads ────────────────────────────────── */
.skeleton{
  border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--panel-strong) 25%,var(--panel-soft) 37%,var(--panel-strong) 63%);
  background-size:400% 100%;animation:skel 1.3s ease-in-out infinite;
}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-row{height:52px;margin-bottom:10px}
.skeleton-card{height:118px}

@media (prefers-reduced-motion:reduce){
  .boot-glow,.boot-logo,.boot-track i,.skeleton{animation:none!important}
  .boot-tool{transition:none!important}
  #boot-overlay{transition:opacity .01s}
}