/* Reading Progress Bar - More Subtle */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px; /* Reduced from 4px */
  background: linear-gradient(to right, var(--primary-light), var(--primary-color));
  width: 0%;
  z-index: 2000;
  transition: width 0.1s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Reduced shadow */
}

.reading-progress-bar.complete {
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
}

/* Add a subtle animation when complete */
@keyframes pulse {
  0% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.85;
  }
}

.reading-progress-bar.complete {
  animation: pulse 2s infinite;
}

/* Make the progress bar thicker on mobile for better touch visibility */
@media (max-width: 768px) {
  .reading-progress-bar {
    height: 4px;
  }
}