/* Progress Bar Component - Website Theme Integration */

/* Standalone styles for testing (will be overridden when integrated) */
body {
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a1a, #2d2d30);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Remove the standalone body styles that conflict with main page */
/* body styles will be inherited from main page */

/* Glossy Card Container */
.progress-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 30px;
  margin: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 400px;
  margin: 20px auto;
}

.progress-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.progress-card:hover::before {
  left: 100%;
}

.progress-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(242, 242, 247, 0.4);
}

.card-header {
  text-align: center;
  margin-bottom: 20px;
}

.card-header h3 {
  color: #f2f2f7;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar-container {
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative !important;
  margin: 10px !important;
}

.progress-card:hover .progress-bar-container {
  transform: scale(1.02);
}

#percentageCounter {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  color: #f2f2f7; /* Website accent color */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 15px rgba(242, 242, 247, 0.5);
  transition: all 0.3s ease;
}

.progress-card:hover #percentageCounter {
  font-size: 2em;
  text-shadow: 0 0 25px rgba(242, 242, 247, 0.8);
  color: #ffffff;
}

.progress-card:hover .inner_progress_circle {
  opacity: 1;
  stroke-width: 8;
  stroke: #ffffff;
}

.progress-card:hover .wobbling-element {
  animation-play-state: paused;
}

.outer_circle {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 2;
  stroke-dasharray: 7 1;
  stroke-dashoffset: 0;
  opacity: 0.8;
}

.outer_circle_bars_l {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 0.4 7.6;
  stroke-dashoffset: 0.1;
  opacity: 0.6;
}

.outer_circle_bars_r {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 0.4 7.6;
  stroke-dashoffset: 1.4;
  opacity: 0.6;
}

.inner_progress_circle {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 48.64 15.36; /* Updated to 76% progress (76% of 64 = 48.64) */
  stroke-dashoffset: 0.05;
  opacity: 0.9;
  transition: stroke-dasharray 0.1s ease;
}

.inner_half_circle {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 24.5 0.5;
  stroke-dashoffset: 0;
  opacity: 0.7;
}

.center_outer_circle {
  fill: transparent;
  stroke: #a1a1a6; /* Website secondary text color */
  stroke-width: 1;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  opacity: 0.5;
}

.center_inner_circle_second {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 2;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 0;
  animation: centerInnerCircleSecond 20s linear infinite;
  animation-timing-function: steps(4, end);
  opacity: 0.8;
}

.center_inner_circle_3 {
  fill: transparent;
  stroke: #a1a1a6; /* Website secondary text color */
  stroke-width: 2;
  stroke-dasharray: 33 66;
  stroke-dashoffset: -10;
  opacity: 0.3;
}

.center_inner_circle_3_dashed_verticle {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 0.2 7.8;
  stroke-dashoffset: 0;
  opacity: 0.4;
}

.center_inner_circle_3_dashed {
  fill: transparent;
  stroke: #a1a1a6; /* Website secondary text color */
  stroke-width: 1;
  stroke-dasharray: 1 3.5;
  stroke-dashoffset: 0;
  opacity: 0.3;
}

.center_inner_circle_2 {
  fill: transparent;
  stroke: #a1a1a6; /* Website secondary text color */
  stroke-width: 1;
  stroke-dasharray: 75 25;
  stroke-dashoffset: 60;
  opacity: 0.3;
}

.center_inner_circle_1 {
  fill: transparent;
  stroke: #a1a1a6; /* Website secondary text color */
  stroke-width: 1;
  stroke-dasharray: 95 5;
  stroke-dashoffset: 20;
  opacity: 0.3;
}

.center_inner_circle_0 {
  fill: transparent;
  stroke: #f2f2f7; /* Website accent color */
  stroke-width: 7;
  stroke-dasharray: 0.3 0.7;
  stroke-dashoffset: 0;
  animation: centerInnerCircle0 40s linear infinite;
  opacity: 0.3;
}

.small_rectangles {
  fill: #f2f2f7; /* Website accent color */
  opacity: 0.6;
  /* Add subtle pulsing animation */
  animation: rectanglePulse 3s ease-in-out infinite alternate;
}

.wobbling-element {
  animation: wobble 4s ease-in-out infinite;
  display: inline-block;
  will-change: transform;
  /* Add initial fade-in animation */
  animation: wobble 4s ease-in-out infinite, fadeInScale 1s ease-out forwards;
}

/* === KEYFRAME ANIMATIONS === */

/* Progress fill animation for the main ring */
@keyframes progressFillAnimation {
  0% {
    stroke-dasharray: 0 64;
  }
  100% {
    stroke-dasharray: 48.64 15.36; /* 76% progress */
  }
}

/* Rectangle pulsing animation */
@keyframes rectanglePulse {
  0% {
    opacity: 0.4;
    fill: #a1a1a6;
  }
  100% {
    opacity: 0.8;
    fill: #f2f2f7;
  }
}

/* Fade in and scale animation for initial load */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotating inner circle animation (stepped) */
@keyframes centerInnerCircleSecond {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Smooth rotating animation */
@keyframes centerInnerCircle0 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Enhanced wobble animation with theme-appropriate movement */
@keyframes wobble {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(1px, -1px) rotate(0.5deg);
  }
  50% {
    transform: translate(0px, 1px) rotate(0deg);
  }
  75% {
    transform: translate(-1px, 0px) rotate(-0.5deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

/* Enhanced glow effect for the card */
.progress-card .wobbling-element svg {
  filter: drop-shadow(0 0 20px rgba(242, 242, 247, 0.1));
  transition: filter 0.3s ease;
}

.progress-card:hover .wobbling-element svg {
  filter: drop-shadow(0 0 30px rgba(242, 242, 247, 0.3));
}

/* Add subtle animation to the card */
@keyframes cardFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
}

.progress-card {
  animation: cardFloat 6s ease-in-out infinite;
}

.progress-card:hover {
  animation-play-state: paused;
}