/** * Hauzii Motion — 效果本體 + 進場觸發 + 依序間隔 * * 2026-09-12 動畫重做（工單 plan-motion-hover-redesign-20260912）： * 這個檔取代了 Animate.css。三件事全在這裡，**沒有第二個地方**： * * ① `@keyframes hz-fx-*` —— 效果本體。名字由 PHP 的 * `MotionDomain::keyframe_name($kind, $direction)` 組出來，兩邊是同一份約定， * `MotionKeyframeVocabularyTest` 直接讀本檔逐名對帳（⛔ 不另抄一份名單）。 * ② `--hz-i` —— repeater 第幾格，給依序進場（stagger）用。 * ③ 「減少動態」的全站規則 —— 尊重系統設定，蓋 token 與頁面自訂段。 * * ⚠️ 位移距離讀 `--hz-fx-dist`：keyframes 是靜態的，讀不到 `--hz-motion-07-dist` * 這種帶槽號的動態名，所以 token CSS 那邊會把距離再指派給這個固定名。 * * ⚠️ 家規：對抗主題樣式的 hz- utility 一律寫 `:root body` 高特異性 * （見 .claude/rules/06-architecture.md「Blocksy theme reset」段）。 */ /* ────────────────────────────────────────────────────────────── * ③ 減少動態（放在最前面，讓後面的宣告都被它蓋掉） * * 站主 2026-09-12 同意「一條全站規則」：座位寫自訂段時不必各自處理， * token 動畫與手寫動畫一起受它管。 * ⚠️ 這條是 plugin 自己的 CSS，是「座位端不准 !important」那條規則的唯一例外。 * ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ────────────────────────────────────────────────────────────── * 進場前的起始態 —— ⛔ 不住在這個檔 * * 「藏起來等進畫面」由 token CSS 逐格吐（`MotionDomain::initial_state_rule()`）： * 只有這一格真的有動畫規則才藏，`.hz-inview` 一加就讓路、動畫（fill-mode: both）接手。 * kind=none 的格、沒設定過的 user 格不吐任何規則 ⇒ 從頭就看得到。 * `.hz-motion-ready`（ inline script 加在 上）不存在時一律不藏。 * * ⚠️ 2026-09-12 到 09-16 這裡曾有一條不分有無動畫的通用藏規則，並註明「kind=none 讓路 * 之後就直接顯示」—— 那句是錯的：讓路要等 `.hz-inview`，而那要捲進畫面才加。 * 結果 none 的格要捲到才沒有動畫地冒出來（ehermit 首頁事故）。⛔ 別把通用規則加回來。 * ────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────── * ② 依序進場：repeater 第幾格 * * `:nth-child(k of S)` 只數「符合 S 的兄弟」，所以容器裡混進裝飾元素也不會算錯 * （⛔ 別退回裸 `:nth-child(k)`，那個把所有兄弟都算進去）。 * 瀏覽器不支援 `of S` 時整條不生效 → `var(--hz-i, 0)` 退 0 → 沒有依序，不會壞。 * * ⚠️ 做到第 24 格 = **全庫 `data-hz-repeat-max` 的實測最大值** * （2026-09-12 量：16×83 / 24×12 / 12×10 / 8×13）。容量 N 的 SSOT 是草稿 HTML * 上的那個屬性，compiler 沒有第二個上限常數 —— 模板日後宣告更大的 max 時， * 這裡與 `MotionDomain::STAGGER_INDEX_MAX` 要一起跟上（`MotionStaggerRulesTest` 對帳）。 * 超過的格拿不到 `--hz-i` → `var(--hz-i, 0)` 退 0 → 沒有依序效果，不會壞。 * * ⚠️ v1 repeater（約 75 顆物理展開的 block）的格根元素沒有 `data-hz-repeat` 標記， * 吃不到這條 —— 已知限制，隨 block 升級輪重 cast 後自然解決。 * ────────────────────────────────────────────────────────────── */ [data-hz-repeat]:nth-child(1 of [data-hz-repeat]) { --hz-i: 0; } [data-hz-repeat]:nth-child(2 of [data-hz-repeat]) { --hz-i: 1; } [data-hz-repeat]:nth-child(3 of [data-hz-repeat]) { --hz-i: 2; } [data-hz-repeat]:nth-child(4 of [data-hz-repeat]) { --hz-i: 3; } [data-hz-repeat]:nth-child(5 of [data-hz-repeat]) { --hz-i: 4; } [data-hz-repeat]:nth-child(6 of [data-hz-repeat]) { --hz-i: 5; } [data-hz-repeat]:nth-child(7 of [data-hz-repeat]) { --hz-i: 6; } [data-hz-repeat]:nth-child(8 of [data-hz-repeat]) { --hz-i: 7; } [data-hz-repeat]:nth-child(9 of [data-hz-repeat]) { --hz-i: 8; } [data-hz-repeat]:nth-child(10 of [data-hz-repeat]) { --hz-i: 9; } [data-hz-repeat]:nth-child(11 of [data-hz-repeat]) { --hz-i: 10; } [data-hz-repeat]:nth-child(12 of [data-hz-repeat]) { --hz-i: 11; } [data-hz-repeat]:nth-child(13 of [data-hz-repeat]) { --hz-i: 12; } [data-hz-repeat]:nth-child(14 of [data-hz-repeat]) { --hz-i: 13; } [data-hz-repeat]:nth-child(15 of [data-hz-repeat]) { --hz-i: 14; } [data-hz-repeat]:nth-child(16 of [data-hz-repeat]) { --hz-i: 15; } [data-hz-repeat]:nth-child(17 of [data-hz-repeat]) { --hz-i: 16; } [data-hz-repeat]:nth-child(18 of [data-hz-repeat]) { --hz-i: 17; } [data-hz-repeat]:nth-child(19 of [data-hz-repeat]) { --hz-i: 18; } [data-hz-repeat]:nth-child(20 of [data-hz-repeat]) { --hz-i: 19; } [data-hz-repeat]:nth-child(21 of [data-hz-repeat]) { --hz-i: 20; } [data-hz-repeat]:nth-child(22 of [data-hz-repeat]) { --hz-i: 21; } [data-hz-repeat]:nth-child(23 of [data-hz-repeat]) { --hz-i: 22; } [data-hz-repeat]:nth-child(24 of [data-hz-repeat]) { --hz-i: 23; } /* ────────────────────────────────────────────────────────────── * ① 效果本體 * * 每個 kind × direction 一組。⛔ 新增 / 改名要同步改 * `MotionDomain::keyframe_name()`，否則 token CSS 會吐出一個不存在的名字 * （症狀：元素永遠停在 opacity:0，沒有任何錯誤訊息）。 * ────────────────────────────────────────────────────────────── */ /* fade —— 原地淡入 */ @keyframes hz-fx-fade { from { opacity: 0; } to { opacity: 1; } } /* zoom —— 由小放大（方向不參與） */ @keyframes hz-fx-zoom { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* fade up —— 由下往上，帶淡入 */ @keyframes hz-fx-fade-up { from { opacity: 0; transform: translateY(var(--hz-fx-dist, 24px)); } to { opacity: 1; transform: translateY(0); } } /* fade down —— 由上往下，帶淡入 */ @keyframes hz-fx-fade-down { from { opacity: 0; transform: translateY(calc(-1 * var(--hz-fx-dist, 24px))); } to { opacity: 1; transform: translateY(0); } } /* fade left —— 由右往左，帶淡入 */ @keyframes hz-fx-fade-left { from { opacity: 0; transform: translateX(var(--hz-fx-dist, 24px)); } to { opacity: 1; transform: translateX(0); } } /* fade right —— 由左往右，帶淡入 */ @keyframes hz-fx-fade-right { from { opacity: 0; transform: translateX(calc(-1 * var(--hz-fx-dist, 24px))); } to { opacity: 1; transform: translateX(0); } } /* slide up —— 由下往上（不改透明度） */ @keyframes hz-fx-slide-up { from { transform: translateY(var(--hz-fx-dist, 24px)); } to { transform: translateY(0); } } /* slide down —— 由上往下（不改透明度） */ @keyframes hz-fx-slide-down { from { transform: translateY(calc(-1 * var(--hz-fx-dist, 24px))); } to { transform: translateY(0); } } /* slide left —— 由右往左（不改透明度） */ @keyframes hz-fx-slide-left { from { transform: translateX(var(--hz-fx-dist, 24px)); } to { transform: translateX(0); } } /* slide right —— 由左往右（不改透明度） */ @keyframes hz-fx-slide-right { from { transform: translateX(calc(-1 * var(--hz-fx-dist, 24px))); } to { transform: translateX(0); } }