/* Scroll Reveal Animation Styles 
   用於實現網頁捲動時的內容浮現效果
*/

/* 初始狀態：隱藏並向下偏移 */
.reveal-up {
    opacity: 0;
    transform: translateY(40px); /* 初始向下偏移 40px */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform; /* 效能優化：告知瀏覽器這些屬性會變動 */
}

/* 延遲顯示類別 (用於 Grid 或列表項目，製造依序出現的效果) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* 進場狀態：當元素進入視窗後，JS 會加上此類別 */
.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0); /* 回到原始位置 */
}

/* 無障礙與相容性處理：如果瀏覽器不支援 Script 或停用 JS，則直接顯示內容 */
@media (scripting: none) {
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }
}