/* ============================================================
   SMALL MOTION
   The deck build's progress bar (engine.js buildMeter), figures that roll
   to a new value and counts that pulse when they change (core.js rollNumber,
   bump), and buttons that give under the pointer on a desktop too (the
   touch screens' version is in 09-refresh.css). Reduced motion — the
   system's or the app's own — stills all of it.
   ============================================================ */

/* the deck being built: what it is doing, the percentage, the bar */
.build-meter{max-width:460px; margin:28px auto 8px; padding:0 4px;}
.bm-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px;}
.bm-msg{flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--text-dim); line-height:1.4;}
.bm-pct{flex:0 0 auto; font-size:15px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;}
.bm-track{position:relative; height:8px; border-radius:8px; overflow:hidden; background:var(--surface-3);}
/* scaleX rather than width: the browser moves it without laying the page out again */
.bm-fill{
  position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  border-radius:inherit; background:var(--accent);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
/* a light that runs along the bar, so a step that waits on the network still looks alive */
.bm-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:bm-run 1.4s linear infinite;
}
@keyframes bm-run{ from{background-position:-40% 0;} to{background-position:140% 0;} }

/* figures that roll keep their width per digit, so the line does not jitter */
.rolling{font-variant-numeric:tabular-nums;}

/* a count that just changed */
.bump{display:inline-block; animation:bump .38s cubic-bezier(.3,1.6,.5,1);}
@keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.22); color:var(--accent-hi);} 100%{transform:scale(1);} }

/* Pressing: on a touch screen the buttons already give (09-refresh.css);
   with a mouse they answered only with their hover color. */
@media (hover:hover){
  .btn, .qbtn, .stack-chip, .deck-tabs button, .seg button{transition:transform .1s ease, background .14s, border-color .14s, color .14s;}
  .btn:active:not(:disabled), .qbtn:active, .stack-chip:active, .deck-tabs button:active, .seg button:active{transform:scale(.96);}
}
@media (hover:none){
  .stack-chip, .deck-tabs button, .seg button{transition:transform .1s ease;}
  .stack-chip:active, .deck-tabs button:active, .seg button:active{transform:scale(.95);}
  .stk-card:active::after{background:rgba(255,255,255,.06);}
}

body.reduce-motion .bm-fill, body.reduce-motion .bm-fill::after, body.reduce-motion .bump{transition:none; animation:none;}
@media (prefers-reduced-motion: reduce){
  .bm-fill, .bm-fill::after, .bump{transition:none; animation:none;}
}