/* =============================================================================
   PROGRESS-BAR.CSS — Reading Progress Indicator
   Hello Elementor Child Theme

   A thin fixed bar at the very top of the viewport.
   Grows from 0% to 100% width as the reader scrolls through
   the article content area specifically (not the entire page).

   Width is driven by assets/js/progress-bar.js which updates
   the CSS custom property --hec-progress-value via inline style.

   Design intent:
     Subtle enough to be ignored, useful enough to be noticed.
     Brand amber-to-gold gradient on a muted track.
     The glow effect gives it a premium, luminous quality.
   ============================================================================= */


/* =============================================================================
   1. PROGRESS BAR TRACK (background)
   ============================================================================= */

.hec-progress-bar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  z-index:    var(--hec-z-progress);

  /* Track color */
  background: var(--hec-color-progress-bg);

  /*
   * Prevent the bar from intercepting mouse events.
   * It is purely visual.
   */
  pointer-events: none;

  /* Allow transitions on theme change */
  transition:
    background var(--hec-transition-slow);
}


/* =============================================================================
   2. PROGRESS BAR FILL
   ============================================================================= */

.hec-progress-bar::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  height:     100%;

  /*
   * Width is driven by progress-bar.js via inline style:
   * element.style.setProperty('--hec-progress-value', percentage + '%')
   * on the parent .hec-progress-bar element.
   * We read it here via var().
   */
  width:      var(--hec-progress-value, 0%);

  /* Brand gradient — amber to gold */
  background: var(--hec-color-progress-fill);

  /*
   * Smooth width transition makes the bar feel fluid rather than
   * jumping in discrete increments as the scroll event fires.
   * 100ms is fast enough to track closely, slow enough to smooth.
   */
  transition: width 100ms var(--hec-ease-out);

  /*
   * Glowing right edge — gives the leading tip a luminous quality.
   * The box-shadow creates a small amber glow just ahead of the fill.
   */
  box-shadow:
    2px 0 8px  var(--hec-brand-amber),
    4px 0 16px rgba(209, 106, 11, 0.40);

  border-radius: 0 var(--hec-radius-full) var(--hec-radius-full) 0;
}


/* =============================================================================
   3. READING TIME LABEL
   An optional small label that appears on the right end of the track
   showing remaining reading time. Populated by progress-bar.js.
   Only visible when the reader has started scrolling.
   ============================================================================= */

.hec-progress-bar__label {
  position:    absolute;
  right:       var(--hec-space-4);
  top:         50%;
  transform:   translateY(-50%);

  font-family: var(--hec-font-meta);
  font-size:   var(--hec-text-xs);
  font-weight: var(--hec-weight-semibold);
  color:       var(--hec-color-text-tertiary);
  white-space: nowrap;

  /*
   * Vertically offset below the bar so it sits just under
   * the 3px bar height.
   */
  top:         var(--hec-space-4);
  transform:   none;

  opacity:     0;
  transition:
    opacity   var(--hec-transition-normal),
    color     var(--hec-transition-slow);
}

/* Label becomes visible after 5% progress */
.hec-progress-bar.hec-progress--started .hec-progress-bar__label {
  opacity: 1;
}

/* Label changes color when near end */
.hec-progress-bar.hec-progress--near-end .hec-progress-bar__label {
  color: var(--hec-color-accent);
}

/* Label hidden when complete */
.hec-progress-bar.hec-progress--complete .hec-progress-bar__label {
  opacity: 0;
}


/* =============================================================================
   4. COMPLETION CELEBRATION
   When the reader reaches 100%, a brief celebration moment fires.
   The bar pulses with a warm glow then holds steady.
   ============================================================================= */

.hec-progress-bar.hec-progress--complete::after {
  width:      100%;
  background: linear-gradient(
                90deg,
                var(--hec-brand-amber) 0%,
                var(--hec-brand-gold)  50%,
                var(--hec-brand-amber) 100%
              );
  background-size: 200% 100%;
  animation:  hec-progress-complete-pulse
              1.2s
              var(--hec-ease-smooth)
              1
              forwards;
  box-shadow:
    0 0 12px var(--hec-brand-gold),
    0 0 24px rgba(255, 191, 0, 0.40);
}

@keyframes hec-progress-complete-pulse {
  0%   { background-position: 0%   50%; box-shadow: 0 0 12px var(--hec-brand-gold), 0 0 24px rgba(255,191,0,0.40); }
  50%  { background-position: 100% 50%; box-shadow: 0 0 20px var(--hec-brand-gold), 0 0 40px rgba(255,191,0,0.60); }
  100% { background-position: 0%   50%; box-shadow: 0 0  8px var(--hec-brand-amber), 0 0 16px rgba(209,106,11,0.30); }
}


/* =============================================================================
   5. DARK MODE
   Variable overrides in dark-mode.css handle most of this.
   Only the glow color changes meaningfully in dark mode.
   ============================================================================= */

[data-theme="dark"] .hec-progress-bar::after {
  box-shadow:
    2px 0 10px  var(--hec-brand-amber),
    4px 0 20px  rgba(255, 191, 0, 0.30);
}

[data-theme="dark"] .hec-progress-bar.hec-progress--complete::after {
  box-shadow:
    0 0 16px var(--hec-brand-gold),
    0 0 32px rgba(255, 191, 0, 0.50);
}


/* =============================================================================
   6. REDUCED MOTION
   Replace animated fill transition with instant update.
   Remove glow effects entirely.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hec-progress-bar::after {
    transition: none;
    box-shadow: none;
  }

  .hec-progress-bar.hec-progress--complete::after {
    animation: none;
    box-shadow: none;
  }
}