/* ════════════════════════════════════════════════════════════════ SKMVP Motion System — static/css/skmvp-motion.css 全站統一動效規範 (2026-06-13) 原則 ──── · opacity + transform only（compositor properties，不觸發 layout） · js-io class 由 motion.js 加到 ，確保 JS 未執行時元素正常顯示 · 全部包在 prefers-reduced-motion: no-preference，reduce 時靜止 · 不引入任何 JS library，不使用 Canvas/WebGL Data attribute 使用方式 ───────────────────── data-reveal → 單元素 fade + slideUp（區塊標題、說明文字） data-reveal-scale → 單元素 fade + scale（重要卡片、推薦區塊） data-stagger → 子元素依序進場（grid 列表、FAQ、步驟） data-countup="N" → 數字由 0 計數至 N（需在 data-stagger 容器內） ════════════════════════════════════════════════════════════════ */ :root { --m-dur-fast: .18s; --m-dur-base: .42s; --m-dur-slow: .58s; --m-ease-out: cubic-bezier(.16, 1, .3, 1); /* 快進慢出，進場首選 */ --m-ease-inout: cubic-bezier(.4, 0, .2, 1); /* 標準 ease-in-out */ --m-stagger-gap: 80ms; /* 子元素間距 */ } @media (prefers-reduced-motion: no-preference) { /* ── Reveal：單元素 fade + translateY ──────────────────── */ .js-io [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(14px); } .js-io [data-reveal] { transition: opacity var(--m-dur-base) var(--m-ease-out), transform var(--m-dur-base) var(--m-ease-out); } /* ── Reveal Scale：卡片進場（fade + 微縮放）───────────── */ .js-io [data-reveal-scale]:not(.is-visible) { opacity: 0; transform: translateY(10px) scale(.97); } .js-io [data-reveal-scale] { transition: opacity var(--m-dur-base) var(--m-ease-out), transform var(--m-dur-base) var(--m-ease-out); } /* ── Stagger：子元素依序進場 ──────────────────────────── 初始隱藏只在容器未 is-visible 時生效， transition 永遠定義，確保進場動畫能播放 */ .js-io [data-stagger]:not(.is-visible) > * { opacity: 0; transform: translateY(12px); } .js-io [data-stagger] > * { transition: opacity var(--m-dur-base) var(--m-ease-out), transform var(--m-dur-base) var(--m-ease-out); } /* stagger delays — 第 1 個子元素無延遲，其餘依序 +80ms */ .js-io [data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; } .js-io [data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; } .js-io [data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; } .js-io [data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; } .js-io [data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; } /* reveal 後清除 transition-delay，確保 hover 不繼承延遲 */ .js-io [data-stagger].is-visible > * { transition-delay: 0ms; } /* ↑ nth-child 有更高優先序，所以進場 delay 仍生效； is-visible 後若再次觸發 transition（hover），delay 已歸零 */ } /* ── end of skmvp-motion.css ── */