/* Line-diagram styles (shared by home + project pages).
   Draw-on animation is progressive: with no JS everything is simply visible. */
.bp{--bp-ink:#0e2a47;--bp-line:#1d4f91;--bp-acc:#f85d00;cursor:pointer;}
.bp svg{display:block;width:100%;height:auto;overflow:visible;}
.bp .ln{fill:none;stroke:var(--bp-line);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;}
.bp .acc{stroke:var(--bp-acc);}
.bp .pt{fill:var(--bp-ink);}
.bp .tile{fill:var(--bp-line);fill-opacity:var(--o,.15);stroke:none;}
.bp .drone circle{fill:var(--bp-acc);}
.bp .drone path{fill:none;stroke:var(--bp-acc);stroke-width:1.2;}
.bp .num{font:600 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:var(--bp-acc);letter-spacing:.12em;}
.bp .lbl{font:600 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:var(--bp-ink);letter-spacing:.12em;}
.bp .sub{font:400 10.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:#51657d;letter-spacing:.04em;}
.bp .sub.acc-t{fill:var(--bp-acc);}
.bp .flow{stroke-dasharray:4 5;stroke-width:1.2;}
.bp .draw{stroke-linecap:butt;}
.bp .dots .fade,.bp .pt.fade{--d:calc(3.5s + var(--i,0) * 12ms);}
.bp-rule{height:22px;margin:0 0 1.6rem;}
.bp-rule svg{height:22px;}
.bp-cap{font:.72rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#51657d;letter-spacing:.04em;margin:.6rem 0 0;}
.bp-cap b{color:var(--bp-acc,#f85d00);font-weight:600;}

/* animation only when JS marked the diagram */
.bp.js:not(.in) .draw{stroke-dasharray:1;stroke-dashoffset:1;}
.bp.js:not(.in) .fade{opacity:0;}
.bp.js.in .draw{stroke-dasharray:1;stroke-dashoffset:0;animation:bp-draw 1.1s ease both;animation-delay:var(--d,0s);}
.bp.js.in .fade{animation:bp-fade .5s ease both;animation-delay:var(--d,0s);}
.bp.js.in .flow{animation:bp-fade .5s ease both,bp-flow 1.4s linear infinite;animation-delay:var(--d,0s),0s;}
@keyframes bp-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bp-fade{from{opacity:0}to{opacity:1}}
@keyframes bp-flow{to{stroke-dashoffset:-18}}
@media (max-width:640px){
  .bp .num,.bp .lbl{font-size:12px}
  .bp .sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bp .draw,.bp .fade,.bp .flow{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;}
  .bp .drone{display:none;}
}