@scope (progress-ui) {
  :where(:scope) {
    /* -- Tokens -- */
    --progress-track:    var(--a-bg-muted);
    --progress-fill:     var(--a-accent);
    --progress-height:   0.375rem;
    --progress-radius:   var(--a-radius-full);
    --progress-duration: var(--a-duration);
    --progress-easing:   var(--a-easing);

    /* -- Indeterminate motion -- */
    --progress-shimmer-duration: 1.5s;
    --progress-shimmer-easing:   ease-in-out;
    --progress-spin-duration:    0.6s;
    --progress-spin-easing:      linear;
  }

  :scope {
    /* -- Base -- */
    box-sizing: border-box;
    display: block;
    width: 100%;
  }

  /* ── Bar variant ── */

  [slot="track"] {
    width: 100%;
    height: var(--progress-height);
    border-radius: var(--progress-radius);
    background: var(--progress-track);
    overflow: hidden;
  }

  [slot="fill"] {
    height: 100%;
    border-radius: var(--progress-radius);
    background: var(--progress-fill);
    transition: width var(--progress-duration) var(--progress-easing);

    /* Enter animation: paint the fill at 0 on first frame, then transition
       to the inline width set by JS — so a freshly-mounted determinate bar
       animates 0 → value rather than snapping in (or, in some cascades,
       briefly painting at the indeterminate width:100% before settling). */
    @starting-style {
      width: 0;
    }
  }

  /* Indeterminate bar shimmer */
  :scope[value^="-"] [slot="fill"],
  :scope:not([value]) [slot="fill"] {
    width: 100% !important;
    background: linear-gradient(
      90deg,
      var(--progress-track) 0%,
      var(--progress-fill) 50%,
      var(--progress-track) 100%
    );
    background-size: 200% 100%;
    animation: progress-shimmer var(--progress-shimmer-duration) var(--progress-shimmer-easing) infinite;
  }

  @keyframes progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── Spinner variant ── */

  :scope[variant="spinner"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
  }

  :scope[variant="spinner"] [slot="track"] { display: none; }

  :scope[variant="spinner"]::after {
    content: "";
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid var(--progress-fill);
    border-top-color: transparent;
    border-radius: var(--progress-radius);
    animation: progress-spin var(--progress-spin-duration) var(--progress-spin-easing) infinite;
  }

  @keyframes progress-spin {
    to { transform: rotate(360deg); }
  }
}
