/* ============================================================
   reveal-anim.css — 進場動畫（與 reveal-anim.js 搭配）
   用法：元素加 class="reveal reveal-up"（或 reveal-left/reveal-right/
   reveal-zoom/reveal-fade），JS 會在有 reveal 元素時自動初始化
   ============================================================ */
.reveal {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity .7s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal-up { transform: translateY(36px); }
.reveal-down { transform: translateY(-36px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-zoom { transform: scale(.88); }
.reveal-fade { transform: none; }

.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* 延遲工具（配合 inline style="--rd:.1s" 或此類） */
.reveal[style*="--rd"] { transition-delay: var(--rd, 0s); }

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}