/* ============================================
   VenusSound - 动画效果
   波形动画、过渡效果、交互动画
   ============================================ */

/* ============================================
   关键帧动画
   ============================================ */

/* 波形动画 - 上下浮动 */
@keyframes waveFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 波形条形动画 */
@keyframes waveBar {
  0%, 100% {
    height: 20%;
  }
  50% {
    height: 80%;
  }
}

/* 脉冲光晕 */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px var(--color-accent-cyan-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--color-accent-cyan-glow), 0 0 60px var(--color-accent-cyan-glow);
  }
}

/* 渐入上移 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 渐入下移 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 渐入缩放 */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 左右摇摆 */
@keyframes swing {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* 旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 打字机光标闪烁 */
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* 扫描线效果 */
@keyframes scanline {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

/* 波纹扩散 */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 频谱分析器动画 */
@keyframes spectrumBar1 {
  0%, 100% { height: 30%; }
  25% { height: 70%; }
  50% { height: 45%; }
  75% { height: 85%; }
}

@keyframes spectrumBar2 {
  0%, 100% { height: 50%; }
  25% { height: 35%; }
  50% { height: 80%; }
  75% { height: 40%; }
}

@keyframes spectrumBar3 {
  0%, 100% { height: 70%; }
  25% { height: 40%; }
  50% { height: 60%; }
  75% { height: 90%; }
}

@keyframes spectrumBar4 {
  0%, 100% { height: 40%; }
  25% { height: 85%; }
  50% { height: 55%; }
  75% { height: 30%; }
}

/* ============================================
   动画工具类
   ============================================ */
.animate-wave-float {
  animation: waveFloat 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out forwards;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.5s ease-out forwards;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-swing {
  animation: swing 2s ease-in-out infinite;
}

/* 动画延迟 */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* 初始隐藏（用于滚动触发动画） */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   波形可视化组件
   ============================================ */
.waveform-container {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.waveform-bar {
  width: 4px;
  background: linear-gradient(to top, var(--color-accent-cyan), var(--color-accent-purple));
  border-radius: var(--radius-full);
  animation: waveBar 0.8s ease-in-out infinite;
}

.waveform-bar:nth-child(1) { animation-delay: 0s; height: 30%; }
.waveform-bar:nth-child(2) { animation-delay: 0.1s; height: 50%; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; height: 70%; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; height: 40%; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; height: 60%; }
.waveform-bar:nth-child(6) { animation-delay: 0.5s; height: 80%; }
.waveform-bar:nth-child(7) { animation-delay: 0.6s; height: 50%; }
.waveform-bar:nth-child(8) { animation-delay: 0.7s; height: 30%; }

/* ============================================
   频谱分析器
   ============================================ */
.spectrum-analyzer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
  gap: 4px;
  padding: var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg);
}

.spectrum-bar {
  width: 8px;
  min-height: 10%;
  background: var(--gradient-accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.spectrum-bar:nth-child(4n+1) { animation: spectrumBar1 1.2s ease-in-out infinite; }
.spectrum-bar:nth-child(4n+2) { animation: spectrumBar2 1.4s ease-in-out infinite; }
.spectrum-bar:nth-child(4n+3) { animation: spectrumBar3 1.1s ease-in-out infinite; }
.spectrum-bar:nth-child(4n+4) { animation: spectrumBar4 1.5s ease-in-out infinite; }

/* ============================================
   悬停效果
   ============================================ */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-cyan);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ============================================
   加载动画
   ============================================ */
.loader {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.loader-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent-cyan);
  border-radius: var(--radius-full);
  animation: waveBar 0.6s ease-in-out infinite;
}

.loader-dot:nth-child(2) { animation-delay: 0.1s; }
.loader-dot:nth-child(3) { animation-delay: 0.2s; }

/* 旋转加载器 */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-cyan);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

/* ============================================
   页面过渡
   ============================================ */
.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* ============================================
   VU 表动画
   ============================================ */
.vu-meter {
  position: relative;
  width: 100%;
  height: 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.vu-meter-fill {
  height: 100%;
  background: linear-gradient(to right, 
    var(--color-accent-cyan) 0%, 
    #00ff88 40%, 
    #ffcc00 70%, 
    var(--color-accent-orange) 90%
  );
  border-radius: var(--radius-full);
  transition: width 0.1s ease-out;
}

.vu-meter-peak {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--color-accent-orange);
  border-radius: var(--radius-full);
}

/* ============================================
   旋钮动画
   ============================================ */
.knob {
  position: relative;
  width: 60px;
  height: 60px;
  background: var(--gradient-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.knob:hover {
  border-color: var(--color-accent-cyan);
}

.knob::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 12px;
  background: var(--color-accent-cyan);
  border-radius: var(--radius-full);
}

.knob::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
}

/* ============================================
   音频波形背景
   ============================================ */
.audio-wave-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.audio-wave-bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300d4ff' fill-opacity='0.05' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,181.3C960,203,1056,213,1152,192C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  animation: waveFloat 8s ease-in-out infinite;
}

/* ============================================
   禁用动画（减少动效偏好）
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}