html {
  scroll-behavior: smooth;
}

.reliable-icon-pop {
  transform: scale(0.6);
  opacity: 0;
}

.reliable-icon-pop.is-visible {
  animation: reliableIconEaseInBounce 0.85s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.reliable-icon-pop.is-leaving {
  animation: reliableIconEaseOut 0.45s ease-out forwards;
}

@keyframes reliableIconEaseInBounce {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.18);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes reliableIconEaseOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

.fast-progress-ring {
  --progress: 0;
  --progress-color: #33cfd9;
  height: 58px;
  width: 58px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--progress-color) calc(var(--progress) * 1%), #e2e8f0 0);
  transition: background 220ms ease-in-out;
}

.fast-progress-ring.is-complete {
  --progress-color: #33cfd9;
}

.fast-progress-ring-inner {
  height: 46px;
  width: 46px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f9ff;
  color: #0369a1;
  font-size: 1.25rem;
  font-weight: 800;
}
