/* ════════════════════════════════════════════════════════════
   「晴墨」全站動態模組 v2 — 115.06.11
   引用方式：<link rel="stylesheet" href="assets/qingmo.css">
            <script src="assets/qingmo.js" defer></script>
   移除兩行引用即還原原版。墨是氛圍非裝飾；金是曙光非華麗；動是呼吸非炫技。
   ════════════════════════════════════════════════════════════ */
:root { --qm-ink: #1d3441; }

/* ── 氛圍層（JS 注入 DOM；首頁 .hero 全套、分頁 .page-hero 輕量版）── */
.qm-layer { position: absolute; inset: -12%; pointer-events: none; z-index: 0;
  will-change: transform; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.qm-layer svg { width: 100%; height: 100%; }
.qm-layer--far  svg { animation: qmDriftA 52s ease-in-out infinite alternate; }
.qm-layer--near svg { animation: qmDriftB 44s ease-in-out infinite alternate; }
@keyframes qmDriftA { from { transform: translate(0,0) scale(1); } to { transform: translate(2.5%,1.8%) scale(1.05); } }
@keyframes qmDriftB { from { transform: translate(0,0) scale(1.04) rotate(.4deg); } to { transform: translate(-2.2%,-1.5%) scale(1) rotate(-.4deg); } }

.qm-dawn { position: absolute; left: 50%; bottom: -28vh; width: 130vw; height: 70vh;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.16) 0%, rgba(201,168,76,.07) 35%, transparent 68%);
  animation: qmDawn 11s ease-in-out infinite; }
.qm-dawn--page { bottom: -46vh; height: 60vh; opacity: .8; }
@keyframes qmDawn { 0%,100% { opacity:.55; transform:translateX(-50%) scale(1);} 50% { opacity:1; transform:translateX(-50%) scale(1.06);} }

.qm-sweep { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.qm-sweep::before { content:''; position:absolute; top:-20%; left:-30%; width:24%; height:140%;
  background: linear-gradient(100deg, transparent, rgba(226,196,122,.05) 45%, rgba(226,196,122,.09) 50%, rgba(226,196,122,.05) 55%, transparent);
  transform: skewX(-12deg); animation: qmSweep 14s ease-in-out infinite; }
@keyframes qmSweep { 0%,58% { left:-32%; opacity:0; } 62% { opacity:1; } 88% { left:112%; opacity:1; } 89%,100% { left:112%; opacity:0; } }

.qm-grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay; }
.qm-glow { position:absolute; width:520px; height:520px; border-radius:50%; z-index:0;
  background: radial-gradient(circle, rgba(226,196,122,.07) 0%, transparent 62%);
  pointer-events:none; transform:translate(-50%,-50%); transition:opacity .6s; opacity:0; }

/* 首頁 hero 內容抬升（分頁 .page-hero-inner 原本就有 z-index:1，毋須處理） */
.hero-bg-pattern { z-index: 1; }
.hero-ornament, .hero-eyebrow, .hero-title, .hero-divider,
.hero-pillars, .hero-buttons { position: relative; z-index: 2; }
.hero-scroll { z-index: 2; }
.page-hero-bg { z-index: 1; }
.page-hero-inner { z-index: 2; }
.a-hero { position: relative; overflow: hidden; }
.a-hero-bg { z-index: 1; }
.a-hero-inner { position: relative; z-index: 2; }

/* ── 標題逐字墨凝（JS 包字後生效）── */
.qm-typeset .hero-title, .qm-typeset .page-title { animation: none; opacity: 1; }
.qm-ch { display:inline-block; opacity:0; filter:blur(8px); transform:translateY(14px);
  animation: qmInkSettle 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes qmInkSettle { to { opacity:1; filter:blur(0); transform:translateY(0); } }

/* ── 導覽金線：墨滲式由中心暈開 ── */
.nav-links a { position: relative; padding-bottom: 4px; }
.nav-links a::after { content:''; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width .45s cubic-bezier(.22,.61,.36,1), left .45s cubic-bezier(.22,.61,.36,1); }
.nav-links a:hover::after { width:100%; left:0; }

/* ── 三柱 hover 金點（首頁）── */
.pillar-item { position: relative; }
.pillar-item::after { content:''; position:absolute; left:50%; bottom:-10px; width:4px; height:4px;
  border-radius:50%; background:rgba(201,168,76,0); transform:translateX(-50%);
  transition: background .5s, box-shadow .5s; }
.pillar-item:hover::after { background:rgba(201,168,76,.8); box-shadow:0 0 14px 3px rgba(201,168,76,.35); }
.pillar-item:hover .pillar-en { color: var(--gold-light); }
.pillar-en { transition: color .5s; }

/* ── 通用捲動進場 ── */
.qm-reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.qm-reveal.qm-in { opacity: 1; transform: translateY(0); }
.qm-rule-ready .section-rule { width: 0 !important; transition: width 1.2s cubic-bezier(.22,.61,.36,1) .2s; }
.qm-rule-ready.qm-in .section-rule { width: 60px !important; }

/* ── 墨暈 hover（共用：服務卡／收費卡／資歷卡／領域卡）── */
.service-card, .fee-card, .cred-card, .qual-card, .area-card { position: relative; overflow: hidden; }
.service-card::after, .fee-card::after, .cred-card::after, .qual-card::after, .area-card::after {
  content:''; position:absolute; left:var(--mx,50%); top:var(--my,50%);
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, rgba(44,74,90,.07) 0%, rgba(44,74,90,.045) 45%, transparent 70%);
  transform: translate(-50%,-50%) scale(0); transition: transform .9s cubic-bezier(.22,.61,.36,1);
  pointer-events:none; }
.service-card:hover::after, .fee-card:hover::after, .cred-card:hover::after,
.qual-card:hover::after, .area-card:hover::after { transform: translate(-50%,-50%) scale(85); }

/* 服務卡細節（首頁＋服務頁共用 .service-card） */
.service-card:hover .service-kanji { color: var(--gold); opacity: .28; }
.service-kanji { transition: color .6s, opacity .6s; }
.service-icon-wrap { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-icon-wrap { transform: translateY(-4px); }
.service-card:hover .service-icon-wrap svg path,
.service-card:hover .service-icon-wrap svg polyline,
.service-card:hover .service-icon-wrap svg circle {
  stroke-dasharray: 90; stroke-dashoffset: 90; animation: qmRedraw 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes qmRedraw { to { stroke-dashoffset: 0; } }
.service-name { position: relative; }
.service-name::after { content:''; display:block; margin:6px auto 0; width:0; height:1px;
  background: var(--gold); transition: width .5s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-name::after { width: 56px; }

/* 收費卡頂線金繪 */
.fee-card::before { content:''; position:absolute; top:-1px; left:50%; width:0; height:1px;
  background: var(--gold); transition: width .6s cubic-bezier(.22,.61,.36,1), left .6s cubic-bezier(.22,.61,.36,1);
  z-index: 1; }
.fee-card:hover::before { width:100%; left:0; }

/* ── 首頁 about／process ── */
.about::after { content:''; position:absolute; left:-10%; bottom:-30%; width:60%; height:80%;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.07) 0%, transparent 65%);
  pointer-events:none; animation: qmDawn 13s ease-in-out infinite; }
.process-track::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22,.61,.36,1) .3s; }
.process-track.qm-in::before { transform: scaleX(1); }
.process-track::after { content:''; position:absolute; top:22px; left:calc(12.5% + 24px); width:5px; height:5px;
  border-radius:50%; background: var(--gold); opacity:0;
  box-shadow: 0 0 10px 2px rgba(201,168,76,.45); }
.process-track.qm-in::after { animation: qmWalk 9s ease-in-out 2s infinite; }
@keyframes qmWalk {
  0%   { left: calc(12.5% + 24px); opacity: 0; }
  6%   { opacity: .95; }
  46%  { left: calc(87.5% - 24px); opacity: .95; }
  52%, 100% { left: calc(87.5% - 24px); opacity: 0; } }
.process-step:hover .step-circle { box-shadow: 0 0 18px rgba(201,168,76,.25); }
.step-circle { transition: all .3s, box-shadow .5s; }

/* ── 服務區頂部墨色延伸（含首頁與分頁 services）── */
.services { position: relative; overflow: hidden; }
.services::before { content:''; position:absolute; top:0; left:0; right:0; height:140px;
  background: linear-gradient(to bottom, rgba(44,74,90,.06), transparent); pointer-events:none; }

/* ── FAQ：展開時金線、hover 微暈 ── */
.faq-item { transition: border-color .3s, box-shadow .5s; }
.faq-item:hover { box-shadow: 0 10px 26px -16px rgba(44,74,90,.25); }
.faq-item.open { border-left: 2px solid var(--gold); }

/* ── 文章卡：hover 提起＋金邊呼吸 ── */
.article-card { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -18px rgba(44,74,90,.3);
  border-color: rgba(201,168,76,.45); }

/* ── 經歷 timeline：項目進場 ── */
.timeline > * { }

/* ── 收斂 ── */
@media (max-width: 768px) {
  .qm-glow { display: none; }
  .qm-layer { inset: -6%; }
}
@media (prefers-reduced-motion: reduce) {
  .qm-layer svg, .qm-dawn, .qm-sweep::before, .qm-glow,
  .about::after, .process-track.qm-in::after { animation: none !important; }
  .qm-ch { opacity:1 !important; filter:none !important; transform:none !important; animation:none !important; }
  .qm-reveal { opacity:1; transform:none; transition:none; }
}

/* ── 原版既有瑕疵修正：矮視窗時 SCROLL 指示器疊到 LINE 按鈕 ── */
@media (max-height: 760px) { .hero-scroll { display: none; } }