/* =========================================
   UI/UX Pro Max - Advanced Animations
   ========================================= */

/* --- 全域變數 --- */
:root {
    --anim-duration-fast: 0.4s;
    --anim-duration-normal: 0.8s;
    --anim-duration-slow: 1.5s;
    --anim-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --anim-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- 通用轉場類別 --- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s var(--anim-ease-out), transform 0.8s var(--anim-ease-out);
    will-change: opacity, transform;
}

/* 進入狀態 - 由 JS 觸發 */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

/* 1. 上浮淡入 (Fade Up) */
.anim-up {
    transform: translateY(40px);
}

/* 2. 縮放淡入 (Zoom In) */
.anim-scale {
    transform: scale(0.9);
}

/* 3. 左滑進 (Slide In Left) */
.anim-left {
    transform: translateX(-50px);
}

/* 4. 右滑進 (Slide In Right) */
.anim-right {
    transform: translateX(50px);
}

/* 5. 延遲設定 */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* --- 特效動畫 (Continuous) --- */

/* 1. 宇宙漂浮 (Cosmic Float) - 用於圖片或卡片 */
@keyframes float-y {

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

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

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

/* 2. 金色呼吸 (Golden Breath) - 用於按鈕或強調文字 */
@keyframes golden-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.glow-pulse {
    animation: golden-pulse 2s infinite;
}

/* 3. 星光閃爍 (Starlight) - 用於背景點綴 */
@keyframes twinkle-move {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

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

/* 4. 文字流光 (Text Shimmer) - 用於大標題 */
.text-shimmer {
    background: linear-gradient(to right,
            var(--color-gold) 20%,
            #fff 50%,
            var(--color-gold) 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* --- 卡片互動特效 --- */
.hover-card-effect {
    transition: all 0.4s var(--anim-ease-out);
}

.hover-card-effect:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--color-gold);
}

.hover-card-effect:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

/* --- 裝飾線條延伸 --- */
.line-grow {
    width: 0;
    transition: width 1.5s ease-in-out;
}

.line-grow.is-visible {
    width: 100px;
    /* 或具體長度 */
}