/* ============================================
   動畫效果
   ============================================ */

/* 淡入動畫 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* 發光脈衝動畫 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.8);
  }
}

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

/* 發光核心動畫 */
@keyframes glow-core {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    filter: blur(20px);
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    filter: blur(30px);
  }
}

.glow-core {
  animation: glow-core 3s ease-in-out infinite;
}

/* 滑入動畫 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

/* 旋轉動畫 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 20s linear infinite;
}

/* 浮動動畫 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* 滾動顯示動畫 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}