/* ═══════════════════════════════════════════════════════
   05-ANIMATIONS.CSS — Simplified Animation System
   Performance-optimized, respects prefers-reduced-motion
   ═══════════════════════════════════════════════════════ */

/* ─── Reveal Animations ─── */
.reveal-up,
.reveal-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-fade {
  transform: none;
}

.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Staggered Children ─── */
.hrl-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.hrl-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.hrl-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; }
.hrl-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.hrl-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.hrl-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.hrl-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* ─── Counter Animation ─── */
.hrl-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Audio Visualizer ─── */
.waveform-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
}

.waveform-bar {
  width: 3px;
  background: var(--accent-gold);
  border-radius: var(--radius-sm);
  transform-origin: bottom;
  animation: waveBar var(--duration, 0.8s) ease-in-out infinite alternate;
  animation-play-state: paused;
}

@keyframes waveBar {
  from { transform: scaleY(0.2); opacity: 0.5; }
  to { transform: scaleY(1); opacity: 1; }
}

.is-playing .waveform-bar {
  animation-play-state: running;
}

/* ─── Loading Skeleton ─── */
.hrl-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.hrl-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Ticker Animation ─── */
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-move {
  animation: ticker-scroll 40s linear infinite;
}

.ticker-move.reverse {
  animation-direction: reverse;
}

.ticker-move:hover {
  animation-play-state: paused;
}

/* ─── Progress Bar ─── */
#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-accent);
  width: 0;
  z-index: var(--z-max);
  transition: width 150ms linear;
}

/* ─── Back to Top ─── */
#backToTop {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  background: var(--accent-gold);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-lg);
}

#backToTop.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

#backToTop:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}