/*
 * GOLPOOGRO - Component: Story Progress Segments
 * Sleek linear progress bars ticking at the top of active stories
 */

.story-progress-container {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 2px 0;
}

.story-progress-segment {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.story-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
  border-radius: 99px;
  transition: width 0.1s linear;
}

.story-progress-fill.completed {
  width: 100% !important;
}

.story-progress-fill.active-run {
  /* Animate via JS script */
}

/* Audio Wave Visualizer animation inside active music/voice stories */
.voice-wave-container {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
}

.voice-wave-bar {
  width: 3px;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-gold);
  animation: voiceWaveBounce 1.2s ease-in-out infinite alternate;
}

.voice-wave-bar:nth-child(2) { animation-delay: 0.15s; height: 60%; }
.voice-wave-bar:nth-child(3) { animation-delay: 0.3s; height: 85%; }
.voice-wave-bar:nth-child(4) { animation-delay: 0.45s; height: 40%; }
.voice-wave-bar:nth-child(5) { animation-delay: 0.6s; height: 70%; }

@keyframes voiceWaveBounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.1); }
}