/**
 * Locomotive Scroll 動畫樣式
 * 新竹市集專案 - 淡入淡出動畫 CSS
 */

/* ==================== 基礎淡入淡出動畫 ==================== */

/* 基礎動畫設定 - GPU 加速和效能優化 */
[data-scroll] {
    will-change: opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0); /* 強制 GPU 加速 */
}

/* 動畫完成後的優化 */
[data-scroll].scroll-animated {
    will-change: auto;
}

/* ==================== 特殊動畫效果 ==================== */

/* 縮放旋轉淡入 - 不會被響應式覆蓋 */
[data-scroll="fade-rotate"] {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="fade-rotate"].scroll-animated {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateZ(0);
}

/* ==================== 動畫延遲設定 ==================== */

/* 延遲動畫類別 */
[data-scroll-delay="0.1"] { transition-delay: 0.1s; }
[data-scroll-delay="0.2"] { transition-delay: 0.2s; }
[data-scroll-delay="0.3"] { transition-delay: 0.3s; }
[data-scroll-delay="0.4"] { transition-delay: 0.4s; }
[data-scroll-delay="0.5"] { transition-delay: 0.5s; }
[data-scroll-delay="0.6"] { transition-delay: 0.6s; }
[data-scroll-delay="0.7"] { transition-delay: 0.7s; }
[data-scroll-delay="0.8"] { transition-delay: 0.8s; }
[data-scroll-delay="0.9"] { transition-delay: 0.9s; }
[data-scroll-delay="1.0"] { transition-delay: 1.0s; }

/* ==================== 動畫持續時間設定 ==================== */

/* 快速動畫 */
[data-scroll-duration="fast"] {
    transition-duration: 0.3s;
}

/* 慢速動畫 */
[data-scroll-duration="slow"] {
    transition-duration: 1.2s;
}

/* 超慢速動畫 */
[data-scroll-duration="very-slow"] {
    transition-duration: 1.8s;
}

/* ==================== 特殊效果 ==================== */

/* 彈跳效果 */
[data-scroll="bounce"] {
    opacity: 0;
    transform: translateY(50px) translateZ(0);
    transition: opacity 0.6s ease, 
                transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-scroll="bounce"].scroll-animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* 彈性效果 */
[data-scroll="elastic"] {
    opacity: 0;
    transform: translateY(50px) translateZ(0);
    transition: opacity 0.6s ease, 
                transform 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-scroll="elastic"].scroll-animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* ==================== 響應式動畫控制 ==================== */

/* 只有有明確值的 data-scroll 元素會被 JavaScript 處理，CSS 不設定預設樣式 */

/* 空的 data-scroll 屬性保持正常顯示 */
[data-scroll=""] {
    opacity: 1;
    transform: none;
}

[data-scroll="fade-left"] {
    opacity: 0;
    transform: translateX(-60px) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="fade-left"].scroll-animated {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

[data-scroll="fade-right"] {
    opacity: 0;
    transform: translateX(60px) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="fade-right"].scroll-animated {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

[data-scroll="fade-up"] {
    opacity: 0;
    transform: translateY(-60px) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="fade-up"].scroll-animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

[data-scroll="fade-scale"] {
    opacity: 0;
    transform: scale(0.6) translateZ(0);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), 
                transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="fade-scale"].scroll-animated {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

[data-scroll="bounce"] {
    opacity: 0;
    transform: translateY(60px) translateZ(0);
    transition: opacity 0.8s ease, 
                transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-scroll="bounce"].scroll-animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* 響應式斷點不需要覆蓋設定，JavaScript 會處理所有動畫邏輯 */

/* 縮減動畫（對於偏好較少動畫的使用者） */
@media (prefers-reduced-motion: reduce) {
    [data-scroll] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==================== 載入狀態 ==================== */

/* 頁面載入時隱藏所有動畫元素，直到 JS 初始化完成 */
.loading [data-scroll] {
    opacity: 0;
    transform: none;
}

/* ==================== 輔助類別 ==================== */

/* 保持可見（不使用淡入效果，但仍有滾動監聽） */
[data-scroll="visible"] {
    opacity: 1 !important;
    transform: none !important;
}

/* 只在桌面版使用動畫 */
[data-scroll="desktop-only"] {
    opacity: 1 !important;
    transform: none !important;
}

@media (min-width: 1024px) {
    [data-scroll="desktop-only"] {
        opacity: 0 !important;
        transform: translateY(50px) translateZ(0) !important;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    [data-scroll="desktop-only"].scroll-animated {
        opacity: 1 !important;
        transform: translateY(0) translateZ(0) !important;
    }
}

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

/* GPU 加速設定已整合到基礎樣式中 */
/* 如需額外優化可在此處添加 */

/* 移動端優化 */
@media (max-width: 768px) {
    [data-scroll] {
        transition-duration: 0.4s !important; /* 移動端更快的動畫 */
    }
    
    [data-scroll-delay] {
        transition-delay: 0s !important; /* 移動端移除延遲 */
    }
}

/* 低效能設備優化 */
@media (max-width: 480px) {
    [data-scroll] {
        transition-duration: 0.3s !important; /* 更低效能設備更快的動畫 */
    }
}