/* =============================================================================
   Wave Background Animation - Light Theme
   流動波浪背景動畫 - 淺色主題

   特點：
   - 3層流動波浪，不同速度和方向
   - 淺色系配色，與現有設計協調
   - 中等速度動畫（10-15秒循環）
   - GPU 加速，性能優化
   - 響應式設計，支持無障礙
   ============================================================================= */

/* 波浪背景容器 */
.wave-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #fef3c7 100%);
}

/* 波浪基礎樣式 */
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  opacity: 0.4;
  will-change: transform;
}

/* 第一層波浪 - 淺藍色，慢速向右 */
.wave-1 {
  opacity: 0.3;
  animation: wave-move-1 12s linear infinite;
}

.wave-1 path {
  fill: rgba(224, 242, 254, 0.6); /* 淺天藍 #e0f2fe */
}

/* 第二層波浪 - 淺青色，中速向左 */
.wave-2 {
  opacity: 0.35;
  animation: wave-move-2 15s linear infinite reverse;
}

.wave-2 path {
  fill: rgba(207, 250, 254, 0.5); /* 淺青色 #cffafe */
}

/* 第三層波浪 - 淺黃色，快速向右 */
.wave-3 {
  opacity: 0.25;
  animation: wave-move-3 10s linear infinite;
}

.wave-3 path {
  fill: rgba(254, 249, 195, 0.7); /* 淺黃色 #fef9c3 */
}

/* 第四層波浪 - 淺紫藍，慢速向左（可選） */
.wave-4 {
  opacity: 0.2;
  animation: wave-move-4 18s linear infinite reverse;
}

.wave-4 path {
  fill: rgba(191, 219, 254, 0.4); /* 淺紫藍 #bfdbfe */
}

/* =============================================================================
   波浪移動動畫
   ============================================================================= */

/* 波浪向右移動 */
@keyframes wave-move-1 {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

/* 波浪向左移動（反向） */
@keyframes wave-move-2 {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

/* 波浪向右快速移動 */
@keyframes wave-move-3 {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

/* 波浪向左慢速移動 */
@keyframes wave-move-4 {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}

/* =============================================================================
   響應式設計
   ============================================================================= */

/* 平板設備：減少透明度 */
@media (max-width: 1024px) {
  .wave {
    opacity: 0.3;
  }

  .wave-1 {
    opacity: 0.25;
  }

  .wave-2 {
    opacity: 0.3;
  }

  .wave-3 {
    opacity: 0.2;
  }

  .wave-4 {
    opacity: 0.15;
  }
}

/* 手機設備：簡化動畫 */
@media (max-width: 768px) {
  .wave {
    opacity: 0.25;
  }

  /* 隱藏第四層波浪以提升性能 */
  .wave-4 {
    display: none;
  }

  /* 加快動畫速度以減少性能消耗 */
  .wave-1 {
    animation-duration: 10s;
  }

  .wave-2 {
    animation-duration: 12s;
  }

  .wave-3 {
    animation-duration: 8s;
  }
}

/* 小手機：進一步簡化 */
@media (max-width: 480px) {
  .wave {
    opacity: 0.2;
  }

  /* 只保留兩層波浪 */
  .wave-3 {
    display: none;
  }

  .wave-1 {
    animation-duration: 8s;
  }

  .wave-2 {
    animation-duration: 10s;
  }
}

/* =============================================================================
   無障礙支持 - 尊重用戶偏好
   ============================================================================= */

/* 用戶偏好減少動畫 */
@media (prefers-reduced-motion: reduce) {
  .wave {
    animation: none !important;
    opacity: 0.15;
  }

  .wave-background {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #fef3c7 100%);
  }
}

/* 高對比度模式 */
@media (prefers-contrast: high) {
  .wave {
    opacity: 0.5;
  }
}

/* =============================================================================
   打印樣式
   ============================================================================= */

@media print {
  .wave-background {
    display: none;
  }
}

/* =============================================================================
   性能優化提示
   ============================================================================= */

/*
 * GPU 加速已通過 will-change 和 translateZ(0) 啟用
 * 使用 transform 而非 position 以獲得更好的性能
 * 透明度使用 opacity 而非 rgba 在動畫中更高效
 */