/* ============================================================================ motion.css｜捲動進場動效系統 ---------------------------------------------------------------------------- 參考 410號檔案室（AOS）與謀殺腦細胞（tailwindcss-intersect）的做法， 但**不裝任何套件**，用 IntersectionObserver ＋ CSS 變數自己做。 HTML 怎麼用：
預設向上淡入
從左邊淡入
從右邊淡入
淡入＋輕微放大
由下往上揭開（適合圖片）
延遲 200ms
容器：底下的 [data-reveal] 自動依序錯開
自訂每一階的間隔（毫秒） ⚠️ 三條保護，不要拿掉： 1. 預設「不隱藏」。只有 app.js 確認瀏覽器支援後才在 掛 data-anim="on"。 JS 壞掉、被擋掉、觀察器沒觸發，內容都仍然看得見。 2. prefers-reduced-motion 一律關閉位移，只留最輕的淡入。 3. app.js 有 2 秒保險，屆時仍未觸發就全部顯示。 設計原則（UI/UX 指南）： - 進場用 ease-out，不用 linear - 一屏最多動 1–2 個重點，不要整頁都在動 - 只動 transform / opacity，不動 width / height ============================================================================ */ :root { --reveal-dur: 720ms; --reveal-ease: cubic-bezier(.22, .61, .36, 1); --reveal-shift: 26px; --reveal-shift-x: 32px; } /* 手機上橫向位移收小，避免進場前的偏移撐出橫向捲動 */ @media (max-width: 639px) { :root { --reveal-shift-x: 16px; } } /* 只有在 JS 確認可用時才啟動，其餘情況內容一律可見 */ [data-anim="on"] [data-reveal] { opacity: 0; transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), clip-path var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-anim="on"] [data-reveal=""], [data-anim="on"] [data-reveal="up"] { transform: translate3d(0, var(--reveal-shift), 0); } [data-anim="on"] [data-reveal="down"] { transform: translate3d(0, calc(var(--reveal-shift) * -1), 0); } [data-anim="on"] [data-reveal="left"] { transform: translate3d(calc(var(--reveal-shift-x) * -1), 0, 0); } [data-anim="on"] [data-reveal="right"] { transform: translate3d(var(--reveal-shift-x), 0, 0); } [data-anim="on"] [data-reveal="zoom"] { transform: scale(.94); } [data-anim="on"] [data-reveal="mask"] { clip-path: inset(0 0 100% 0); transform: translate3d(0, 12px, 0); } /* 進場後：全部歸位 */ [data-anim="on"] [data-reveal][data-in="true"] { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } [data-anim="on"] [data-reveal][data-in="true"] { will-change: auto; } /* 舊寫法 .reveal 仍然有效，等同 data-reveal="up" */ [data-anim="on"] .reveal:not([data-reveal]) { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); } [data-anim="on"] .reveal:not([data-reveal])[data-in="true"] { opacity: 1; transform: none; } /* --------------------------------------------------------------------------- 減少動態：位移全部拿掉，只留很輕的淡入 --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-anim="on"] [data-reveal], [data-anim="on"] .reveal:not([data-reveal]) { transform: none !important; clip-path: none !important; transition-duration: 200ms !important; transition-delay: 0ms !important; } } /* --------------------------------------------------------------------------- 列印：捲動進場一律失效 使用者列印時不會捲動，沒進場過的區塊會留在 opacity: 0 印成空白。 --------------------------------------------------------------------------- */ @media print { [data-anim="on"] [data-reveal], [data-anim="on"] .reveal:not([data-reveal]) { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .hero__bg--kenburns img { animation: none !important; } .nav, .sticky-cta, .anchors-bar, .audit-bar { display: none !important; } } /* --------------------------------------------------------------------------- Hero 背景緩慢推近（Ken Burns） 只在使用者沒有要求減少動態時播放 --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .hero__bg--kenburns img { animation: kenburns 24s var(--reveal-ease) infinite alternate; } } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(0, -1.5%, 0); } } /* --------------------------------------------------------------------------- 數字跑動（統計帶）：由 app.js 逐格更新 textContent， 這裡只負責讓數字不要因為字寬變化而抖動 --------------------------------------------------------------------------- */ .count { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 導覽列捲動狀態 捲過首屏之後才長出底色與底線，讓 hero 可以做滿版背景 --------------------------------------------------------------------------- */ .nav { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } [data-scrolled="false"] .nav { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } /* 夜間頁的 hero 是滿版深色圖，導覽列在未捲動時要保證讀得到 */ [data-theme="archive"][data-scrolled="false"] .nav__brand, [data-theme="archive"][data-scrolled="false"] .nav__links a { text-shadow: 0 1px 12px rgba(5, 9, 10, .85); } /* --------------------------------------------------------------------------- 連結底線滑入（導覽列與內文連結） --------------------------------------------------------------------------- */ @media (hover: hover) { .nav__links a { position: relative; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease); } .nav__links a:hover::after { transform: scaleX(1); } .nav__links a[aria-current="page"]::after { transform: scaleX(1); } }