/* 前台捲動進場動效系統（2026-09-19）
   提案：.agent-team/plans/frontend-motion-system_6b3d81.html

   失效閘：初始隱藏掛在 .motion-armed 之下，而這個 class 只有
   public/js/member/global/motion.js 在「確實為該元素註冊了觀察器」時才會加上。
   因此下列三種情況都會得到「內容照常可見，只是沒有動畫」：
     1. motion.js 沒載入／出錯／被擴充套件擋掉
     2. 瀏覽器不支援 IntersectionObserver
     3. 元素是 AJAX 後來插入的，還沒被 ntMotion.scan() 掃到
   換句話說 JS 是「加上隱藏」的那一方，不是「解除隱藏」的那一方；
   漏掉任何一個元素，後果是它沒有動畫，而不是它看不見。 */

:root {
    --motion-duration: 620ms;
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-distance: 18px;
}

/* 初始隱藏必須是瞬間的：motion-armed 是 JS 加上的 class，若這裡帶 transition，
   元素會從 opacity 1 花 620ms「慢慢隱藏」，而不是一開始就藏好。
   過渡只掛在 .is-revealed（揭露）那一側。 */
[data-reveal].motion-armed {
    opacity: 0;
}

/* 方向：data-reveal 無值等同 up */
[data-reveal=""].motion-armed,
[data-reveal="up"].motion-armed {
    transform: translateY(var(--motion-distance));
}

[data-reveal="right"].motion-armed {
    transform: translateX(calc(var(--motion-distance) * -1));
}

[data-reveal="left"].motion-armed {
    transform: translateX(var(--motion-distance));
}

[data-reveal="zoom"].motion-armed {
    transform: scale(0.96);
}

/* 只要淡入、不要位移 */
[data-reveal="fade"].motion-armed {
    transform: none;
}

[data-reveal].motion-armed.is-revealed {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
}

/* 雙保險：motion.js 在這個偏好下根本不會武裝任何元素，
   但萬一 class 由其他途徑被加上，這裡仍然不動 */
@media (prefers-reduced-motion: reduce) {
    [data-reveal].motion-armed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}