/* ============================================================
   codudo 墨系統 — 「看它怎麼長出來」示範區  demo.css
   只管 #demo 這一段。顏色、字級、圓角一律走 codudo.css 的 :root 變數，
   這支檔案裡沒有任何一個新的顏色值。

   狀態規則（跟鐵律 7 綁在一起）：
     預設 = 最終畫面。沒有 JS、關掉動態、IntersectionObserver 不存在 → 全部直接看得到。
     只有 JS 確定要播（.is-armed）而且使用者沒關動態時，元素才會退回「還沒長出來」的起點。
     所以「藏起來」的規則全部放在 prefers-reduced-motion:no-preference 裡面。
   ============================================================ */

.ink-demo{overflow:hidden}   /* 手機框從右邊滑進來時不准撐出水平捲軸 */

.ink-dm-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);
  margin-top:var(--s5);align-items:start}

/* ============ 左欄：對話 ============ */
/* 左邊那條線就是「行」：一句一句說，墨連起來 */
.ink-dm-chat{position:relative;padding:4px 0 4px var(--s3)}
.ink-dm-chat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line-22);transform-origin:top;transition:transform 2.8s var(--ease)}
.ink-dm-msg + .ink-dm-msg{margin-top:var(--s4)}

.ink-dm-who{position:relative;display:inline-block;font-family:var(--f-mono);font-size:var(--t-note);
  letter-spacing:.24em;color:var(--paper-35);line-height:1.6;margin-bottom:10px}
/* 老闆：一個實心點 = 一次按鍵 */
.ink-dm-who::before{content:"";position:absolute;top:50%;left:calc(-1 * var(--s3) - 4px);
  width:9px;height:9px;margin-top:-5px;border-radius:var(--r);background:var(--paper)}
/* codudo：○• 標誌的形狀 */
.ink-dm-re .ink-dm-who::before{left:calc(-1 * var(--s3) - 6px);width:12px;height:12px;margin-top:-6px;
  background:var(--ink-0);border:1px solid var(--paper)}
.ink-dm-re .ink-dm-who::after{content:"";position:absolute;top:50%;left:calc(-1 * var(--s3) + 4px);
  width:4px;height:4px;margin-top:3px;border-radius:var(--r);background:var(--paper)}

.ink-dm-said{font-family:var(--f-serif);font-size:var(--t-step);font-weight:700;line-height:1.62;
  color:var(--paper);letter-spacing:.01em}
.ink-dm-reply{font-family:var(--f-sans);font-size:var(--t-lead);font-weight:300;line-height:1.7;color:var(--paper)}
.ink-dm-heard{list-style:none;margin-top:var(--s2);border-top:1px solid var(--line-soft)}
.ink-dm-heard li{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper)}
.ink-dm-heard i{font-family:var(--f-mono);font-style:normal;font-size:var(--t-note);color:var(--paper-35);flex:none}
.ink-dm-aside{margin-top:var(--s3);font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;
  line-height:1.75;color:var(--paper-60)}

/* 逐字打出來的字：只動 opacity，字的位置一開始就排好，不會跳版 */
.ink-dm-ch{transition:opacity .2s var(--ease)}
.ink-dm-ch.cur::after{content:"";display:inline-block;width:1px;height:1.05em;margin-right:-1px;
  vertical-align:-.16em;background:var(--paper);animation:ink-dm-blink 1.05s var(--ease) infinite}
@keyframes ink-dm-blink{0%,46%{opacity:1}54%,100%{opacity:0}}
/* 讀螢幕的人聽整句，不聽一個字一個字 */
.ink-dm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 通用的「長出來」 */
.ink-dm-r{transition:opacity .7s var(--ease),transform .9s var(--ease)}

/* ============ 右欄：瀏覽器框 ============ */
/* 手機框尺寸由這兩個數算出來，手機框和營業時間列都繼承：
   --ink-dm-k  手機縮放比例（不是顏色）
   --ink-dm-gr 右邊留給手機框的寬度
   手機框外框 = 寬 360k + 16px、高 640k + 31px（螢幕 + 內距 7/7/22/7 + 1px 邊框）。
   底部預留 = 手機框高度 − 64px：手機框只往瀏覽器框裡疊 64px，
   剛好落在最底下的營業時間列（該列 + 框內距約 77px），碰不到上面的菜單和地圖。 */
.ink-dm-view{--ink-dm-k:.42;--ink-dm-gr:64px;position:relative;
  padding:28px var(--ink-dm-gr) calc(640px * var(--ink-dm-k) + 31px - 64px) 0}

/* 鐵律 4：框左上角明白寫「示範」 */
.ink-dm-badge{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;height:28px;
  padding:0 9px 0 13px;border:1px solid var(--line);border-bottom:0;background:var(--ink-0);
  font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.42em;line-height:1;color:var(--paper-60)}

.ink-dm-browser{position:relative;border:1px solid var(--line);border-radius:0;background:var(--ink-1);
  box-shadow:var(--shade);overflow:hidden}
.ink-dm-top{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--ink-0)}
.ink-dm-top::after{content:"";width:42px;flex:none}   /* 跟三顆圓同寬，網址列才真的置中 */
.ink-dm-dots{display:flex;gap:6px;flex:none;width:42px}
.ink-dm-dots i{display:block;width:10px;height:10px;border:1px solid var(--line-22);border-radius:var(--r)}
.ink-dm-url{flex:1 1 auto;min-width:0;max-width:340px;margin:0 auto;height:28px;padding:0 14px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ink-1);
  font-family:var(--f-mono);font-size:var(--t-note);color:var(--paper-60);white-space:nowrap;overflow:hidden}
.ink-dm-url > span{display:inline-block}
.ink-dm-host{color:var(--paper)}
.ink-dm-lock{color:var(--paper);flex:none;line-height:0}
.ink-dm-lock svg{display:block;width:11px;height:13px}
.ink-dm-safe{color:var(--paper-60);letter-spacing:.08em}

/* ============ 框裡的小店網站 ============ */
.ink-dm-site{display:grid;gap:10px;padding:12px;background:var(--ink-1);align-content:start;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-areas:"nav nav" "hero hero" "menu map" "hours hours"}
.ink-dm-nav{grid-area:nav}
.ink-dm-hero{grid-area:hero}
.ink-dm-menu{grid-area:menu}
.ink-dm-map{grid-area:map}
.ink-dm-hours{grid-area:hours}

/* 骨架：每一塊的框線是兩筆畫出來的。
   第一筆從左上角往右、往下；第二筆從右下角往左、往上。內容到了，線就退淡。 */
.ink-dm-blk{position:relative;min-width:0}
.ink-dm-blk::before,
.ink-dm-blk::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  transition:clip-path .95s var(--ease),opacity 1.4s var(--ease)}
.ink-dm-blk::before{border-top:1px solid var(--line-30);border-left:1px solid var(--line-30)}
.ink-dm-blk::after{border-right:1px solid var(--line-30);border-bottom:1px solid var(--line-30);
  transition-delay:.28s,0s}

/* 小標：等寬小字 */
.ink-dm-h{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:var(--t-note);
  font-weight:400;letter-spacing:.24em;color:var(--paper-35);line-height:1.6}

/* 導覽列 */
.ink-dm-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:12px 16px}
.ink-dm-brand{font-family:var(--f-serif);font-size:var(--t-lead);font-weight:900;letter-spacing:.12em;
  line-height:1.4;color:var(--paper)}
.ink-dm-links{display:flex;gap:14px;font-family:var(--f-mono);font-size:var(--t-note);letter-spacing:.06em;
  color:var(--paper-60);white-space:nowrap}
.ink-dm-links span{display:inline-block}
.ink-dm-burger{display:none;width:18px;height:8px;border-top:1px solid var(--paper-60);border-bottom:1px solid var(--paper-60)}

/* 主視覺：純 CSS 灰階漸層疊出來的墨。沒有圖片、沒有顏色 */
.ink-dm-hero{display:flex;flex-direction:column;align-items:flex-start;min-height:178px;padding:20px 24px 22px;
  overflow:hidden;isolation:isolate}
.ink-dm-wash{position:absolute;inset:0;z-index:-1;display:block;
  background:
    repeating-linear-gradient(97deg,transparent 0 11px,var(--line-soft) 11px 12px),
    linear-gradient(168deg,transparent 34%,var(--line-soft) 42%,var(--line) 48%,var(--line-soft) 55%,transparent 64%),
    radial-gradient(62% 120% at 84% 14%,var(--paper-35) 0%,transparent 64%),
    radial-gradient(40% 70% at 66% 82%,var(--line-22) 0%,transparent 72%),
    radial-gradient(70% 90% at 8% 100%,var(--ink-0) 0%,transparent 70%),
    linear-gradient(112deg,var(--ink-1) 28%,var(--ink-2) 100%)}
.ink-dm-kick{font-family:var(--f-mono);font-size:var(--t-note);letter-spacing:.2em;color:var(--paper-60);
  margin-bottom:auto;line-height:1.6}
.ink-dm-title{display:block;margin-top:var(--s3);font-family:var(--f-serif);font-size:var(--t-h2);font-weight:900;
  line-height:1.12;letter-spacing:.08em;color:var(--paper)}
.ink-dm-sub{margin-top:8px;font-family:var(--f-sans);font-size:var(--t-body);font-weight:300;
  letter-spacing:.1em;color:var(--paper-60)}
/* 店名像一筆寫過去 */
.ink-dm-wipe{display:inline-block;transition:clip-path 1.1s var(--ease),opacity .6s var(--ease)}

/* 菜單 */
.ink-dm-menu{padding:16px 18px 8px}
.ink-dm-menu .ink-dm-h{margin-bottom:4px}
.ink-dm-menu ul{list-style:none}
.ink-dm-menu li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.ink-dm-menu li:last-child{border-bottom:0}
.ink-dm-nm{font-family:var(--f-serif);font-size:var(--t-body);font-weight:700;color:var(--paper);white-space:nowrap}
.ink-dm-ld{display:block;flex:1 1 auto;min-width:14px;border-bottom:1px dotted var(--line-30);
  position:relative;top:-.3em;transform-origin:left;transition:transform .7s var(--ease)}
.ink-dm-pr{font-family:var(--f-mono);font-size:var(--t-body);color:var(--paper);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* 地圖 */
.ink-dm-map{display:flex;flex-direction:column;padding:16px 18px 14px}
.ink-dm-map svg{display:block;width:100%;height:auto;margin:8px 0 10px;overflow:visible}
.ink-dm-path{fill:none;stroke:var(--paper-35);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease)}
.ink-dm-path.main{stroke:var(--paper-60)}
.ink-dm-mark{transform-box:fill-box;transform-origin:center;transition:transform .9s var(--ease),opacity .5s var(--ease)}
.ink-dm-mark .o{fill:none;stroke:var(--paper);stroke-width:1.6}
.ink-dm-mark .d{fill:var(--paper);stroke:none}
.ink-dm-ripple{fill:none;stroke:var(--paper-60);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.ink-dm-ripple.on{animation:ink-dm-ripple 1.6s var(--ease) both}
@keyframes ink-dm-ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.ink-dm-cap{margin-top:auto;font-family:var(--f-sans);font-size:var(--t-body);line-height:1.5;color:var(--paper-60)}

/* 營業時間：一整條，字靠左，右邊讓給手機框 */
.ink-dm-hours{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;padding:16px 18px}
/* 只有瀏覽器框裡那份要讓位（手機框裡複製的那份不用）。
   手機框疊進瀏覽器框的寬度 = 360k + 16px − gr；這一列右邊再扣掉框內距與邊框約 13px，
   所以讓出 360k + 20px − gr，多出約 17px 當間隔。「週一公休」放不下就自己換到第二行。 */
.ink-dm-browser .ink-dm-hours{padding-right:calc(360px * var(--ink-dm-k) + 20px - var(--ink-dm-gr))}
.ink-dm-time{font-family:var(--f-mono);font-size:var(--t-lead);letter-spacing:.04em;color:var(--paper)}
.ink-dm-off{font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60)}

/* ============ 手機框 ============
   裡面是同一個網站的手機版：照 360px 寬真的排一次，再整塊等比縮小。
   字級寫的還是系統字級，只是被縮小來看 —— 就跟真的把手機拿遠一點一樣。 */
.ink-dm-phone{position:absolute;right:0;bottom:0;z-index:3;padding:22px 7px 7px;
  background:var(--ink-0);border:1px solid var(--line-22);border-radius:0;box-shadow:var(--shade-up);
  transition:transform 1.45s var(--ease),opacity .55s var(--ease)}
.ink-dm-phone::before{content:"";position:absolute;top:9px;left:50%;width:36px;height:4px;margin-left:-18px;
  border-radius:var(--r);background:var(--line-22)}
.ink-dm-screen{position:relative;width:calc(360px * var(--ink-dm-k));height:calc(640px * var(--ink-dm-k));overflow:hidden}
.ink-dm-screen > .ink-dm-site{width:360px;height:640px;transform:scale(var(--ink-dm-k));transform-origin:0 0}
html:not(.js) .ink-dm-phone{display:none}   /* 沒有 JS 就沒有複製進去的手機版，空框不出現 */

/* 手機版排版（手機框裡那份固定用這套） */
.ink-dm-site.is-m{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "hero" "menu" "map" "hours"}
.ink-dm-site.is-m .ink-dm-links{display:none}
.ink-dm-site.is-m .ink-dm-burger{display:block}
.ink-dm-site.is-m .ink-dm-hero{min-height:150px;padding:18px 18px 20px}

/* ============ 框下方的狀態列 ============ */
.ink-dm-status{margin-top:var(--s3);font-family:var(--f-sans);font-size:var(--t-body);line-height:2;color:var(--paper-60)}
.ink-dm-lead{color:var(--paper)}
.ink-dm-sep{color:var(--paper-35)}
.ink-dm-it{display:inline-flex;align-items:center;gap:9px;color:var(--paper);transition:opacity .6s var(--ease)}
/* ○ 亮起時右下落一點 •：同一個標誌，同一個「嘟」 */
.ink-dm-it i{position:relative;display:block;width:10px;height:10px;flex:none;
  border:1px solid var(--paper-60);border-radius:var(--r)}
.ink-dm-it i::after{content:"";position:absolute;right:-4px;bottom:-4px;width:4px;height:4px;
  border-radius:var(--r);background:var(--paper);transition:transform .5s var(--ease)}
.ink-dm-end{display:inline}

.ink-dm-again{display:none;margin-top:var(--s3)}

/* ============ 動畫起點：只在「要播、而且沒關動態」時成立 ============ */
@media screen and (prefers-reduced-motion:no-preference){
  /* 重播時先瞬間歸位，不要看到東西倒著退回去 */
  .ink-demo.is-reset .ink-dm-stage *,
  .ink-demo.is-reset .ink-dm-stage *::before,
  .ink-demo.is-reset .ink-dm-stage *::after{transition:none !important;animation:none !important}

  .ink-demo.is-armed .ink-dm-r:not(.on){opacity:0;transform:translate3d(0,10px,0)}
  .ink-demo.is-armed .ink-dm-ch:not(.on){opacity:0}
  .ink-demo.is-armed .ink-dm-chat:not(.on)::before{transform:scaleY(0)}

  /* 1 骨架 */
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk:not(.on)::before{clip-path:inset(0 100% 100% 0)}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk:not(.on)::after{clip-path:inset(100% 0 0 100%)}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk.on::before,
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk.on::after{clip-path:inset(0 0 0 0)}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk:not(.fill)::before,
  .ink-demo.is-armed .ink-dm-browser .ink-dm-blk:not(.fill)::after{opacity:1}

  /* 2、3 店名一筆寫過去；主視覺的墨從左邊暈開（遮罩只看透明度，用 --ink-0 當不透明） */
  .ink-demo.is-armed .ink-dm-browser .ink-dm-wipe:not(.on){clip-path:inset(0 100% 0 0);opacity:0}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-wipe.on{clip-path:inset(0 0 0 0)}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-wash{
    -webkit-mask-image:linear-gradient(90deg,var(--ink-0) 45%,transparent 55%);
            mask-image:linear-gradient(90deg,var(--ink-0) 45%,transparent 55%);
    -webkit-mask-size:220% 100%;mask-size:220% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:105% 0;mask-position:105% 0;
    transition:-webkit-mask-position 1.7s var(--ease),mask-position 1.7s var(--ease)}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-wash.on{-webkit-mask-position:0 0;mask-position:0 0}

  /* 4 菜單引導線 */
  .ink-demo.is-armed .ink-dm-browser .ink-dm-ld:not(.on){transform:scaleX(0)}

  /* 5 地圖：街道用描的，地標落下來 */
  .ink-demo.is-armed .ink-dm-browser .ink-dm-path:not(.on){stroke-dashoffset:1}
  .ink-demo.is-armed .ink-dm-browser .ink-dm-mark:not(.on){opacity:0;transform:scale(.2)}

  /* 8 手機：從右邊帶著重量滑進來，最後落定 */
  .ink-demo.is-armed .ink-dm-phone:not(.on){opacity:0;transform:translate3d(calc(100% + 90px),40px,0) rotate(6deg)}

  /* 9 狀態一個一個亮 */
  .ink-demo.is-armed .ink-dm-it:not(.on){opacity:.28}
  .ink-demo.is-armed .ink-dm-it:not(.on) i::after{transform:scale(0)}

  /* 第一次自動播完才出現「再看一次」。
     之後重播時按鈕不藏起來（藏了焦點會掉到 body），只變淡、標 aria-disabled，播完再亮回來 */
  .ink-demo.is-armed .ink-dm-again{display:inline-block;opacity:0;visibility:hidden;transform:translate3d(0,8px,0);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .ink-demo.is-armed.is-played .ink-dm-again{opacity:.4;visibility:visible;transform:none}
  .ink-demo.is-armed.is-played .ink-dm-again[aria-disabled="true"]{cursor:default}
  .ink-demo.is-armed.is-done .ink-dm-again{opacity:1;visibility:visible;transform:none}
}

/* 關掉動態：最終畫面，一個都不少。重播按鈕沒有意義，不出現 */
@media (prefers-reduced-motion:reduce){
  .ink-dm-ch.cur::after{animation:none}
  .ink-dm-ripple,.ink-dm-ripple.on{animation:none;opacity:0}
  .ink-dm-again{display:none !important}
}

/* ============ 窄螢幕 ============ */
@media (max-width:820px){
  .ink-dm-stage{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .ink-dm-said{font-size:var(--t-h3)}
  .ink-dm-view{--ink-dm-k:.3;--ink-dm-gr:0px}   /* padding 用同一個式子，跟著重算 */
}
@media (max-width:600px){
  .ink-dm-top{gap:10px;padding:0 12px}
  .ink-dm-top::after{display:none}
  .ink-dm-dots{gap:5px;width:auto}
  .ink-dm-dots i{width:9px;height:9px}
  .ink-dm-url{margin:0;padding:0 10px;gap:5px;max-width:none}
  .ink-dm-site{padding:10px;grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "hero" "menu" "map" "hours"}
  .ink-dm-nav{padding:10px 12px}
  .ink-dm-hero{min-height:150px;padding:18px 18px 20px}
  .ink-dm-menu,.ink-dm-map,.ink-dm-hours{padding-left:14px;padding-right:14px}
}