/* ═══════════════════════════════════════════════════════════════════════════
   "What the analyzer does" — the empty-state animation
   Replaces assets/moneyed-clarity-sculpture.png: 1536x1024, 1,659 KB, shown
   at 259px wide, so ~98% of the bytes were discarded on every load. It was
   also a glass folder and a shield — decoration that says nothing about what
   this tool does to a credit report.

   This draws the actual job instead: a report arrives, a scan passes over it,
   its accounts sort into clean / late / serious, and a score arc forms from
   the result. Roughly 6 KB of SVG and CSS, no image request, loops forever,
   scales to any width, follows the theme, and stops dead under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.cib-art{display:block;width:100%;max-width:420px;margin:0 auto 18px;aspect-ratio:3/2}
.cib-art svg{display:block;width:100%;height:100%;overflow:visible}

.cib-paper{fill:var(--mo-surface,#fff);stroke:var(--mo-line,#C8DECE);stroke-width:1.5}
.cib-line{stroke:var(--mo-ink-300,#8FA89B);stroke-width:2.5;stroke-linecap:round}
.cib-scan{stroke:var(--mo-green-400,#18C979);stroke-width:2;opacity:.9}
.cib-glow{fill:var(--mo-green-400,#18C979);opacity:.14}

/* Each account chip lands in its own lane, coloured by what the report says
   about it. The staggered delays are the point: the viewer sees sorting
   happen, not a finished picture. */
.cib-chip{rx:3}
.cib-chip--clean{fill:var(--mo-good,#137B4D)}
.cib-chip--late{fill:var(--mo-warn,#AF511A)}
.cib-chip--bad{fill:var(--mo-bad,#B3261E)}

.cib-arc{fill:none;stroke:var(--mo-green-500,#1FA463);stroke-width:7;stroke-linecap:round}
.cib-arc-track{fill:none;stroke:var(--mo-line,#C8DECE);stroke-width:7;stroke-linecap:round}
.cib-score{fill:var(--mo-text,#0A1A12);font:800 19px/1 var(--mo-font,Inter,sans-serif);text-anchor:middle;font-variant-numeric:tabular-nums}
.cib-cap{fill:var(--mo-text-soft,#4A6358);font:700 7px/1 var(--mo-font,Inter,sans-serif);letter-spacing:.14em;text-anchor:middle;text-transform:uppercase}

/* ── the loop ─────────────────────────────────────────────────────────────
   One 9s cycle: scan 0-28%, chips sort 28-62%, arc draws 55-85%, hold, reset. */
@keyframes cib-scan   { 0%,4%{transform:translateY(0);opacity:0}
                        8%{opacity:1} 26%{transform:translateY(54px);opacity:1}
                        32%,100%{transform:translateY(54px);opacity:0} }
@keyframes cib-chip   { 0%,28%{opacity:0;transform:translateX(-10px)}
                        38%,92%{opacity:1;transform:translateX(0)}
                        100%{opacity:0;transform:translateX(-10px)} }
@keyframes cib-arc    { 0%,55%{stroke-dashoffset:100} 85%,92%{stroke-dashoffset:34}
                        100%{stroke-dashoffset:100} }
@keyframes cib-score  { 0%,58%{opacity:0} 70%,92%{opacity:1} 100%{opacity:0} }
@keyframes cib-pulse  { 0%,100%{opacity:.10} 50%{opacity:.20} }

.cib-art .cib-scanline{animation:cib-scan 9s var(--mo-ease,cubic-bezier(.4,0,.2,1)) infinite}
.cib-art .cib-glow{animation:cib-pulse 4.5s ease-in-out infinite}
.cib-art .cib-chip{opacity:0;animation:cib-chip 9s var(--mo-ease,cubic-bezier(.4,0,.2,1)) infinite}
.cib-art .cib-chip:nth-of-type(1){animation-delay:0s}
.cib-art .cib-chip:nth-of-type(2){animation-delay:.22s}
.cib-art .cib-chip:nth-of-type(3){animation-delay:.44s}
.cib-art .cib-chip:nth-of-type(4){animation-delay:.66s}
.cib-art .cib-chip:nth-of-type(5){animation-delay:.88s}
.cib-art .cib-chip:nth-of-type(6){animation-delay:1.1s}
.cib-art .cib-arc{stroke-dasharray:100;stroke-dashoffset:100;animation:cib-arc 9s var(--mo-ease,cubic-bezier(.4,0,.2,1)) infinite}
.cib-art .cib-score,.cib-art .cib-cap{opacity:0;animation:cib-score 9s linear infinite}

/* Reduced motion: show the finished frame. The artwork still explains the
   product; it simply does not move. */
@media (prefers-reduced-motion: reduce){
  .cib-art *{animation:none !important}
  .cib-art .cib-chip{opacity:1}
  .cib-art .cib-arc{stroke-dashoffset:34}
  .cib-art .cib-score,.cib-art .cib-cap{opacity:1}
  .cib-art .cib-scanline{opacity:0}
}

/* Once a real score is in, JS owns the arc and the digits. The loop has to be
   switched off or its keyframes would pull the arc back to the start. */
.cib-art--live .cib-arc,
.cib-art--live .cib-score,
.cib-art--live .cib-cap { animation: none !important; opacity: 1 !important; }
.cib-art--live .cib-scanline { animation: none; opacity: 0; }
.cib-art--live .cib-chip { animation: none; opacity: 1; }

/* ── No score before a report ──────────────────────────────────────────────
   The empty state used to show a 742 gauge directly above copy promising
   "No score or recommendation will be shown until report data is available."
   The artwork was contradicting the page. Before upload it shows only the
   job — a report, a scan, accounts sorting. The meter does not exist until
   there is a real number to put in it, and .cib-art--live is only added once
   a parsed score arrives. */
.cib-art .cib-arc-track,
.cib-art .cib-arc,
.cib-art .cib-score,
.cib-art .cib-cap { opacity: 0; animation: none; }

.cib-art--live .cib-arc-track { opacity: 1; }
.cib-art--live .cib-arc,
.cib-art--live .cib-score,
.cib-art--live .cib-cap { opacity: 1 !important; }

/* With the meter gone the chips carry the frame, so the lanes get a quiet
   label explaining what the sorting means. */
.cib-lane { fill: var(--mo-text-soft,#4A6358); font: 700 7px/1 var(--mo-font,Inter,sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.cib-art--live .cib-lane { opacity: .55; }