/* Scale Info · section loader (built and driven by assets/loader.js from #main's aria-busy).
 * A slim bar across the top of the content with the logo riding its head. The blades slide in along their 45° axis
 * and lock at the corner they share, a sheen runs through both, and every 1.8s they part a pixel and lock again.
 * Transform and opacity only (compositor), no filter or background-position. position: fixed, so it never moves
 * the page, and display: none at rest. The green is the logo's own (#A1F963), not the UI accent. */

.si-ld {
  --si-g: #A1F963;
  position: fixed; z-index: 60; top: 0; right: 0; left: var(--sidebar-w, 240px); height: 36px;
  pointer-events: none; contain: layout paint; opacity: 0;   /* faded in and out by loader.js */
}
.si-ld[hidden] { display: none; }
.si-ld.is-on { will-change: opacity; }
.si-ld::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: rgba(161, 249, 99, 0.1); }
/* Full-width carriers: the bar's end and the mark sit on their right edge, so progress p is
   translateX((p - 1) * 100%) and nothing is ever measured. */
.si-ld-run, .si-ld-ride { position: absolute; inset: 0; transform: translateX(-100%); }
.si-ld.is-on .si-ld-run, .si-ld.is-on .si-ld-ride { will-change: transform; }

.si-ld-bar {
  position: absolute; top: 0; right: 0; left: 0; height: 3px; overflow: hidden;
  background: linear-gradient(90deg, rgba(161, 249, 99, 0.3), rgba(161, 249, 99, 0.88) 60%, var(--si-g));
}
/* Faint 45° cuts, one every 16px (a 135° stripe of 11.314px is exactly 16px across, so a 16px move loops seamlessly). */
.si-ld-bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -16px; right: 0;
  background: repeating-linear-gradient(135deg, transparent 0 9.546px, rgba(7, 10, 8, 0.3) 9.546px 11.314px);
}
.si-ld-bar::after {   /* the white-hot tip */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, rgba(242, 255, 234, 0), #F2FFEA);
}
.si-ld-glow {         /* light under the head: a still gradient that travels with it */
  position: absolute; top: -18px; right: -56px; width: 112px; height: 38px;
  background: radial-gradient(closest-side, rgba(161, 249, 99, 0.45), rgba(161, 249, 99, 0.12) 60%, rgba(161, 249, 99, 0));
}
/* The mark hangs under the head. Each blade is the whole mark box clipped to its quadrilateral (the brand SVG's paths,
   viewBox 65.5 × 64, in percent), so one sheen runs through both. */
.si-ld-mark { position: absolute; top: 9px; right: 0; width: 20.47px; height: 20px; }
.si-ld-b { position: absolute; inset: 0; background: var(--si-g); }
.si-ld-u { clip-path: polygon(50.229% 0, 100% 0, 49.313% 50.156%, 1.069% 50.156%); }
.si-ld-l { clip-path: polygon(49.313% 50.156%, 99.847% 50.156%, 49.313% 100%, 0 100%); }
.si-ld-b::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 62%);
}

/* Slide in and lock (0.48s), then the 1.8s loop: sheen 0–30%, hold, part 7% along the 45° axis by 78%, lock by 100%. */
.si-ld.is-on .si-ld-bar::before { animation: si-ld-flow 0.8s linear infinite; will-change: transform; }
.si-ld.is-on .si-ld-u { animation: si-ld-u-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) backwards, si-ld-u 1.8s 0.48s infinite; }
.si-ld.is-on .si-ld-l { animation: si-ld-l-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) backwards, si-ld-l 1.8s 0.48s infinite; }
.si-ld.is-on .si-ld-b { will-change: transform, opacity; }
.si-ld.is-on .si-ld-b::after { animation: si-ld-sheen 1.8s 0.48s infinite; will-change: transform; }
@keyframes si-ld-flow { to { transform: translateX(16px); } }
@keyframes si-ld-u-in { from { transform: translate(32%, -32%); opacity: 0; } }
@keyframes si-ld-l-in { from { transform: translate(-32%, 32%); opacity: 0; } }
@keyframes si-ld-u {
  0%, 56% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78% { transform: translate(7%, -7%); opacity: 0.55; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: none; opacity: 1; }
}
@keyframes si-ld-l {
  0%, 56% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78% { transform: translate(-7%, 7%); opacity: 0.55; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: none; opacity: 1; }
}
@keyframes si-ld-sheen {
  0% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  30%, 100% { transform: translateX(200%); }
}

/* The sidebar mark keeps the beat: loader.js lays a copy of each blade over it (same SVG, sized by app.css), and
   while a section loads the copies run the loop while the original steps aside. */
.brand-mark { position: relative; }
.si-bm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.si-bm > svg { grid-area: 1 / 1; }
.brand-mark.si-busy > svg { opacity: 0; }
.brand-mark.si-busy .si-bm-u { animation: si-ld-u 1.8s 0.48s infinite; }
.brand-mark.si-busy .si-bm-l { animation: si-ld-l 1.8s 0.48s infinite; }

/* Phones: under the top bar, over its hairline, full width; the mark clears the first line of content. */
@media (max-width: 860px) {
  .si-ld { top: calc(var(--topbar-h, 56px) + var(--safe-top, 0px) - 1px); left: 0; }
  .si-ld-mark { top: 6px; width: 18.42px; height: 18px; }
}
/* No motion: a plain bar that fills in steps and a still mark at its start. */
@media (prefers-reduced-motion: reduce) {
  .si-ld-bar { background: var(--si-g); }
  .si-ld-bar::before, .si-ld-bar::after, .si-ld-glow, .si-ld-b::after { display: none; }
  .si-ld.is-on .si-ld-u, .si-ld.is-on .si-ld-l, .brand-mark.si-busy .si-bm-b { animation: none; }
  .si-ld-ride { transform: none; }
  .si-ld-mark { right: auto; left: var(--gutter, 16px); }
}
@media (forced-colors: active) {
  .si-ld-bar, .si-ld-b { forced-color-adjust: none; background: Highlight; }
  .si-ld::before, .si-ld-bar::before, .si-ld-bar::after, .si-ld-glow, .si-ld-b::after { display: none; }
}
@media print { .si-ld { display: none; } }