/* Blanc motion: shared styles. Brand colours only; semantic red is used solely for a
   failed/blocked application state, never as decoration. */
:root{
  --bm-paper:#F1F3F2;--bm-white:#FFFFFF;--bm-ink:#14201C;--bm-green:#0A6A52;--bm-amber:#D9822B;
  --bm-line:#D3D9D6;--bm-muted:#57635E;--bm-fail:#B42318;--bm-ease:cubic-bezier(.45,0,.55,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bm-white:#141C19;--bm-ink:#E6ECE8;--bm-green:#5FC4A2;--bm-amber:#E89A4C;--bm-line:#2B3833;--bm-muted:#9AA8A1;--bm-fail:#F0897F}
}
:root[data-theme="dark"]{--bm-white:#141C19;--bm-ink:#E6ECE8;--bm-green:#5FC4A2;--bm-amber:#E89A4C;--bm-line:#2B3833;--bm-muted:#9AA8A1;--bm-fail:#F0897F}

/* ---------- scanner ---------- */
.bs{display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:center;padding:20px;background:var(--bm-white);border:1px solid var(--bm-line);border-radius:10px;color:var(--bm-ink);max-width:600px}
@media (max-width:480px){
  .bs{grid-template-columns:56px 1fr;gap:14px;padding:16px;align-items:start}
  .bs-stage{grid-template-columns:18px 1fr}
  .bs-state,.bs-note{grid-column:2}
  .bs-stage .bs-state{margin-top:-2px}
}
.bs-radar{width:100%;height:auto;display:block}
.bs-ring{fill:none;stroke:var(--bm-line);stroke-width:1.5}
.bs-core{fill:var(--bm-green)}
.bs-sweep{transform-origin:50px 50px;opacity:0;transition:opacity .3s}
.bs-sweep path{fill:var(--bm-green);fill-opacity:.16}
.bs[data-active] .bs-sweep{opacity:1;animation:bs-turn 3.2s linear infinite}
@keyframes bs-turn{to{transform:rotate(360deg)}}
.bs-title{margin:0 0 10px;font-weight:500;font-size:16px}
.bs-stages{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.bs-stage{display:grid;grid-template-columns:18px 1fr auto;gap:4px 10px;align-items:center;font-size:15px}
.bs-icon{width:16px;height:16px;border-radius:50%;border:2px solid var(--bm-line);position:relative;box-sizing:border-box}
.bs-state{font-size:13px;color:var(--bm-muted);white-space:nowrap}
.bs-note{grid-column:2/-1;font-size:13px;color:var(--bm-muted)}
.bs-stage[data-status="running"] .bs-icon{border-color:var(--bm-amber);border-right-color:transparent;animation:bs-turn 1.4s linear infinite}
.bs-stage[data-status="done"] .bs-icon{border-color:var(--bm-green);background:var(--bm-green)}
.bs-stage[data-status="done"] .bs-icon::after{content:"";position:absolute;left:4px;top:2.5px;width:4px;height:7px;border:solid var(--bm-white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bs-stage[data-status="warning"] .bs-icon{border-color:var(--bm-amber);background:var(--bm-amber)}
.bs-stage[data-status="warning"] .bs-icon::after{content:"";position:absolute;left:5px;top:2px;width:2px;height:5px;background:var(--bm-white);box-shadow:0 7px 0 var(--bm-white)}
.bs-stage[data-status="warning"] .bs-state{color:var(--bm-amber)}
.bs-stage[data-status="failed"] .bs-icon{border-color:var(--bm-fail);background:var(--bm-fail)}
.bs-stage[data-status="failed"] .bs-icon::after{content:"";position:absolute;left:3px;top:5px;width:6px;height:2px;background:var(--bm-white)}
.bs-stage[data-status="failed"] .bs-state{color:var(--bm-fail);font-weight:500}
.bs-stage[data-status="cancelled"] .bs-icon{border-style:dashed}
.bs-stage[data-status="cancelled"] .bs-label{color:var(--bm-muted)}
.bs-bar{position:relative;height:6px;border-radius:3px;background:var(--bm-line);overflow:hidden}
.bs-fill{position:absolute;inset:0;background:var(--bm-green);transform-origin:left;transform:scaleX(0);transition:transform .4s var(--bm-ease)}
.bs-bar[data-mode="indeterminate"] .bs-fill{transform:none;width:35%;animation:bs-indet 1.8s var(--bm-ease) infinite}
@keyframes bs-indet{0%{left:-35%}100%{left:100%}}
/* .preview-reduced mirrors the OS setting inside the internal preview page */
.preview-reduced .bs[data-active] .bs-sweep{animation:none;opacity:1}
.preview-reduced .bs-stage[data-status="running"] .bs-icon{animation:none;border-right-color:var(--bm-amber);border-style:dotted}
.preview-reduced .bs-bar[data-mode="indeterminate"] .bs-fill{animation:none;left:0;width:100%;opacity:.35}
@media (prefers-reduced-motion:reduce){
  .bs[data-active] .bs-sweep{animation:none;opacity:1}
  .bs-stage[data-status="running"] .bs-icon{animation:none;border-right-color:var(--bm-amber);border-style:dotted}
  .bs-bar[data-mode="indeterminate"] .bs-fill{animation:none;left:0;width:100%;opacity:.35}
  .bs-fill{transition:none}
}

/* ---------- animation slots on the website ---------- */
.bm-hero{display:block;width:100%;height:auto;max-width:600px;aspect-ratio:600/440}
.bm-pillar{display:block;width:100%;height:auto;aspect-ratio:320/220}