.pdd-liquid-progress {
  --pdd-liquid-progress: 0%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pdd-liquid-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pdd-liquid-progress);
  background: linear-gradient(90deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .38));
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  transition: width 160ms linear;
}

.pdd-liquid-progress[data-transfer-state="starting"]::before,
.pdd-liquid-progress[data-transfer-state="verifying"]::before {
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .16) 0,
    rgba(255, 255, 255, .16) 12px,
    rgba(255, 255, 255, .34) 12px,
    rgba(255, 255, 255, .34) 24px
  );
  background-size: 48px 100%;
  animation: pdd-liquid-flow 750ms linear infinite;
}

.pdd-liquid-progress[data-transfer-state="failed"]::before {
  background: rgba(180, 28, 28, .32);
}

@keyframes pdd-liquid-flow {
  to { background-position: 48px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pdd-liquid-progress::before { transition: none; animation: none !important; }
}