.upload-progress {
  --upload-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  grid-template-rows: 0fr;
  margin-top: var(--size-3);
  opacity: 0;
  transform: translateY(-0.35rem);
  transition:
    grid-template-rows 280ms var(--upload-ease),
    opacity 180ms ease-out,
    transform 280ms var(--upload-ease);
}

.upload-progress__inner {
  overflow: hidden;
}

.upload-progress__surface {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  border: 1px solid color-mix(in srgb, var(--pehuen-primary-200) 78%, white 22%);
  border-radius: var(--rounded-lg);
  background: linear-gradient(135deg, color-mix(in srgb, white 72%, var(--pehuen-primary-50) 28%), color-mix(in srgb, white 92%, var(--pehuen-primary-100) 8%));
  box-shadow: var(--shadow-sm);
  padding: 0.875rem 1rem;
}

.upload-progress__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--pehuen-primary-700);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pehuen-primary-200) 82%, white 18%), color-mix(in srgb, var(--pehuen-primary-50) 88%, white 12%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgb(from var(--pehuen-primary-200) r g b / 0.28);
  transform: translateZ(0);
}

.upload-progress__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--pehuen-primary-900);
}

.upload-progress__hint {
  margin-top: var(--size-1);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: color-mix(in srgb, var(--pehuen-primary-800) 72%, white 28%);
}

.upload-progress__track {
  position: relative;
  overflow: hidden;
  height: 0.375rem;
  margin-top: var(--size-2);
  border-radius: 999px;
  background: color-mix(in srgb, white 90%, var(--pehuen-primary-100) 10%);
}

.upload-progress__meter {
  position: relative;
  height: 100%;
  width: 32%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pehuen-primary-300), var(--pehuen-primary-500), var(--pehuen-primary-600));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  transform: translateX(-115%);
  will-change: transform;
}

.upload-progress[data-state="ready"],
.upload-progress[data-state="uploading"] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.upload-progress[data-state="ready"] .upload-progress__surface {
  box-shadow: 0 12px 24px -20px rgba(38, 60, 47, 0.24);
}

.upload-progress[data-state="ready"] .upload-progress__icon {
  animation: upload-progress-ready 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.upload-progress__meter[data-state="ready"] {
  width: 18%;
  opacity: 0.85;
  transform: translateX(0);
  transition: width 220ms ease-out, opacity 180ms ease-out, transform 220ms ease-out;
}

.upload-progress[data-state="uploading"] .upload-progress__surface {
  box-shadow: 0 16px 28px -22px rgba(38, 60, 47, 0.32);
}

.upload-progress[data-state="uploading"] .upload-progress__icon {
  animation: upload-progress-lift 1100ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.upload-progress__meter[data-state="uploading"] {
  animation: upload-progress-flow 1200ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

[aria-busy="true"] .btn--loading[aria-disabled="true"],
[aria-busy="true"] .btn--loading:disabled {
  transition: opacity 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
  opacity: 0.72;
  transform: translateY(0);
}

@keyframes upload-progress-ready {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.03);
  }
}

@keyframes upload-progress-lift {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2px) scale(1.04);
  }
}

@keyframes upload-progress-flow {
  0% {
    transform: translateX(-115%);
  }

  100% {
    transform: translateX(360%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload-progress,
  .upload-progress__meter,
  .upload-progress__icon,
  [aria-busy="true"] .btn--loading[aria-disabled="true"],
  [aria-busy="true"] .btn--loading:disabled {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .upload-progress {
    transform: none;
  }

  .upload-progress__meter[data-state="ready"],
  .upload-progress__meter[data-state="uploading"] {
    width: 100%;
    transform: translateX(0);
  }
}