/* Progress bar that tracks scroll position */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #2a3f5f, #4a7c59);
  z-index: 1000;
  transition: width 0.2s ease;
}

/* Attention indicator - changes based on pause duration */
.attention-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #666;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.attention-indicator.active {
  background: #4a7c59;
  box-shadow: 0 0 10px rgba(74, 124, 89, 0.5);
}

.attention-indicator.deep {
  background: #2a3f5f;
  box-shadow: 0 0 20px rgba(42, 63, 95, 0.7);
  transform: scale(1.2);
}

/* Reading pace visualization */
.pace-indicator {
  margin: 2em 0;
  padding: 1em;
  border-left: 3px solid #666;
  background: rgba(42, 63, 95, 0.1);
  font-style: italic;
  transition: all 0.5s ease;
}

.pace-indicator.slow {
  border-left-color: #4a7c59;
  background: rgba(74, 124, 89, 0.1);
}

.pace-indicator.fast {
  border-left-color: #c07654;
  background: rgba(192, 118, 84, 0.1);
}

/* Paragraph completion markers */
.paragraph-marker {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.paragraph-marker.read {
  opacity: 1;
}

/* Time-based content reveals */
.slow-reveal {
  opacity: 0;
  transition: opacity 2s ease;
}

.slow-reveal.visible {
  opacity: 1;
}