/**
 * Viewer Wave Bar Styles
 * Animated wave visualization for live viewer count
 */

:root {
  --wave-purple: #b478ff;
  --wave-purple-dark: #a855f7;
  --wave-glow: rgba(180, 120, 255, 0.3);
}

.viewer-wave-bar-container {
  width: 100%;
  padding: 8px 0;
  margin: 0;
  display: block;
}

.wave-bar-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wave-purple);
  text-shadow: 0 0 12px rgba(180, 120, 255, 0.5);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 0.03em;
  font-family: 'Inter', 'Space Grotesk', sans-serif;
}

/* Animation */
@keyframes waveBarFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.viewer-wave-bar-container {
  animation: waveBarFadeIn 0.5s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .viewer-wave-bar-container {
    padding: 6px 0;
  }

  .wave-bar-label {
    font-size: 0.8rem;
    left: 12px;
  }
}