/**
 * Reading Progress Indicator
 * Dr. Yıldız Digital Ecosystem
 * 
 * Requirements: 32.1, 32.2, 32.3, 32.4, 32.5
 * 
 * 32.1: Display thin horizontal progress bar at top of viewport
 * 32.2: Update width proportionally to scroll position within article body
 * 32.3: Use primary accent color (#f03167) with 2-3px height
 * 32.4: Show bar at 100% width when reaching end of article
 * 32.5: Smoothly fade out when navigating away from article
 */

/* Reading Progress Container */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-fixed, 1000);
  background-color: transparent;
  pointer-events: none;
  
  /* Fade-in/out transitions (Requirement 32.5) */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Visible state - fades in when article is being read */
.reading-progress.is-visible {
  opacity: 1;
}

/* Fade out state - for page navigation */
.reading-progress.is-fading-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* Progress Bar (Requirement 32.3) */
.reading-progress__bar {
  height: 100%;
  width: 0;
  background-color: var(--color-primary, #f03167);
  
  /* Smooth width transition for progress updates */
  transition: width 0.1s ease-out;
  
  /* Subtle glow effect for premium feel */
  box-shadow: 0 0 4px rgba(240, 49, 103, 0.3);
}

/* When progress reaches 100% (Requirement 32.4) */
.reading-progress__bar.is-complete {
  background: linear-gradient(
    90deg,
    var(--color-primary, #f03167),
    var(--color-secondary, #ffc0cb)
  );
}

/* Track background - subtle indicator of total length */
.reading-progress__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: var(--color-border, rgba(0, 0, 0, 0.1));
  opacity: 0.3;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reading-progress,
  .reading-progress__bar {
    transition: none;
  }
}

/* Hide on print */
@media print {
  .reading-progress {
    display: none;
  }
}