/**
 * CSS 動畫統一定義檔案
 * Unified CSS Animations Definition
 * 
 * 建立日期: 2025-12-25
 * 說明: 集中管理所有動畫 @keyframes 定義，避免多檔案重複定義
 */

/* ============================================================================
   背景漸變動畫 Background Gradient Animations
   ============================================================================ */

/* 背景漸變位移（用於整體頁面背景動畫） */
@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* 背景漸變（通用版本） */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============================================================================
   浮動動畫 Float Animations
   ============================================================================ */

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ============================================================================
   脈動動畫 Pulse Animations
   ============================================================================ */

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ============================================================================
   滑入動畫 Slide Animations
   ============================================================================ */

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   淡入動畫 Fade Animations
   ============================================================================ */

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   統計數字動畫 Count Up Animation
   來源：frontend-pastel.css（已遷移於 2025-12-25）
   ============================================================================ */

@keyframes count-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-number {
    animation: count-up 0.5s ease-out;
}

/* ============================================================================
   閃爍動畫 Shimmer Animation
   ============================================================================ */

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ============================================================================
   旋轉動畫 Spin Animation
   ============================================================================ */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   動畫工具類別 Animation Utility Classes
   ============================================================================ */

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

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

.animate-slide-up {
    animation: slide-up 0.5s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out;
}

/* Shimmer 效果容器 */
.shimmer {
    position: relative;
    overflow: hidden;
}

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

/* ============================================================================
   表單進度條動畫 Form Progress Animation
   ============================================================================ */

.form-progress-fill {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   觸控設備優化 Touch Device Optimization
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
    .form-control-responsive {
        font-size: 16px;
        /* 防止 iOS 縮放 Prevent iOS zoom */
    }

    button,
    .btn-responsive {
        min-height: 44px;
    }
}

/* ============================================================================
   無障礙樣式 Accessibility Styles
   NOTE: @media (prefers-contrast: high) 和 @media (prefers-reduced-motion: reduce)
   已移至 responsive.css 統一管理，使用萬用選擇器確保所有元素都符合無障礙要求
   ============================================================================ */