/* Transparent display for graphics overlay */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: transparent;
  font-family: 'TASA Explorer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Container for scalable overlay */
.progress-container {
  position: relative;
  width: 100vw; /* Full width for scalability */
  height: 5vh; /* Scalable height based on viewport */
  min-height: 60px; /* Minimum height */
  max-height: 120px; /* Maximum height for very large screens */
  padding: 0 50px; /* Add padding left and right */
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.progress-container.loaded {
  opacity: 1;
}

/* Progress bar styling */
.progress-bar {
  width: 100%;
  height: 100%; /* Full height of container */
  background: #e3f2fd; /* Light blue background like original site */
  border-radius: 2.5vh; /* Scalable border radius */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.6);
  border: 3px solid #bbdefb;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2196f3 0%, #1976d2 50%, #0d47a1 100%);
  border-radius: 2.4vh; /* Slightly smaller for fill */
  transition: width 0.1s ease-out;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.1) 100%);
  border-radius: 2.4vh; /* Match fill */
}

/* Progress text overlay */
.progress-text {
  position: absolute;
  top: 49%; /* Moved up slightly */
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-size: clamp(1.5rem, 2.5vw, 5rem); /* Increased size */
  font-weight: 700;
  color: transparent;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
}

.progress-text::before {
  content: attr(data-text);
  position: absolute;
  top: 49%; /* Moved up slightly */
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-size: clamp(1.5rem, 2.5vw, 5rem); /* Increased size */
  font-weight: 700;
  color: black;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  text-align: center;
  white-space: nowrap;
}

.progress-text::after {
  content: attr(data-text);
  position: absolute;
  top: 49%; /* Moved up slightly */
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-size: clamp(1.5rem, 2.5vw, 5rem); /* Increased size */
  font-weight: 700;
  color: white;
  text-align: center;
  white-space: nowrap;
  clip-path: polygon(0% 0%, var(--progress-width, 0%) 0%, var(--progress-width, 0%) 100%, 0% 100%);
  transition: clip-path 0.1s ease-out;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 1280px) {
  .progress-container {
    height: 6vh; /* Slightly taller for smaller screens */
  }
}

@media (max-width: 768px) {
  .progress-container {
    height: 7vh; /* Taller for mobile */
  }
}

/* 4K and ultra-wide displays */
@media (min-width: 3840px) {
  .progress-container {
    height: 6vh; /* Taller for 4K prominence */
    max-height: 200px; /* Allow larger max height */
  }
}

/* Animation for smooth progress updates */
@keyframes progressGlow {
  0% { box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.6); }
  50% { box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4), 0 0 20px rgba(255,255,255,0.7); }
  100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.6); }
}

.progress-bar {
  animation: progressGlow 3s ease-in-out infinite;
}

/* Ensure text is always readable */
.progress-text span {
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

/* Goal celebration effect for display mode */
.progress-bar.celebrating {
  animation: celebrateFlash 0.3s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(255, 255, 255, 1.2);
}

.progress-bar.celebrating ~ .progress-text::before {
  color: black;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.progress-bar.celebrating ~ .progress-text::after {
  display: none;
}

@keyframes celebrateFlash {
  0% {
    background: #e3f2fd;
    border-color: #bbdefb;
  }
  50% {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 80px rgba(255, 255, 255, 1.5);
  }
  100% {
    background: #e3f2fd;
    border-color: #bbdefb;
  }
}

.progress-bar.celebrating .progress-fill {
  background: linear-gradient(90deg, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%);
  animation: celebrateFillFlash 0.3s ease-in-out infinite;
}

@keyframes celebrateFillFlash {
  0% {
    background: linear-gradient(90deg, #2196f3 0%, #1976d2 50%, #0d47a1 100%);
  }
  50% {
    background: linear-gradient(90deg, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%);
  }
  100% {
    background: linear-gradient(90deg, #2196f3 0%, #1976d2 50%, #0d47a1 100%);
  }
}