/**
 * Wanda Panda — bamboo progress bar
 * Set progress: style="--wanda-progress: 42" (0–100, unitless)
 *
 *   <div class="wanda-bamboo" style="--wanda-progress: 42" role="progressbar"
 *        aria-valuemin="0" aria-valuemax="100" aria-valuenow="42">
 *     <div class="wanda-bamboo__panda" aria-hidden="true"></div>
 *     <div class="wanda-bamboo__track">
 *       <div class="wanda-bamboo__stalk"></div>
 *       <div class="wanda-bamboo__munch" aria-hidden="true"></div>
 *     </div>
 *   </div>
 *
 * A segmented bamboo stalk grows left-to-right; Wanda's face rides on the
 * fill edge. Assumes a dark background. Theme the empty part via --wanda-track.
 */

.wanda-bamboo {
  --wanda-progress: 0;
  --wanda-bamboo-height: 0.6rem;
  --wanda-bamboo-panda-size: 1.75rem;
  --wanda-bamboo-width: min(18rem, 100%);
  --wanda-bamboo-green: #5fa846;
  --wanda-bamboo-dark: #3b7a33;
  --wanda-bamboo-light: #9fd57a;

  position: relative;
  display: flex;
  align-items: center;
  width: var(--wanda-bamboo-width);
  height: var(--wanda-bamboo-panda-size);
}

.wanda-bamboo .wanda-bamboo__panda {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc((100% - var(--wanda-bamboo-panda-size)) * var(--wanda-progress) / 100);
  width: var(--wanda-bamboo-panda-size);
  height: var(--wanda-bamboo-panda-size);
  background: center / contain no-repeat url("./wanda.svg");
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%));
  transition: left 0.6s ease-out;
}

.wanda-bamboo__track {
  position: relative;
  flex: 1;
  height: var(--wanda-bamboo-height);
  min-width: 0;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgb(159 213 122 / 12%) 22px 24px
    ),
    var(--wanda-track, rgb(159 213 122 / 8%));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 35%);
}

.wanda-bamboo__stalk {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--wanda-progress) * 1%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 22%) 0 30%, transparent 30% 72%, rgb(0 0 0 / 18%) 72%),
    repeating-linear-gradient(
      90deg,
      var(--wanda-bamboo-green) 0 22px,
      var(--wanda-bamboo-dark) 22px 24px,
      var(--wanda-bamboo-light) 24px 25px
    );
  transition: width 0.6s ease-out;
}

.wanda-bamboo__munch {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wanda-bamboo .wanda-bamboo__panda,
  .wanda-bamboo__stalk {
    transition: none;
  }
}