/* ─── Section loader (assets/js/loader.js) ──────────────
   A slim progress bar with a small Mjölnir on its leading edge, inside
   each section that is waiting on data. The section blurs lightly
   underneath; the rest of the page stays sharp. The old whole-report
   blur is switched off here. */

.content-canvas.is-loading { filter: none; }

.ld-host { position: relative; }
.ld-host > :not(.ld) { transition: filter 0.3s ease, opacity 0.3s ease; }
.ld-host-busy > :not(.ld) { filter: blur(2px); opacity: 0.55; }

.ld {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: clamp(36px, 22%, 180px) 16px 16px;
  pointer-events: none; /* the section underneath stays usable */
}
.ld.is-fading { opacity: 0; transition: opacity 0.22s ease; }

.ld-bar {
  position: relative;
  width: min(280px, 60%);
  padding-top: 26px; /* room for the hammer above the bar */
  transform-origin: 50% 100%;
}
.ld-track {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 55%, transparent);
  overflow: hidden;
}
.ld-fill {
  height: 100%;
  width: var(--p, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #C3502B, #E07A4F);
  transition: width 0.35s ease;
}

/* the hammer rides the leading edge, rocking gently */
.ld-hammer {
  position: absolute;
  top: 0;
  left: var(--p, 0%);
  width: 15px;
  height: 20px;
  margin-left: -7.5px;
  color: var(--primary);
  transform-origin: 50% 100%;
  transition: left 0.35s ease;
  animation: ld-rock 1.4s ease-in-out infinite;
}
.ld.is-done .ld-hammer { animation: none; }
.ld-hammer-svg { display: block; width: 100%; height: 100%; }
@keyframes ld-rock { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }

.ld-caption {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
.ld-pct { color: var(--primary); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* inside the dark hero */
.ov-hero > .ld .ld-track { background: rgba(255, 255, 255, 0.14); }
.ov-hero > .ld .ld-hammer { color: #FFB38F; }
.ov-hero > .ld .ld-caption { color: rgba(255, 240, 230, 0.8); }
.ov-hero > .ld .ld-pct { color: #FFB38F; }

@media (prefers-reduced-motion: reduce) {
  .ld-hammer { animation: none; }
}