/* Scroll Animation Styles */

/* 初始狀態：隱藏並向下偏移 */
.scroll-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* 觸發狀態：顯示並回歸原位 */
.scroll-show {
    opacity: 1;
    transform: translateY(0);
}

/* 不同的動畫效果變體 */

/* 1. Fade Up (預設) */
.fade-up {
    /* 使用預設 .scroll-hidden 即可，此處保留 class 名稱作為語意標記 */
    transform: translateY(30px);
}
.fade-up.scroll-show {
    transform: translateY(0);
}

/* 2. Fade In (不移動，純淡入) */
.fade-in.scroll-hidden {
    transform: translateY(0);
}

/* 3. Scale Up (從小變大) */
.scale-up.scroll-hidden {
    transform: scale(0.95);
}
.scale-up.scroll-show {
    transform: scale(1);
}

/* 4. Slide In Left (從左滑入) */
.slide-left.scroll-hidden {
    transform: translateX(-50px);
}
.slide-left.scroll-show {
    transform: translateX(0);
}

/* 5. Slide In Right (從右滑入) */
.slide-right.scroll-hidden {
    transform: translateX(50px);
}
.slide-right.scroll-show {
    transform: translateX(0);
}

/* 順序延遲 (Stagger Delays) */
.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; }