/**
 * AnimateScroll CSS
 * 動畫效果樣式定義
 */

/* 基礎設置 */
.animate-scroll-element {
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  will-change: opacity, transform;
}

.animate-scroll-animated {
  opacity: 1 !important;
}

/* ==================== Fade 動畫 ==================== */

/* Fade Up */
[data-animate-type="fade-up"] {
  transform: translateY(80px);
  opacity: 0;
}

.animate-scroll-fade-up {
  transform: translateY(0);
  opacity: 1;
}

/* Fade Down */
[data-animate-type="fade-down"] {
  transform: translateY(-80px);
  opacity: 0;
}

.animate-scroll-fade-down {
  transform: translateY(0);
  opacity: 1;
}

/* Fade Left */
[data-animate-type="fade-left"] {
  transform: translateX(80px);
  opacity: 0;
}

.animate-scroll-fade-left {
  transform: translateX(0);
  opacity: 1;
}

/* Fade Right */
[data-animate-type="fade-right"] {
  transform: translateX(-80px);
  opacity: 0;
}

.animate-scroll-fade-right {
  transform: translateX(0);
  opacity: 1;
}

/* Fade In */
[data-animate-type="fade-in"] {
  transform: scale(1);
  opacity: 0;
}

.animate-scroll-fade-in {
  transform: scale(1);
  opacity: 1;
}

/* ==================== Zoom 動畫 ==================== */

/* Zoom In */
[data-animate-type="zoom-in"] {
  transform: scale(0.8);
}

.animate-scroll-zoom-in {
  transform: scale(1);
}

/* Zoom Out */
[data-animate-type="zoom-out"] {
  transform: scale(1.2);
}

.animate-scroll-zoom-out {
  transform: scale(1);
}

/* ==================== Slide 動畫 ==================== */

/* Slide Up */
[data-animate-type="slide-up"] {
  transform: translateY(50px);
}

.animate-scroll-slide-up {
  transform: translateY(0);
}

/* Slide Down */
[data-animate-type="slide-down"] {
  transform: translateY(-50px);
}

.animate-scroll-slide-down {
  transform: translateY(0);
}

/* Slide Left */
[data-animate-type="slide-left"] {
  transform: translateX(50px);
}

.animate-scroll-slide-left {
  transform: translateX(0);
}

/* Slide Right */
[data-animate-type="slide-right"] {
  transform: translateX(-50px);
}

.animate-scroll-slide-right {
  transform: translateX(0);
}

/* ==================== Flip 動畫 ==================== */

/* Flip Up */
[data-animate-type="flip-up"] {
  transform: perspective(1000px) rotateX(-45deg);
  transform-origin: center bottom;
}

.animate-scroll-flip-up {
  transform: perspective(1000px) rotateX(0deg);
}

/* Flip Down */
[data-animate-type="flip-down"] {
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: center top;
}

.animate-scroll-flip-down {
  transform: perspective(1000px) rotateX(0deg);
}

/* Flip Left */
[data-animate-type="flip-left"] {
  transform: perspective(1000px) rotateY(45deg);
  transform-origin: center left;
}

.animate-scroll-flip-left {
  transform: perspective(1000px) rotateY(0deg);
}

/* Flip Right */
[data-animate-type="flip-right"] {
  transform: perspective(1000px) rotateY(-45deg);
  transform-origin: center right;
}

.animate-scroll-flip-right {
  transform: perspective(1000px) rotateY(0deg);
}

/* ==================== 效能優化 ==================== */

/* 減少重繪 */
@media (prefers-reduced-motion: reduce) {
  .animate-scroll-element {
    transition: none !important;
  }
  
  [data-animate-type] {
    transform: none !important;
    opacity: 1 !important;
  }
}