/* Progress Circle for Encrypt/Decrypt */

.progress-circle {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circle__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-circle__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.progress-circle__fill {
  fill: none;
  stroke: #5B8DEF;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 157.08; /* 2 * π * 25 (radius is now 25, half of 50) */
  stroke-dashoffset: 157.08;
  transition: stroke-dashoffset 0.15s ease;
}

.progress-circle__fill--encrypt {
  stroke: #5B8DEF;
}

.progress-circle__fill--decrypt {
  stroke: #7BADFF;
}

.progress-circle__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circle__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--ui-text);
  fill: none;
  stroke-width: 2;
  opacity: 0.8;
}

/* Progress states - handled by JavaScript for smooth transitions */
.progress-circle--0 .progress-circle__fill {
  stroke-dashoffset: 157.08; /* 0% - fallback (2 * π * 25) */
}

.progress-circle--25 .progress-circle__fill {
  stroke-dashoffset: 117.81; /* 25% - fallback */
}

.progress-circle--50 .progress-circle__fill {
  stroke-dashoffset: 78.54; /* 50% - fallback */
}

.progress-circle--75 .progress-circle__fill {
  stroke-dashoffset: 39.27; /* 75% - fallback */
}

.progress-circle--100 .progress-circle__fill {
  stroke-dashoffset: 0; /* 100% - fallback */
}

/* Pulse animation for active progress */
@keyframes progress-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.progress-circle--active .progress-circle__fill {
  animation: progress-pulse 1s ease-in-out infinite;
}

/* Complete state */
.progress-circle--complete .progress-circle__fill {
  stroke: #4CAF50;
  animation: none;
}

.progress-circle--complete .progress-circle__icon {
  animation: scale-in 0.3s ease forwards;
}

@keyframes scale-in {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}