/* Motion.js 動畫增強樣式 */

/* 基礎動畫設置 */
[data-motion] {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 動畫完成後的狀態 */
[data-motion-animated] {
  will-change: auto;
}

/* 特殊動畫效果 */
.motion-glow {
  animation: motionGlow 2s ease-in-out infinite alternate;
}

@keyframes motionGlow {
  0% {
    box-shadow: 0 0 20px rgba(120, 200, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 40px rgba(120, 200, 255, 0.6);
  }
}

/* 懸停時的動畫增強 */
[data-motion]:hover:not(.carousel-slide):not(#carousel):not(nav):not(nav *) {
  transform: translateY(-3px) !important;
  transition: transform 0.3s ease !important;
}

/* 排除輪播圖元素的懸浮效果 */
.carousel-slide, #carousel {
  will-change: auto !important;
}

.carousel-slide:hover, #carousel:hover {
  transform: none !important;
}

/* 排除導航列的懸浮效果 */
nav, nav *, nav a, nav button, nav div {
  transform: none !important;
}

nav:hover, nav *:hover, nav a:hover, nav button:hover, nav div:hover {
  transform: none !important;
}

/* 針對不同動畫類型的特殊處理 */
[data-motion="bounceIn"] {
  transform-origin: center center;
}

[data-motion="flipInX"] {
  transform-origin: center center;
  transform-style: preserve-3d;
}

[data-motion="flipInY"] {
  transform-origin: center center;
  transform-style: preserve-3d;
}

[data-motion="rotateIn"] {
  transform-origin: center center;
}

/* 視窗大小適配 */
@media (max-width: 768px) {
  [data-motion] {
    /* 在小螢幕上減少動畫強度 */
    transform: scale(0.95) !important;
  }
}

/* 減少動畫偏好設置 */
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    animation: none !important;
    transition: none !important;
  }
}

/* 高性能動畫設置 */
.motion-smooth {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}

/* 動畫順序控制 */
[data-motion-delay="0.1"] { animation-delay: 0.1s; }
[data-motion-delay="0.2"] { animation-delay: 0.2s; }
[data-motion-delay="0.3"] { animation-delay: 0.3s; }
[data-motion-delay="0.4"] { animation-delay: 0.4s; }
[data-motion-delay="0.5"] { animation-delay: 0.5s; }
[data-motion-delay="0.6"] { animation-delay: 0.6s; }
[data-motion-delay="0.7"] { animation-delay: 0.7s; }
[data-motion-delay="0.8"] { animation-delay: 0.8s; }
[data-motion-delay="0.9"] { animation-delay: 0.9s; }
[data-motion-delay="1.0"] { animation-delay: 1.0s; }

/* 特殊效果 */
.motion-particle {
  position: relative;
  overflow: hidden;
}

.motion-particle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: motionParticle 3s infinite;
}

@keyframes motionParticle {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 鼠標跟隨效果 */
.motion-follow {
  transition: transform 0.1s ease-out;
}

/* 脈衝效果 */
.motion-pulse {
  animation: motionPulse 2s infinite;
}

@keyframes motionPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 呼吸效果 */
.motion-breathe {
  animation: motionBreathe 4s ease-in-out infinite;
}

@keyframes motionBreathe {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* 載入動畫 */
.motion-loading {
  position: relative;
}

.motion-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid rgba(120, 200, 255, 0.8);
  border-radius: 50%;
  animation: motionSpin 1s linear infinite;
}

@keyframes motionSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}