/* public/css/regen-ux.css
 * REGEN UX (Austin 2026-09-14 09:38): progress bar in place of the running status text, and
 * a per-image fade-in. Two changes only - nothing else in this file.
 *
 * Creative standard held: white/light backgrounds, Inter, black bar, no dark sections, no
 * emoji, nothing bouncy. The bar is 6px and the fade is 320ms opacity. Subtle and quick.
 */

/* ---------------------------------------------------------------- progress bar ---------- */

.bb-regen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 180px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bb-regen-track {
  position: relative;
  height: 6px;
  background: #EEF0F2;      /* light rail, never a dark section */
  border-radius: 3px;
  overflow: hidden;         /* clips the sweeping fill */
}

.bb-regen--compact .bb-regen-track { height: 4px; }

.bb-regen-fill {
  height: 100%;
  width: 0;
  background: #111;         /* black, matching the builder's black buttons */
  border-radius: 3px;
  transition: width 0.35s ease;
}

/* INDETERMINATE: the count is genuinely unknowable, so the fill sweeps and NO width is
 * claimed. Deliberately a transform animation on a fixed-width fill, not a width ramp, so
 * nothing about it can be mistaken for a percentage. */
.bb-regen--indeterminate .bb-regen-fill {
  width: 38%;
  transition: none;
  animation: bb-regen-sweep 1.15s ease-in-out infinite;
}

@keyframes bb-regen-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(305%); }
}

.bb-regen-caption {
  font-size: 11px;
  line-height: 1.45;
  color: #555;
  min-height: 14px;
}

/* Terminal tones. Each is paired with caption TEXT in regen-progress.js, so colour is never
 * the only carrier of an error. */
.bb-regen--fail .bb-regen-fill { background: #B42318; animation: none; width: 100%; }
.bb-regen--fail .bb-regen-caption { color: #B42318; }

.bb-regen--warn .bb-regen-fill { background: #B54708; }
.bb-regen--warn .bb-regen-caption { color: #B54708; }

.bb-regen--ok .bb-regen-fill { background: #10b981; animation: none; width: 100%; }
.bb-regen--ok .bb-regen-caption { color: #10b981; }

/* ---------------------------------------------------------------- image fade-in --------- */

/* Opacity only. The element keeps its box at all times, so a landing image cannot shift the
 * page - that is the "no layout shift" requirement, enforced structurally rather than by
 * reserving space separately. */
.bb-fade-img {
  opacity: 0;
  transition: opacity 0.32s ease;
}

.bb-fade-img.bb-fade-in {
  opacity: 1;
}

/* Accessibility: honour a reduced-motion preference by dropping the animation and the fade
 * entirely rather than shortening them. */
@media (prefers-reduced-motion: reduce) {
  .bb-regen--indeterminate .bb-regen-fill { animation: none; width: 100%; opacity: 0.55; }
  .bb-regen-fill { transition: none; }
  .bb-fade-img { transition: none; opacity: 1; }
}