/* ── Loading Runtime ── */

html{height:100%;height:var(--app-height);}
body{margin:0;padding:0;height:100%;background:var(--c-bg);}

#boot-loading{
  position:fixed;inset:0;
  background:var(--c-bg);
  overflow:hidden;
  height:var(--app-height);
  z-index:var(--z-loading);
}

/* ── Lite ── */
.ld-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:var(--focus-x) var(--focus-y);
  background-image:url('/uploads/loading/loading-lite.webp');
  will-change:opacity,transform;
  opacity:0;transform:scale(1.03);
  animation:ldBreathIn .7s var(--motion-ease) forwards;
}

@keyframes ldBreathIn{to{opacity:1;transform:scale(1);}}

/* ── Full ── */
.ld-bg-full{
  position:absolute;inset:0;
  background-size:cover;
  background-position:var(--focus-x) var(--focus-y);
  will-change:opacity;opacity:0;
  transition:opacity .8s var(--motion-ease);
}

.ld-bg-full.ready{opacity:1;}

/* ── Grain ── */
.ld-grain{
  position:absolute;inset:0;
  opacity:0.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:3;
}

/* ── Progress ── */
.ld-bottom{
  position:absolute;bottom:0;left:0;right:0;
  z-index:10;
  padding:0 var(--space-lg) calc(var(--space-xl) + var(--safe-bottom));
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-sm);
}

.ld-status{
  font-size:var(--fs-sm);
  color:var(--c-text2);
  font-weight:500;
  font-family:var(--font-sans);
}

.ld-bar-wrap{
  width:100%;max-width:clamp(240px,70vw,360px);
  height:4px;
  background:var(--overlay-light);
  border-radius:var(--radius-full);
  overflow:hidden;position:relative;
}

.ld-bar{
  height:100%;width:0%;
  border-radius:var(--radius-full);
  background:linear-gradient(90deg,#6366f1,#8b5cf6,var(--c-accent));
  box-shadow:0 0 8px rgba(139,92,246,0.4);
  transition:width var(--motion-slow) var(--motion-ease);
}

.ld-bar::after{
  content:'';position:absolute;
  top:0;left:-40%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  animation:ldShimmer 2s infinite;
}

@keyframes ldShimmer{to{left:140%;}}

.ld-glow{
  position:absolute;
  bottom:calc(var(--space-xl) + 16px);
  left:10%;right:10%;height:50px;
  background:radial-gradient(ellipse,var(--overlay-glow) 0%,transparent 70%);
  pointer-events:none;z-index:5;
  animation:ldGlowPulse 3s ease-in-out infinite;
}

@keyframes ldGlowPulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

.ld-tip{
  font-size:var(--fs-xs);
  color:var(--c-text3);
  font-family:var(--font-sans);
}

/* ── Fade out ── */
#boot-loading.fade-out{
  opacity:0;pointer-events:none;
  transition:opacity var(--motion-slow) ease;
}

/* ── Device ── */
[data-device="compact"] .ld-glow{display:none;}

[data-device="wide"] .ld-bar-wrap,
[data-device="tablet"] .ld-bar-wrap{max-width:420px;}

[data-device="wide"] .ld-bg,
[data-device="tablet"] .ld-bg{
  background-image:url('/uploads/loading/loading-tablet-lite.webp');
}