/* Brainsless motion grammar: sample -> excite -> settle.
   It is intentionally crisp and mechanical. No generic spinners, glowing strips, or layout motion. */
:root{
  --bl-motion-press:120ms;
  --bl-motion-fast:180ms;
  --bl-motion-settle:280ms;
  --bl-motion-spring:cubic-bezier(.2,.82,.2,1);
  --bl-motion-exit:cubic-bezier(.4,0,1,1);
}

button,a.btn,.go,.send,.auth-btn,.stage-trigger,.production-connect,.production-copy{
  touch-action:manipulation;
  transform-origin:center;
  transition-property:transform,background-color,border-color,color,box-shadow,opacity;
  transition-duration:var(--bl-motion-fast);
  transition-timing-function:var(--bl-motion-spring);
}
button:not(:disabled):active,a.btn:active,.go:not(:disabled):active,.send:not(:disabled):active{
  transform:scale(.975);
  transition-duration:var(--bl-motion-press);
}

/* A five-cell spectrogram replaces dots and generic circular spinners. */
.bl-signal,.pend{
  --bl-signal-color:var(--held,var(--nv,#76B900));
  display:inline-grid;
  grid-template-columns:repeat(5,3px);
  align-items:center;
  gap:3px;
  min-width:27px;
  min-height:18px;
}
.bl-signal>i,.pend>i{
  display:block;
  width:3px;
  height:var(--cell-h,6px);
  border-radius:3px;
  background:color-mix(in srgb,var(--bl-signal-color) 28%,transparent);
  transform-origin:center;
  animation:bl-read-signal 1.15s var(--bl-motion-spring) infinite;
}
.bl-signal>i:nth-child(1),.pend>i:nth-child(1){--cell-h:5px;animation-delay:-.36s}
.bl-signal>i:nth-child(2),.pend>i:nth-child(2){--cell-h:10px;animation-delay:-.24s}
.bl-signal>i:nth-child(3),.pend>i:nth-child(3){--cell-h:16px;animation-delay:-.12s}
.bl-signal>i:nth-child(4),.pend>i:nth-child(4){--cell-h:10px;animation-delay:0s}
.bl-signal>i:nth-child(5),.pend>i:nth-child(5){--cell-h:5px;animation-delay:.12s}
@keyframes bl-read-signal{
  0%,100%{opacity:.28;transform:scaleY(.62)}
  44%{opacity:1;transform:scaleY(1)}
}

/* Async buttons keep their label, gain a small measured signal, and never resize. */
.bl-busy,[aria-busy="true"].bl-motion{
  position:relative;
  cursor:wait!important;
}
.bl-busy .bl-button-label,[aria-busy="true"].bl-motion .bl-button-label{opacity:.72}
/* Inside a button the signal sits on the button's own background, so the brand green is the one
   colour it must not assume: on a filled green control it was green on green and simply vanished.
   currentColor is the ink the label already proves readable there. Standalone .pend keeps green. */
.bl-busy .bl-signal,[aria-busy="true"].bl-motion .bl-signal{margin-left:3px;--bl-signal-color:var(--held-on,currentColor)}
.bl-complete{animation:bl-confirm var(--bl-motion-settle) var(--bl-motion-spring) both}
@keyframes bl-confirm{0%{transform:scale(.98)}55%{transform:scale(1.018)}100%{transform:none}}

/* Loading rows are sampled by one narrow beam rather than washed by a SaaS shimmer. */
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--line,#d9dcd6) 58%,transparent)!important;background-image:none!important}
.skel::after{
  content:'';position:absolute;inset:0 auto 0 -22%;width:18%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--held,var(--nv,#76B900)) 42%,transparent),transparent);
  transform:skewX(-12deg);animation:bl-scan 1.65s var(--bl-motion-spring) infinite;
}
@keyframes bl-scan{to{transform:translateX(690%) skewX(-12deg)}}

/* Text-only waits receive a quiet instrument readout. */
.wait,.production-loading{
  position:relative;padding-left:40px!important;min-height:24px;display:flex;align-items:center;
}
.wait::before,.production-loading::before{
  content:'';position:absolute;left:2px;top:50%;width:27px;height:16px;transform:translateY(-50%);
  background:linear-gradient(90deg,
    var(--ink-3,#788692) 0 3px,transparent 3px 6px,
    var(--ink-3,#788692) 6px 9px,transparent 9px 12px,
    var(--held,var(--nv,#76B900)) 12px 15px,transparent 15px 18px,
    var(--ink-3,#788692) 18px 21px,transparent 21px 24px,
    var(--ink-3,#788692) 24px 27px);
  clip-path:polygon(0 38%,11% 38%,11% 62%,22% 62%,22% 19%,33% 19%,33% 81%,44% 81%,44% 0,56% 0,56% 100%,67% 100%,67% 28%,78% 28%,78% 72%,89% 72%,89% 42%,100% 42%,100% 58%,0 58%);
  animation:bl-instrument 1.25s steps(5,end) infinite;
}
@keyframes bl-instrument{50%{opacity:.38;transform:translateY(-50%) scaleY(.72)}}

@media(prefers-reduced-motion:reduce){
  button,a.btn,.go,.send,.auth-btn,.stage-trigger,.production-connect,.production-copy{transition-duration:0s}
  button:not(:disabled):active,a.btn:active,.go:not(:disabled):active,.send:not(:disabled):active{transform:none}
  .bl-signal>i,.pend>i,.skel::after,.wait::before,.production-loading::before{animation:none!important}
  .bl-signal>i,.pend>i{opacity:.72;transform:none}
  .skel::after{left:42%;transform:none}
}