/* ===== 首屏「墨藍銅光」（2026-11-03 Shawn 選 demo 12 號）=====
   深色首屏：墨藍底（官網文字色 #1D2A36）＋天藍、銅色柔光慢慢移動（WebGL，ink.js）
   往下捲：三張實拍照片像幕布一樣一張張蓋上來（原本首屏的照片移到這裡）
   ② 字標逐字浮現 ③ 底片顆粒 ⑤ 實拍統一調色＋慢慢推近；首頁標題字型改しっぽり明朝（只限首頁）
   減少動態效果：背景照常慢慢動（同首頁影片的例外），逐字浮現與照片推近不播（Shawn 2026-11-03 拍板） */
/* 標題字型：全站自架子集 fonts/sx 把 'Noto Serif TC' 換成しっぽり明朝（標點與日文缺的字自動退回真 Noto Serif TC），這裡不用另外指定 */
:root{--ink-bg:#1D2A36}

/* 首屏底色：WebGL 還沒畫出來（或不支援）時就是這個樣子 */
#hero.hw-stage{background:
  radial-gradient(60% 55% at 78% 30%,rgba(142,98,40,.42),transparent 70%),
  radial-gradient(55% 60% at 70% 85%,rgba(44,106,168,.5),transparent 70%),
  #172430}
.ink-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.ink-cv.on{opacity:1}
.ink-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url(img/grain.png);animation:ink-gr 1s steps(4) infinite;z-index:1}
@keyframes ink-gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.hw-stage .hw-mast{z-index:2}

/* 首屏排版：字標在上、標題與按鈕在下，整組靠下 */
.hw-mast{justify-content:flex-end;padding-bottom:clamp(40px,9svh,110px)}
.hw-mark{order:0;text-align:left;color:#F3EEE1;font:800 clamp(96px,min(17vw,26svh),260px)/1 'Shippori Mincho B1','Noto Serif TC',serif;letter-spacing:.02em;margin:0 0 clamp(14px,2.4svh,28px) -.04em}
.hw-top{order:1;flex-direction:column;align-items:flex-start;gap:24px}
.hw-row{order:2;justify-content:flex-start;gap:8px 22px;flex-wrap:wrap;margin:clamp(22px,4svh,40px) 0 0;padding-top:0;color:rgba(243,238,225,.62)}
#hero .hw-h1{color:#F3EEE1}
#hero .hw-h1 small{color:rgba(243,238,225,.74)}
#hero .hw-tel{color:#F3EEE1}
.hw-line{background:#06C755}
.hw-stage .hw-dim{z-index:3}

/* ② 字標逐字浮現 */
.ink-ch{display:inline-block}
.ink-rv .ink-ch{opacity:0;filter:blur(14px);transform:translateY(10px);animation:ink-in 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.ink-rv .ink-ch:nth-child(2){animation-delay:.14s}
@keyframes ink-in{to{opacity:1;filter:blur(0);transform:none}}

/* 幕布上掀：第一張照片圓角從下面蓋上來 */
.hw-pn{z-index:1}
.hw-pn1{border-radius:28px 28px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.35)}
@media (max-width:768px){.hw-pn1{border-radius:20px 20px 0 0}}

/* ⑤ 實拍統一調色（低飽和、偏冷、提暗部）＋桌機慢慢推近 */
.hw-pn img{filter:saturate(.8) contrast(1.05) brightness(1.03)}
.hw-pn::after{content:'';position:absolute;inset:0;background:rgba(44,106,168,.07);mix-blend-mode:soft-light;pointer-events:none;z-index:1}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  .hw-pn img{transform-origin:55% 50%}
  .hw-pn.ink-live img{animation:ink-kb 18s ease-in-out infinite alternate}
}
@keyframes ink-kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}

/* 減少動態效果：hero2.css 會把首屏改成一般排列，這裡補回深色首屏的高度 */
@media (prefers-reduced-motion:reduce){
  .hw-mast{min-height:calc(100svh - 64px)}
  .ink-grain{animation:none}
}

/* 第一次來的 Logo 進場：幕改成首屏同色，幕淡掉時不會從米白閃成深色 */
html.ixh .ix-cv{background:#172430}

/* ===== 評審第一輪修正（2026-11-03，7.15 → 目標 8.0）===== */
/* #3 第一次來：Logo 進場期間字標先藏著，等進場結束再逐字浮現（不再「出現→消失→浮現」） */
html.ixh .hw-mark .ink-ch{opacity:0}
/* #1 每張照片停留約 0.6 個螢幕高再被下一張蓋上；文案跟著捲動浮現（ink.js 寫 --cap） */
@media (prefers-reduced-motion:no-preference){
  .hw:not(.hw-static) .hw-pn{margin-bottom:60svh}
  .hw:not(.hw-static) .hw-pn .hw-cap{opacity:var(--cap,1);transform:translateY(calc((1 - var(--cap,1)) * 24px))}
}
/* 下一張蓋上來看得出是新的一層 */
.hw-pn{box-shadow:0 -12px 30px rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.08)}
.hw-pn1{box-shadow:0 -18px 50px rgba(0,0,0,.45)}
/* #4 文案對比：漸層拉高、編號放大改銅色 */
.hw-pn::before{background:linear-gradient(to top,rgba(12,18,26,.84),rgba(12,18,26,.38) 36%,rgba(12,18,26,0) 62%)}
.hw-pn .hw-cap .t-label{font-size:14px!important;color:#D9A66B}
/* #2 手機：照片靠上完整顯示，下方留白改成同一張照片的模糊放大（ink.js 產生 .ink-bk），文案緊接照片下面 */
.ink-bk{display:none}
@media (max-width:768px){
  .ink-bk{display:block;position:absolute;inset:-10%;background:center/cover no-repeat;filter:blur(40px) brightness(.35) saturate(.9);transform:scale(1.3);z-index:0}
  .hw-pn img{position:relative;z-index:0;object-position:50% 8px!important}
  .hw-pn::before{background:linear-gradient(to bottom,rgba(12,18,26,0) 30%,rgba(12,18,26,.55))}
  .hw-pn .hw-cap{top:calc(8px + var(--ar,.7) * 100vw + 28px);bottom:auto}
}
/* #5 標題標點：しっぽり明朝是日文字型，「，。」會靠左下；ink.js 把標點包成 .ink-pq 改用中文明體（置中） */
.hw-cap-t .ink-pq,.ink-pq{display:inline;font-family:'Noto Serif TC',serif}
/* #8 手機信任列不讓「8 位自有師傅」單獨掉行 */
@media (max-width:768px){.hw-row{gap:6px 14px}}

/* ===== 評審第二輪修正 ===== */
/* 最後一張的停留 margin 不外漏到 #showcase（原本多出一塊米白空白） */
.hw{display:flow-root;background:#0b1118}
/* 編號：米白＋陰影保對比，銅色只留短線 */
.hw-pn .hw-cap .t-label{color:#F3EEE1;text-shadow:0 1px 8px rgba(0,0,0,.6);display:flex;align-items:center;gap:10px}
.hw-pn .hw-cap .t-label::before{content:'';width:24px;height:2px;background:#D9A66B;flex:none}
/* 矮螢幕手機（320×568 這類）：文案放不下照片下方就改貼底 */
@media (max-width:768px) and (max-height:640px){.hw-pn .hw-cap{top:auto;bottom:16px}}
/* 最後一張不加停留：否則它比首屏早放開，結尾會露出後面的首屏 */
.hw:not(.hw-static) .hw-pn:last-child{margin-bottom:0}

/* ===== 評審第三輪修正 ===== */
/* 停留改用面板之間的空白（不黏），首屏和三張面板在 .hw 結尾同時放開：每張都停留、結尾不露首屏 */
.hw:not(.hw-static) .hw-pn,.hw:not(.hw-static) .hw-pn:last-child{margin-bottom:0}
.hw-gap{height:60svh}
.hw-static .hw-gap{display:none}
@media (prefers-reduced-motion:reduce){.hw-gap{display:none}}
/* 矮螢幕手機：文案縮一階，斷行平均 */
@media (max-width:768px) and (max-height:640px){
  html body .hw-pn .hw-cap-t{font-size:26px!important}
  html body .hw-pn .hw-cap-f{font-size:14px!important}
  .hw-pn .hw-cap-f{text-wrap:balance}
}
/* 圖說標題只在標點斷行（「確實抽真／空，」這種斷法不要） */
.hw-cap-t{word-break:keep-all;overflow-wrap:anywhere}