/* ss-bargrow — grow-in + sheen for the mock-UI meters on the Carly solutions pages.
   Pairs with /assets/js/w/shared/ss-bargrow.js, which adds .is-lit when a bar actually enters view
   (see that file for why an observer rather than pure CSS). Opt in with `sharedCSS: [ss-bargrow]`.

   The fill keeps its authored inline width — that is the bar's real value and must stay readable
   in the markup. Growth is scaleX only, so this is compositor-only and cannot shift layout. */

.cs-bar__fill{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .85s cubic-bezier(.22,.9,.3,1);
  transition-delay:calc(var(--bar-i,0) * 110ms);
}
.cs-bar__fill.is-lit{transform:scaleX(1)}

/* A one-pass sheen the moment the bar finishes filling. This is the difference between "a div got
   wider" and "a meter took a reading" — it reads as the value settling. Runs once, then the
   pseudo-element is inert; it is masked by .cs-bar's own overflow:hidden so it cannot escape the
   rail. Skewed so the highlight sweeps as a soft diagonal rather than a hard vertical band. */
.cs-bar{position:relative}
.cs-bar__fill{position:relative;overflow:hidden}
.cs-bar__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 46%,transparent 78%);
  transform:translateX(-130%);
}
.cs-bar__fill.is-lit::after{
  animation:ssBarSheen 1s cubic-bezier(.3,.7,.4,1) forwards;
  animation-delay:calc(var(--bar-i,0) * 110ms + .42s);
}
@keyframes ssBarSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* Reduced motion: the JS adds .is-lit immediately and we drop every moving part, so the meters are
   simply present at their real values. Never leave them collapsed — a bar stuck at scaleX(0) reads
   as a broken component, not as "animation disabled". */
@media(prefers-reduced-motion:reduce){
  .cs-bar__fill{transition:none;transform:scaleX(1)}
  .cs-bar__fill::after,.cs-bar__fill.is-lit::after{animation:none;opacity:0}
}