/* ==========================================================================
   common.css  —  共用樣式（導覽列 / 頁尾 / 全站變數 / 按鈕 / 幾何元件）
   HALPHAS TECHNOLOGY · 黑白灰 · 包豪斯 (Bauhaus) × Apple 極簡風
   所有分頁皆載入此檔，之後再載入各自對應的 <頁名>.css
   ========================================================================== */

/* ---------- 1. 全站設計變數 -------------------------------------------- */
:root {
    /* 單色系（黑 / 白 / 灰）— 包豪斯精神 */
    --c-ink:        #0a0a0a;   /* 主黑 */
    --c-graphite:   #1d1d1f;   /* 近黑 */
    --c-slate:      #6e6e73;   /* 中灰 */
    --c-silver:     #a1a1a6;   /* 淺灰 */
    --c-mist:       #d2d2d7;   /* 邊框灰 */
    --c-fog:        #f5f5f7;   /* 底灰（Apple off-white） */
    --c-paper:      #ffffff;   /* 純白 */

    /* 語意色 */
    --bg:           var(--c-paper);
    --fg:           var(--c-ink);
    --muted:        var(--c-slate);
    --line:         var(--c-mist);

    /* 排版 */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Helvetica Neue", "PingFang TC", "Microsoft JhengHei",
                 "Segoe UI", Arial, sans-serif;

    /* 尺度 */
    --nav-h: 70px;
    --maxw: 1180px;
    --radius: 18px;
    --edge: clamp(18px, 2.2vw, 40px);   /* 全站左右貼邊間距（滿版留白） */

    /* 動態 */
    --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
    --nav-dur: 0.42s;      /* 手機導覽抽屜滑動 + 背景模糊 共用的過渡時長（JS 可用 HP.cssMs 讀取） */

    /* 毛玻璃：全站框體/卡片共用的背景高斯模糊參數（改一處，所有卡片同步） */
    --glass: blur(2.5px) brightness(0.95);
    --z-card: 100;         /* 毛玻璃卡片層級（高於右上角三角鈕 .gtri） */
}

/* ---------- 2. Reset / 基礎 -------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg);
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* 通用容器 —— 滿版貼邊：移除置中的 max-width，內容延伸至左右邊緣 */
.wrap { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--edge); }

/* 全站固定三角網格背景層（由 common.js 即時繪製，全數學計算、無點陣圖）。
   position:fixed → 捲動時不移動、不消失；各區塊皆設透明，讓它整頁透出。 */
#triCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;   /* 讓點擊穿透；互動由 window 監聽 */
}

/* 背景作畫拖曳時，暫時禁止選字，避免拖曳選到文字 */
body.is-drawing, body.is-drawing * {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- 3. 導覽列 Nav（Apple 式細長置頂 + 毛玻璃） ----------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 1000;
    background: var(--c-paper);                 /* 實色：不透明、不模糊，隨主題切換 */
    border-bottom: 1px solid var(--line);
    transition: border-color 0.25s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--c-mist); }

.nav__inner {
    height: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--edge);   /* Logo 貼左、導覽連結貼右 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 左上角 Logo（HP2.png） */
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img {
    height: 60px;
    width: auto;
    transition: opacity 0.3s var(--ease);
}
.nav__logo:hover img { opacity: 0.6; }

/* 導覽連結 */
.nav__links {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
}
.nav__link {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-graphite);
    padding: 4px 0;
    transition: color 0.25s var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--c-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--c-ink); font-weight: 700; }
.nav__link.is-active::after { transform: scaleX(1); }

/* 漢堡按鈕（行動裝置） */
.nav__burger {
    display: none;
    width: 34px; height: 34px;
    position: relative;
    flex-shrink: 0;
}
.nav__burger span {
    position: absolute;
    left: 7px;
    width: 20px; height: 2px;
    background: var(--c-ink);
    transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger span:nth-child(1) { top: 12px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 4. 按鈕 ---------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 980px;
    transition: transform 0.2s var(--ease), background 0.25s var(--ease),
                color 0.25s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--c-ink); color: var(--c-paper); }
.btn--solid:hover { background: #333; }
.btn--ghost { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }
.btn--link { padding: 0; color: var(--c-ink); border-radius: 0; }
.btn--link .arrow { transition: transform 0.25s var(--ease); }
.btn--link:hover .arrow { transform: translateX(4px); }

/* ---------- 5. 區塊標題 / 共用排版 ------------------------------------ */
.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-slate);
    margin-bottom: 18px;
}
.section { padding: 120px 0; }
.section__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.section__lead {
    max-width: 640px;
    margin-top: 20px;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--muted);
}
/* 黑色實心文字方塊 — 標題中的重點色塊（全站共用，正矩形、不斜邊） */
.ink-box {
    display: inline-block;
    background: var(--c-ink);
    color: var(--c-paper);
    padding: 0 0.12em;
}

/* ---------- 6. 包豪斯幾何裝飾（純 CSS，無需圖檔） -------------------- */
.bh-shape { position: absolute; pointer-events: none; }
.bh-circle { border-radius: 50%; }
.bh-ring   { border-radius: 50%; background: transparent; }
.bh-tri {
    width: 0; height: 0;
    background: transparent !important;
}
.bh-grid {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* ---------- 6.5 全站框體毛玻璃：背景高斯模糊（模糊其後的三角網格） ----
   這些框皆為透明底 + 邊框；加上 backdrop-filter 後，框內的網格會被柔化，
   形成毛玻璃效果，框外仍是清晰的三角網格。 */
.p-card, .s-card, .cta__inner,
.svc, .step, .plan, .prod__vis,
.val, .cform, .qopt, .qsum__inner, .promise,
.field input, .field select, .field textarea {
    position: relative;
    z-index: var(--z-card);                 /* 高於右上角三角鈕，卡片蓋過它（需求 1） */
    -webkit-backdrop-filter: var(--glass);   /* 共用毛玻璃參數（需求 2） */
    backdrop-filter: var(--glass);
}

/* ---------- 承諾 / 信任區塊（三頁共用：commission 表單旁、quote、index） -------
   透明底 + hairline，貼合包浩斯×Apple 極簡；深色由變數自動處理。
   .promises--aside：直向堆疊（表單左欄）；.promises--row：橫向多欄（首頁 / 報價頁）。 */
.promises__title {
    font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
    margin-bottom: 16px;
}
.promises { display: grid; gap: 14px; }
.promises--row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.promise {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
}
.promise__title {
    display: block;
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.promise__text { font-size: 13px; line-height: 1.6; color: var(--muted); }
.promise__text a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .promise__text a { color: var(--fg); }

@media (max-width: 720px) {
    .promises--row { grid-template-columns: 1fr; }
}

/* ---------- 7. 頁尾 Footer（白色資訊欄） ----------------------------- */
.footer {
    position: relative;
    z-index: 950;            /* 高於毛玻璃卡片(100)與三角鈕(50)，讓頁尾資訊蓋過它們 */
    background: var(--c-paper);
    border-top: 1px solid var(--line);
    padding: 64px 0 40px;
    font-size: 13px;
    color: var(--muted);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
.footer__brand img { height: 24px; margin-bottom: 16px; }
.footer__brand p { max-width: 280px; line-height: 1.6; }
.footer__col h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-graphite);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.footer__col ul { list-style: none; display: grid; gap: 12px; }
.footer__col a { transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--c-ink); }
.footer__bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- 8. 進場動畫（已停用） ------------------------------------
   卡片/區塊一律直接載入顯示，不做「捲動到位才刷入」的進場效果（hover 等交互動畫不受影響）。
   （原本的 opacity/transform 進場，在大量 backdrop-filter 卡片上還會造成 WebKit 渲染空白。）
   JS 仍會加上 .is-in，但兩者皆為完全顯示、無視覺差異。 */
.reveal, .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 9. 響應式（行動裝置） ------------------------------------ */
@media (max-width: 860px) {
    .nav__burger { display: block; position: relative; z-index: 2; }

    /* 右側滑入抽屜（主題感知：深/淺色自動切換） */
    .nav__links {
        position: fixed;
        top: var(--nav-h); right: 0; bottom: 0;
        width: min(45vw, 300px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 26px calc(env(safe-area-inset-bottom, 0px) + 28px);
        background: var(--c-paper);
        border-left: 1px solid var(--line);
        box-shadow: -14px 0 44px rgba(0, 0, 0, 0.14);
        list-style: none;
        overflow-y: auto;
        transform: translateX(100%);            /* 預設藏在螢幕右外 */
        display: none;                          /* 關閉時完全移除佈局，避免離屏抽屜撐出水平溢出 */
        pointer-events: none;
    }
    .nav.is-open .nav__links {
        display: flex;
        animation: navSlideIn var(--nav-dur) var(--ease) forwards;   /* 由右滑入 */
        pointer-events: auto;
    }
    .nav.is-closing .nav__links {
        display: flex;
        animation: navSlideOut var(--nav-dur) var(--ease) forwards;  /* 由左往右滑回螢幕外 */
        pointer-events: none;
    }

    .nav__links li { width: 100%; list-style: none; }
    .nav__link {
        display: block;
        width: 100%;
        padding: 20px 2px;
        font-size: 19px;
        color: var(--c-graphite);
        border-bottom: 1px solid var(--line);   /* 只保留分割線 */
    }
    .nav__links li:last-child .nav__link { border-bottom: none; }
    .nav__link::after { display: none; }        /* 移除會像「載入條」的下劃線動畫 */
    .nav__link.is-active { color: var(--c-ink); font-weight: 700; }

    /* 背景遮罩：hero 變暗 + 高斯模糊漸入，聚焦抽屜。
       模糊與變暗都做過渡，時長與抽屜滑動共用 --nav-dur（同進同出）。 */
    .nav-backdrop {
        position: fixed; inset: 0;
        z-index: 999;                           /* 內容之上、導覽列(1000)之下 */
        background: rgba(0, 0, 0, 0.42);
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--nav-dur) var(--ease),
                    backdrop-filter var(--nav-dur) var(--ease),
                    -webkit-backdrop-filter var(--nav-dur) var(--ease);
    }
    .nav-backdrop.is-shown {
        opacity: 1;
        pointer-events: auto;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .section { padding: 80px 0; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .footer__grid { grid-template-columns: 1fr; }
}

/* 手機導覽抽屜滑入 / 滑出（右邊進、右邊出＝關閉時由左往右滑回，≤0.5s） */
@keyframes navSlideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes navSlideOut { from { transform: translateX(0); }    to { transform: translateX(100%); } }
/* 抽屜開啟時鎖住背景捲動（順帶移除背景捲軸／錯位條） */
body.nav-lock { overflow: hidden; }

/* 抽屜開啟時暫時關閉卡片毛玻璃：此時背後已被暗色遮罩(+模糊)蓋住、看不見，
   可避免「遮罩模糊」再疊上「數十個卡片各自的 backdrop-filter」形成嵌套模糊，
   該嵌套在手機上會拖慢到卡頓數秒（quote 頁選項最多、最明顯）。純效能修正、無視覺變化。 */
body.nav-lock .p-card, body.nav-lock .s-card, body.nav-lock .cta__inner,
body.nav-lock .svc, body.nav-lock .step, body.nav-lock .plan, body.nav-lock .prod__vis,
body.nav-lock .val, body.nav-lock .cform, body.nav-lock .qopt, body.nav-lock .qsum__inner, body.nav-lock .promise,
body.nav-lock .field input, body.nav-lock .field select, body.nav-lock .field textarea {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---------- 9.5 共用網格三角按鈕：語言 / 繪畫 / 光暗（共用 .gtri） -------
   left/top 與 --tri-w/--tri-h 由 JS 對齊到真實網格格（見 common.js makeTriBtn）。
   data-dir=down → ▽、up → △；黑底白圖示，隨主題黑白反轉；懸浮「縮小」。 */
.gtri {
    position: fixed;
    z-index: 200;                 /* 高於所有毛玻璃卡片(--z-card=100)：三角鈕蓋過卡片（需求：全站卡片皆低於三角鈕）；
                                     仍低於頁尾(950)/導覽(1000)/Modal(2000) */
    --tri-w: 46px;
    --tri-h: 40px;
    width: var(--tri-w);
    height: var(--tri-h);
    background: var(--c-ink);
    color: var(--c-paper);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
    transition: transform 0.2s var(--ease);
}
.gtri[data-dir="down"] {                              /* ▽ 寬邊在上 → 圖示靠上 */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    align-items: flex-start;
    padding-top: calc(var(--tri-h) * 0.14);
}
.gtri[data-dir="up"] {                                /* △ 寬邊在下 → 圖示靠下 */
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    align-items: flex-end;
    padding-bottom: calc(var(--tri-h) * 0.14);
}
.gtri:hover { transform: scale(0.9); }                /* 需求 1：懸浮縮小 */
.gtri__icon { display: flex; }
.gtri__icon svg { width: calc(var(--tri-w) * 0.42); height: auto; display: block; }
.gtri__label { font-size: calc(var(--tri-w) * 0.3); font-weight: 800; line-height: 1; letter-spacing: 0.01em; }

/* 語言選項：left/top 由 JS 設（fixed，視窗座標）；預設收合、展開交錯成大三角 */
.gtri--opt {
    opacity: 0;
    transform: scale(0.35);
    transform-origin: 100% 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.22));
}
.gtri--opt.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: calc(var(--i) * 70ms);
}
.gtri--opt.is-open:hover { transform: scale(0.9); }   /* 懸浮縮小 */
.gtri--opt.is-selected { background: var(--c-paper); color: var(--c-ink); }

/* 手機以觸控為主：隱藏繪畫鈕（觸控不作畫） */
@media (max-width: 700px) { .gtri--draw { display: none; } }

/* ---------- 10. 尊重使用者減少動態偏好 ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    /* 導覽抽屜滑動 + 背景模糊屬「功能性動效」，即使偏好減少動態也保留（縮短時長，兩效果仍同步），
       否則抽屜會卡在螢幕外或毫無回饋。!important 才能蓋過上面的 * animation/transition:none。 */
    :root { --nav-dur: 0.25s; }
    .nav.is-open .nav__links   { animation: navSlideIn  var(--nav-dur) var(--ease) forwards !important; }
    .nav.is-closing .nav__links { animation: navSlideOut var(--nav-dur) var(--ease) forwards !important; }
    .nav-backdrop {
        transition: opacity var(--nav-dur) var(--ease),
                    backdrop-filter var(--nav-dur) var(--ease),
                    -webkit-backdrop-filter var(--nav-dur) var(--ease) !important;
    }
}

/* ==========================================================================
   11. 深色模式：反轉黑白（點右上光暗鈕切換 data-theme="dark"）
   —— 反轉調色盤變數，語意色(--bg/--fg/--muted/--line) 會自動跟著換；
      少數硬編碼的黑白 rgba 於此補齊；Canvas 網格由 common.js 主題感知反轉。
   ========================================================================== */
:root[data-theme="dark"] {
    --c-ink:      #f2f2f2;   /* 主色（原黑 → 近白） */
    --c-graphite: #dcdcda;
    --c-slate:    #9a9aa0;   /* 次要文字 */
    --c-silver:   #6a6a70;
    --c-mist:     #34343a;   /* 邊框 */
    --c-fog:      #16161a;   /* 淺底 → 深底 */
    --c-paper:    #0b0b0d;   /* 純白 → 近黑（頁面底色） */
}

/* HALPHAS logo（黑色 PNG）：深色模式反色成白色（導覽列 + 頁尾） */
:root[data-theme="dark"] .nav__logo img,
:root[data-theme="dark"] .footer__brand img {
    filter: invert(1);
}

/* 表單欄位 */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .field textarea:focus { background: rgba(255, 255, 255, 0.12); }

/* 標籤 / 價格膠囊 / 篩選列 / Modal 背景 / hover 底 */
:root[data-theme="dark"] .s-card__tag,
:root[data-theme="dark"] .s-card--dark .s-card__tag { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .prod__price,
:root[data-theme="dark"] .prod__vis--dark .prod__price { background: rgba(255, 255, 255, 0.14); color: var(--c-ink); }
:root[data-theme="dark"] .filter-bar { background: rgba(11, 11, 13, 0.6); }
:root[data-theme="dark"] .demo-modal__backdrop { background: rgba(11, 11, 13, 0.5); }
:root[data-theme="dark"] .svc:hover,
:root[data-theme="dark"] .val:hover { background: rgba(255, 255, 255, 0.05); }

/* 毛玻璃卡片：深色模式「提亮」——與淺色模式的變暗(brightness 0.95)相反 */
:root[data-theme="dark"] .p-card,
:root[data-theme="dark"] .s-card,
:root[data-theme="dark"] .cta__inner,
:root[data-theme="dark"] .svc,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .prod__vis,
:root[data-theme="dark"] .val,
:root[data-theme="dark"] .cform,
:root[data-theme="dark"] .demo-card,
:root[data-theme="dark"] .qopt,
:root[data-theme="dark"] .qsum__inner,
:root[data-theme="dark"] .promise,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
    -webkit-backdrop-filter: blur(2.5px) brightness(2);
    backdrop-filter: blur(2.5px) brightness(2);
}