/*
 * 渙潮科技有限公司 - 動畫效果庫
 * 清新現代動畫系統
 */

/* ==========================================
   淡入動畫（延遲版本）
   ========================================== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up-1 {
  animation: fade-in-up 0.6s ease-out 0.1s both;
}

.fade-in-up-2 {
  animation: fade-in-up 0.6s ease-out 0.2s both;
}

.fade-in-up-3 {
  animation: fade-in-up 0.6s ease-out 0.3s both;
}

.fade-in-up-4 {
  animation: fade-in-up 0.6s ease-out 0.4s both;
}

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

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

/* ==========================================
   彈跳進入動畫
   ========================================== */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-100px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================
   滑入動畫（從左）
   ========================================== */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ==========================================
   滑入動畫（從右）
   ========================================== */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ==========================================
   柔和脈衝動畫
   ========================================== */
@keyframes soft-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

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

/* ==========================================
   漸變移動動畫
   ========================================== */
@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animation {
  background-size: 200% 200%;
  animation: gradient-move 8s ease infinite;
}

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

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

/* ==========================================
   震動效果
   ========================================== */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* ==========================================
   彈性放大效果
   ========================================== */
@keyframes elastic-grow {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.elastic-grow {
  animation: elastic-grow 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ==========================================
   呼吸效果
   ========================================== */
@keyframes breathe {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

/* ==========================================
   加載旋轉動畫
   ========================================== */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  border: 3px solid var(--gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

/* ==========================================
   3D 翻轉卡片效果
   ========================================== */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ==========================================
   懸停傾斜效果（3D）
   ========================================== */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.tilt-3d:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* ==========================================
   數字滾動效果（配合 JS）
   ========================================== */
@keyframes number-roll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.number-roll {
  animation: number-roll 0.6s ease-out;
}

/* ==========================================
   波浪動畫
   ========================================== */
@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-25%) translateY(10px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

.wave-animation {
  animation: wave 10s linear infinite;
}

/* ==========================================
   光束掃描效果（清新版）
   ========================================== */
@keyframes scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.scan-effect {
  position: relative;
  overflow: hidden;
}

.scan-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(16, 185, 129, 0.1),
    transparent
  );
  animation: scan 3s ease-in-out infinite;
}

/* ==========================================
   邊框流光動畫（清新版）
   ========================================== */
@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.border-flow {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    linear-gradient(90deg, var(--emerald-500), var(--blue-500), var(--emerald-500)) border-box;
  background-size: 200% 100%;
  animation: border-flow 3s linear infinite;
}

/* ==========================================
   工具類 - 延遲控制
   ========================================== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* ==========================================
   工具類 - 動畫速度
   ========================================== */
.anim-fast { animation-duration: 0.3s; }
.anim-normal { animation-duration: 0.6s; }
.anim-slow { animation-duration: 1.2s; }
.anim-slower { animation-duration: 2s; }

/* ==========================================
   工具類 - 淡入淡出
   ========================================== */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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

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