/* ============================================================
   codudo 首頁捲動時的背景墨 drift.css（「引」：墨在帶路，見 DESIGN.md「首頁捲動時的背景墨」那一章）
   畫布由 drift.js 建立、放在所有內容後面。沒有 JS 就沒有這張畫布，頁面跟原本一樣。
   z-index:-1 能墊在內容後面，是因為 html 沒有背景、body 的底色會傳到整個畫面（根背景）。
   如果哪天給 html 加了背景，body 的底色就會改畫在這張畫布上面，把墨蓋掉 —— 要一起改。
   ============================================================ */
.ink-drift{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.ink-drift.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .ink-drift{transition:none} }
@media print{ .ink-drift{display:none!important} }
/* #film（短片）的底改透明：底色本來就跟 body 一樣（--ink-0），看起來不變；但墨才接得進短片下緣，不會留一大塊空黑。
   只在 drift.js 真的跑起來（html.has-drift）時才改；沒有 JS 就是 film.css 原本的樣子。
   短片在演的時候墨怎麼退、配圖那一框怎麼挖掉，在 drift.js 的 gainAt()、knockout()。 */
html.has-drift .ink-film{background:transparent}