/* ============================================================
   codudo 首頁「一句話就好」film.css
   左邊是重點（文字，永遠看得到），右邊是配圖動畫：打字機自己打字 → 字飄起來 → 化成墨 → 一筆畫成網站。
   使用者：「是配圖動畫不是主要展示，怕使用者霧煞煞看不懂網站重點」。
   預設（沒有 JS、關掉動態、列印）：配圖就是最後一格，一筆畫好的網站。
   film.js 跑起來加 .is-live（跟著捲動走）；有 WebGL 再加 .is-3d（打字機是立體的墨）。
   守 DESIGN.md 第 2 章：顏色、字級只用 :root 的變數；只動畫化 transform / opacity / stroke-dashoffset
   ============================================================ */
.ink-film{position:relative;background:var(--ink-0)}
.ink-film-runway{position:relative}
.ink-film-stage{position:relative;padding:var(--s6) 0}
.ink-film-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:var(--s5)}
.ink-film-copy{min-width:0}
.ink-film-copy .ink-h2{max-width:none}
.ink-film-copy .ink-lead{margin-top:var(--s3);max-width:30em}

/* 配圖的框：4:3，裡面的東西都照這個框排 */
.ink-film-art{position:relative;min-width:0;width:100%;aspect-ratio:4/3;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side,var(--paper) 70%,transparent);mask-image:radial-gradient(closest-side,var(--paper) 70%,transparent)}   /* 邊緣淡進黑裡，不像開了一個窗 */
.ink-film-cam,.ink-film-3d,.ink-film-ink{display:none}
.ink-film-stroke{position:absolute;left:50%;top:50%;width:80%;height:auto;transform:translate(-50%,-50%);overflow:visible}
.ink-film-stroke path{fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 跟著捲動走 ---------- */
.ink-film.is-live .ink-film-runway{height:400vh}
.ink-film.is-live .ink-film-stage{position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh;padding:72px 0 24px}
.ink-film.is-live .ink-film-grid{width:100%}
.ink-film.is-live .ink-film-ink{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
/* 平面線稿版（沒有 WebGL 時） */
.ink-film.is-live:not(.is-3d) .ink-film-cam{display:block;position:absolute;left:50%;top:50%;width:600px;height:420px;
  margin:-210px 0 0 -300px;transform-origin:50% 50%;will-change:transform}
/* 立體的墨版 */
.ink-film.is-live.is-3d .ink-film-3d{display:block;position:absolute;left:0;top:0;width:100%;height:100%}

/* 打字機線稿 */
.ink-film-tw{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.ink-film-tw *{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ink-film-tw .thin{stroke:var(--paper-60);stroke-width:1}
.ink-film-tw .pp{fill:var(--paper)}
.ink-film-tw .k{transform-box:fill-box;transform-origin:50% 0}
.ink-film-paper{position:absolute;left:212px;top:112px;margin:0;white-space:nowrap;
  font-family:var(--f-serif);font-weight:900;font-size:var(--t-body);line-height:1}
.ink-film-ch{position:relative;display:inline-block;width:1em;height:1em;transform-origin:50% 50%;will-change:transform}
.ink-film-ch i{position:absolute;left:0;top:0;font-style:normal;opacity:0}
.ink-film-ch .d{color:var(--ink-0)}
.ink-film-ch .l{color:var(--paper)}

/* ---------- 手機：字在上、配圖在下 ---------- */
@media (max-width:860px){
  .ink-film-grid{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .ink-film.is-live .ink-film-runway{height:340vh}
  .ink-film.is-live .ink-film-stage{padding:64px 0 16px}
  .ink-film-art{max-height:46svh}
}
@media print{
  .ink-film.is-live .ink-film-runway{height:auto}
  .ink-film.is-live .ink-film-stage{position:relative;height:auto;padding:var(--s5) 0}
  .ink-film.is-live .ink-film-cam,.ink-film.is-live .ink-film-3d,.ink-film.is-live .ink-film-ink{display:none}
  .ink-film.is-live .ink-film-stroke path{stroke-dashoffset:0!important}
}