/* 流光之境 工具頁共用 tokens — 由 data/design-tokens.json v1.0.0 轉出，改色先改 JSON 再同步此檔 */
:root {
  --lf-champagne-gold: #D8B36A;
  --lf-blush-rose: #D8A6AE;
  --lf-pale-lavender: #C6B7DA;
  --lf-warm-ivory: #F4EBDD;
  --lf-deep-lavender: #4A3A63;
  --lf-sage: #A9B8A2;
  --lf-mist-blue: #AFC7D5;
  --lf-earth-clay: #9B6D5B;
  --lf-amber: #D99A45;

  --lf-aspect-site: 3 / 2;
  --lf-aspect-card: 2 / 3;
  --lf-aspect-icon: 1 / 1;

  /* motion: slow, subtle, breathing-like */
  --lf-ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
  --lf-dur-breath: 6s;
  --lf-dur-slow: 1.2s;
  --lf-dur-med: 0.6s;

  /* 雙拷貝無縫飄移雲霧素材（工單新增，見下方 .lf-fog-band 說明）。換素材只改這兩行，
     不必動結構；規格：寬圖（本站 1600×500 webp）、左右邊緣需羽化到透明，兩份併接
     處才不會留下方形硬邊。 */
  --lf-fog-a: url('../images/tools/shared/fx/fog-cloud-lavender.webp');
  --lf-fog-b: url('../images/tools/shared/fx/fog-cloud-gold.webp');
  /* 第三層：上一代程式合成的分形霧（細絲縷），與兩張水彩雲混搭補近景細節 */
  --lf-fog-fine: url('../images/tools/shared/fx/fog-1.webp');
  /* 2026-07-28 換上 user 用 GPT 產的真水彩雲霧（2172×724，已去背＋左右羽化、接縫測試通過）。
     前一代 fog-1/fog-2 是程式合成的分形雜訊，留在 fx/ 當 fallback 與對照。
     第三張 fog-ground.webp（下緣低霧、灰紫帶鼠尾草綠）目前未使用，可用於前景霧層。 */
}

/* reducedMotion 定案：只留 opacity，不做 parallax/rotation/travel */
@media (prefers-reduced-motion: reduce) {
  .lf-motion,
  .lf-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transform: none !important;
  }
  /* .lf-fog-band 不保證包在 .lf-motion 內（oracle 入口段目前沒有這層祖先 class）——
     獨立補一份，兩條路徑都會在動畫「結束」瞬間回到無 transform 的預設版位（tile 1
     蓋滿軌道、tile 2 疊在右側視窗外），呈現靜態霧、不是整層消失，也不會繼續飄移。 */
  .lf-fog-band {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 雙拷貝無縫飄移雲霧共用機制（工單新增，izanami 手法改良版：純 CSS transform，
   無需圖片本身可平鋪） ----------
   結構：.lf-fog-band 是「軌道」容器（沿用各頁原本 fog 層的 position/width/height/left/
   bottom/filter/opacity），內含兩個 .lf-fog-tile（同一張底圖），第二個 tile 用
   `left:100%` 疊在第一個緊右側。軌道本身的 animation 把自己整個 translateX(0)→
   translateX(-100%)（百分比是相對軌道自身寬度，不是視窗）：移動一個自身寬度後，
   原本疊在右側視窗外的 tile 2 剛好頂替回 tile 1 出發的位置——兩份底圖完全相同，
   肉眼看不出接點。
   linear（非 ease）是必要條件：ease 類 timing function 每次循環重新起跑會有
   「先快後慢」的頓挫感，只有等速才是真正無縫；速度由各頁面 per-layer 的
   animation-duration 控制（目標 40-70px/s，實際 px/s＝軌道寬度(px)÷秒數，算式見
   oracle.css/chakra.css 各層註解）。 */
.lf-fog-band {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
  animation-name: lf-fog-loop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.lf-fog-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  /* ⚠️ 不可用 `100% 100%`：那會把霧圖硬壓成 band 的長寬比（2172×724 的 3:1 圖被壓成
     7.7:1），水彩被橫向拉扁、上下緣變成肉眼可見的直線，整層讀起來像「一張大圖在滑動」
     而不是霧（user 反饋 2026-07-29「底圖怎麼移來移去」的主因）。
     cover 維持原始比例、靠 band 的 overflow 裁切，配合素材本身上下 38% 的羽化，
     邊緣才會化開。 */
  background-size: cover;
  background-position: center;
}
.lf-fog-tile + .lf-fog-tile { left: 100%; }
@keyframes lf-fog-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- 全頁水彩紙紋理疊層（工單新增，oracle.html／chakra.html 共用） ----------
   單張大圖 cover、不 repeat：實測 tile 邊界有明顯色塊接縫（四宮格拼接看得出方形色塊
   規律重複，見 scratchpad texture-tiled.png），repeat 會比沒有紋理更顯眼；cover 犧牲
   邊角解析度換取無縫，opacity 只有 0.055，糊一點完全看不出來。
   pointer-events:none 不擋點擊；z-index 定得比全站已知最高值（tooplate-wedding-lite.css
   的 dropdown 99999）更高，是刻意的「永遠在最上層」裝飾層，疊到 nav/dropdown 上方也
   只是極淡染色，不影響可讀性（見驗收對比度數字）。
   mix-blend-mode 會讓瀏覽器在每次捲動時重新合成疊層下方內容（跟純 opacity 的 fixed
   圖不同，後者可以是獨立合成層、捲動不必重繪）——已實測桌機捲動 fps 可接受才保留這個
   blend；若之後在低階機型觀察到明顯掉幀，下一步是拿掉 mix-blend-mode（改極淡色調＋
   opacity 達到類似的「染色」效果）或用 @media(min-width:769px) 收斂到桌機專用，
   不要改用 background-attachment:fixed（那是 Blink/WebKit 更經典的捲動卡頓來源，
   比 mix-blend-mode 更差，不是修正方向）。 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  /* ⚠️ 不可直接用 watercolor-paper.webp：那張素材四邊有粉紫水彩暈染、中央淺色，
     以 multiply 疊滿視窗時四邊被染深、中央亮，整個畫面就出現一個「有邊框的矩形」
     （user 反饋 2026-07-29；關掉此層後 76% 像素改變、畫面立刻乾淨，已實測確認來源）。
     改用 paper-grain.webp：取原圖中央 60%、再做高通濾波去掉大尺度明暗，只留紙的顆粒，
     平均值 128（中性灰）→ 搭配 soft-light 時「灰＝不改變畫面」，只有顆粒起作用，
     所以不會產生框、也不吃對比度。素材可用 scratchpad 的腳本從原圖重生成。 */
  background-image: url('../images/tools/shared/textures/paper-grain.webp');
  background-size: 921px 615px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
}
@media print {
  body::after { display: none; }
}