/* ============ 天機AI motion.css v2 — 手機旗艦+互動層(2026-08-02 二版) ============
 * 老闆兩點親令:①站要「可玩」不是只能看 ②手機=主戰場,品質必須頂
 * 視覺層 only:排盤/下單邏輯(site.js/bazi.js/lunar.js)零接觸。
 * 兩閘(motion.js 主導;「手機一律砍」的第三閘已拆掉):
 *   prefers-reduced-motion → JS 早退,html 不加 .fx-on,全站靜態+poster
 *   saveData / 2g          → 不載影片,poster 撐 hero
 * 手機載直式 9:16 影片(hero-dragon-m.*),桌機載橫式;互動失敗一律純點擊可完成。
 * 疊在 foundation → direction-tianji → components → site 之後。 */

/* —— Preloader(黑幕+天機印+百分比;完整樣式,critical 版在 head) —— */
#preloader { position: fixed; inset: 0; z-index: 80; background: #080604;
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 0 0); }
.pre-seal { display: flex; flex-direction: column; gap: 6px; align-items: center;
  width: 84px; height: 84px; justify-content: center;
  background: var(--seal, #a63d2a); border-radius: 12px; color: #f4ecda;
  font-family: var(--font-display, serif); font-weight: 600; font-size: 1.7rem;
  line-height: 1.05; box-shadow: 0 0 0 1px rgba(244, 236, 218, 0.14) inset;
  animation: sealPulse 1.6s ease-in-out infinite; }
@keyframes sealPulse { 50% { opacity: 0.82; } }
.pre-meta { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pre-num { font-family: var(--font-display, serif); font-weight: 600;
  font-size: 1.05rem; color: #a89877; letter-spacing: 0.2em; }
.pre-num::after { content: "%"; font-size: 0.7em; margin-left: 2px; }
.pre-line { width: min(220px, 40vw); height: 1px; background: #2a2418;
  position: relative; overflow: hidden; }
.pre-line i { position: absolute; inset: 0; background: #c9a35c;
  transform-origin: 0 50%; transform: scaleX(0); }
/* 墨暈開場:圓形 clip 從印章處暈開退場 */
#preloader.pre-out { clip-path: circle(0% at 50% 46%);
  transition: clip-path 850ms cubic-bezier(0.7, 0, 0.3, 1); pointer-events: none; }

/* —— Hero:全螢幕龍首 —— */
.hero-cine { position: relative; height: 100svh; min-height: 540px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: #050403 url("../assets/motion/hero-dragon-poster.webp") center 36% / cover no-repeat; }
.hero-media { position: absolute; inset: 0; will-change: transform; }
/* poster(龍首靜圖)→影片(近空場開場)crossfade:1.6s 慢溶接,不跳幀 */
.hero-media video { width: 100%; height: 100%; object-fit: cover;
  object-position: center 36%; opacity: 0;
  transition: opacity 1600ms cubic-bezier(0.33, 0, 0.2, 1); }
.hero-media video.is-playing { opacity: 1; }
@media (max-width: 767.98px) {
  .hero-cine { background-image: url("../assets/motion/hero-dragon-poster-m.webp");
    background-position: center 30%; }
  .hero-media video { object-position: center 40%; }
}

/* —— 龍會回應你:三層視差(墨煙/金塵;transform 由 JS quickTo 驅動) —— */
.hero-fog, .hero-dust { position: absolute; inset: -6%; pointer-events: none;
  will-change: transform; }
.hero-fog i { position: absolute; border-radius: 50%; mix-blend-mode: screen;
  filter: blur(42px);
  background: radial-gradient(closest-side, rgba(201, 163, 92, 0.12), rgba(201, 163, 92, 0) 72%); }
.hero-fog i:first-child { width: 54vmax; height: 30vmax; left: -10%; top: 4%;
  animation: fogDrift 17s ease-in-out infinite alternate; }
.hero-fog i:last-child { width: 44vmax; height: 26vmax; right: -8%; bottom: 12%;
  opacity: 0.75; animation: fogDrift 21s ease-in-out infinite alternate-reverse; }
@keyframes fogDrift { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
.hero-dust i { position: absolute; inset: 0; opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(216, 180, 110, 0.9), transparent 55%),
    radial-gradient(1px 1px at 34% 62%, rgba(216, 180, 110, 0.7), transparent 55%),
    radial-gradient(2px 2px at 58% 18%, rgba(201, 163, 92, 0.8), transparent 55%),
    radial-gradient(1px 1px at 72% 44%, rgba(244, 236, 218, 0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 86% 72%, rgba(216, 180, 110, 0.75), transparent 55%),
    radial-gradient(1px 1px at 22% 82%, rgba(201, 163, 92, 0.6), transparent 55%);
  background-size: 520px 520px; animation: dustFloat 26s linear infinite alternate; }
.hero-dust i:last-child { opacity: 0.32; background-size: 340px 340px;
  animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes dustFloat { to { transform: translate3d(0, -26px, 0); } }

/* 開啟感應(iOS 陀螺儀 permission 入口;拒絕/不支援 → scroll 視差 fallback) */
.gyro-btn { position: absolute; z-index: 3;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 10, 7, 0.55); backdrop-filter: blur(3px);
  border: 1px solid var(--border-strong, #3d3524); border-radius: 999px;
  color: var(--muted, #a89877); font-size: 0.75rem; letter-spacing: 0.22em;
  text-indent: 0.22em; padding: 8px 14px; cursor: pointer;
  transition: opacity 400ms ease, color 150ms ease, border-color 150ms ease; }
.gyro-btn:active { color: var(--accent, #d2ab60); border-color: var(--primary, #c9a35c); }
.gyro-btn.gone { opacity: 0; pointer-events: none; }
.gyro-btn[hidden] { display: none; }
/* 下三分之一留白帶,並把黑底縫進下一節 */
.hero-cine::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.25) 0%, rgba(5, 4, 3, 0) 26%,
    rgba(5, 4, 3, 0) 50%, rgba(7, 5, 3, 0.72) 74%, var(--bg, #0c0a07) 100%); }
.hero-cine-inner { position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4, 16px); padding-bottom: clamp(30px, 6.5vh, 84px); }
.cine-eyebrow { letter-spacing: 0.42em; text-indent: 0.42em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8); }
.cine-head { margin: 0; font-family: var(--font-display, serif); font-weight: 900;
  color: var(--ink, #f4ecda); font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: 1.18; letter-spacing: 0.08em; text-indent: 0.08em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.65); }
.cine-lead { margin: 0; color: var(--text, #d9cdb2); font-size: var(--fs-lead, 1.25rem);
  letter-spacing: 0.06em; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7); }
.cine-cta { margin-top: var(--space-4, 16px); }
.hero-cine .btn-pai { background: rgba(12, 10, 7, 0.35);
  backdrop-filter: blur(2px); padding: 12px 34px; }
/* 逐字 stagger(JS 拆字;無 JS / reduced 時原文直接可見) */
html.fx-on .cine-head .ch { display: inline-block; opacity: 0;
  transform: translateY(0.55em); }
html.hero-in .cine-head .ch { opacity: 1; transform: none;
  transition: opacity 950ms var(--ease-out-soft, ease-out),
              transform 950ms var(--ease-out-soft, ease-out);
  transition-delay: calc(var(--i) * 70ms); }
html.fx-on .hero-cine-inner > .cine-eyebrow,
html.fx-on .hero-cine-inner > .cine-lead,
html.fx-on .hero-cine-inner > .cine-cta,
html.fx-on .hero-cine-inner > .scroll-cue { opacity: 0; transform: translateY(14px); }
html.hero-in .hero-cine-inner > .cine-eyebrow,
html.hero-in .hero-cine-inner > .cine-lead,
html.hero-in .hero-cine-inner > .cine-cta,
html.hero-in .hero-cine-inner > .scroll-cue { opacity: 1; transform: none;
  transition: opacity 800ms var(--ease-out, ease-out) 620ms,
              transform 800ms var(--ease-out, ease-out) 620ms; }
.scroll-cue { display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-top: var(--space-6, 24px); color: var(--muted, #a89877);
  font-size: var(--fs-caption, 0.8125rem); letter-spacing: 0.4em; text-indent: 0.4em; }
.scroll-cue i { width: 1px; height: 44px; background: var(--border-strong, #3d3524);
  position: relative; overflow: hidden; }
html.fx-on .scroll-cue i::after { content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%; background: var(--primary, #c9a35c);
  animation: cueDrop 2.2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite; }
@keyframes cueDrop { 0% { top: -50%; } 55%, 100% { top: 110%; } }

/* —— 墨色 wipe(錨點轉場) —— */
#wipe { position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: linear-gradient(100deg, #080604 0%, #0e0a06 55%, #14100a 100%);
  clip-path: inset(0 0 0 100%); }
#wipe::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px circle at 18% 82%, rgba(201, 163, 92, 0.10), transparent 70%); }
#wipe.on { clip-path: inset(0 0 0 0);
  transition: clip-path 420ms cubic-bezier(0.7, 0, 0.3, 1); }
#wipe.off { clip-path: inset(0 100% 0 0);
  transition: clip-path 520ms cubic-bezier(0.7, 0, 0.3, 1); }

/* —— 按住開盤 hold-to-reveal:朱砂蓄力(對標 trionn hold-to-blast) ——
 * JS 只調 --charge(0→1);單擊照樣送出=無障礙 fallback,鍵盤 Enter 不受影響 */
.holdable { --charge: 0; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
  background-image: linear-gradient(0deg, rgba(166, 61, 42, 0.92) calc(var(--charge) * 100%), transparent 0);
  box-shadow: 0 0 calc(var(--charge) * 30px) rgba(201, 163, 92, calc(var(--charge) * 0.5)),
              inset 0 0 calc(var(--charge) * 18px) rgba(216, 180, 110, calc(var(--charge) * 0.35)); }
.holdable.is-charging { color: var(--ink, #f4ecda); border-color: var(--primary, #c9a35c); }
.holdable.is-charged { animation: chargedPulse 0.9s ease-in-out infinite; }
@keyframes chargedPulse { 50% { box-shadow: 0 0 40px rgba(201, 163, 92, 0.72),
  inset 0 0 22px rgba(216, 180, 110, 0.5); } }

/* 放開=墨暈爆開(host 由 JS 指定:桌機 chart-panel / 手機 sheet) */
.chart-panel { overflow: clip; }
.mingpan { position: relative; }
.ink-burst { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.12); opacity: 0;
  background: radial-gradient(circle, rgba(8, 6, 4, 0.94) 0%, rgba(8, 6, 4, 0.6) 34%,
    rgba(201, 163, 92, 0.2) 52%, transparent 70%);
  animation: inkBurst 900ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes inkBurst { 26% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* —— 排盤:四柱升起前的待命態(ScrollTrigger onEnter 揭幕後移除) —— */
#pillar-cards.pillars-pending .pillar { opacity: 0; transform: translateY(48px); }
/* 目次數字滾動:數字在 overflow 匣內向上滾入 */
.mulu .n { display: inline-flex; overflow: hidden; }
.mulu .n .n-in { display: inline-block; }

/* —— 章節大字速差(玄墨大字浮水印;手機同享,縮小字級) —— */
.glyph-host { position: relative; overflow: clip; }
.bg-glyph { position: absolute; top: 6%; right: -0.04em; z-index: 0;
  font-family: var(--font-display, serif); font-weight: 900;
  font-size: clamp(200px, 30vw, 460px); line-height: 1; pointer-events: none;
  user-select: none; color: transparent;
  -webkit-text-stroke: 1px rgba(201, 163, 92, 0.13); }
.glyph-host > .wrap, .glyph-host > .band-copy { position: relative; z-index: 1; }
@media (max-width: 767.98px) { .bg-glyph { font-size: clamp(150px, 46vw, 240px);
  top: 2%; -webkit-text-stroke-color: rgba(201, 163, 92, 0.10); } }

/* —— 潤例:金線延展(桌機 hover / 觸控 tap 同款) —— */
.runli li { position: relative; }
.runli li::after { content: ""; position: absolute; left: 0; top: -1px;
  height: 1px; width: 0; background: var(--primary, #c9a35c);
  transition: width 560ms var(--ease-out, ease-out); }
@media (hover: hover) and (pointer: fine) {
  .runli li:not(.soon):hover::after { width: 100%; }
}
.runli li.lit::after { width: 100%; }

/* —— 書脊金線=捲動進度(桌機沿書脊右緣往下;手機沿頂列往右) —— */
.spine .progress { position: absolute; top: 0; right: -1px; width: 2px; height: 100%;
  background: var(--primary, #c9a35c); pointer-events: none;
  transform: scaleY(var(--sp, 0)); transform-origin: 50% 0; }
@media (max-width: 960px) {
  .spine .progress { top: auto; bottom: -1px; left: 0; right: 0; width: 100%;
    height: 2px; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; }
}

/* —— 手機 bottom-sheet:排盤結果滑入(app 級;桌機不啟用) —— */
.sheet-head { display: none; }
@media (max-width: 767.98px) {
  .mingpan.as-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 66;
    margin: 0; max-height: 86svh; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--surface, #14110c); border: 1px solid var(--border-strong, #3d3524);
    border-bottom: 0; border-radius: 16px 16px 0 0;
    padding: 0 var(--page-pad, 20px) calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(104%); transition: transform 460ms var(--ease-out, ease-out); }
  .mingpan.as-sheet.sheet-in { transform: translateY(0); }
  .mingpan.as-sheet .sheet-head { display: block; position: sticky; top: 0; z-index: 2;
    margin: 0 calc(-1 * var(--page-pad, 20px)); padding: 10px var(--page-pad, 20px) 8px;
    background: var(--surface, #14110c); border-bottom: 1px solid var(--border, #2a2418);
    touch-action: none; }
  .sheet-grip { display: block; width: 44px; height: 4px; border-radius: 2px;
    background: var(--border-strong, #3d3524); margin: 0 auto; }
  .sheet-close { position: absolute; right: var(--page-pad, 20px); top: 2px;
    background: none; border: 0; color: var(--accent, #d2ab60);
    font-size: 0.875rem; letter-spacing: 0.2em; text-indent: 0.2em;
    white-space: nowrap; padding: 8px 2px 8px 10px; cursor: pointer; min-height: 34px; }
  .mingpan.as-sheet .rtl-cap { padding-right: 3.2em; }
}
.sheet-veil { position: fixed; inset: 0; z-index: 64; background: rgba(5, 4, 3, 0.62);
  backdrop-filter: blur(2px); opacity: 0; transition: opacity 340ms ease; display: none; }
.sheet-veil.on { opacity: 1; }
html.sheet-lock, html.sheet-lock body { overflow: hidden; }

/* —— FAQ 手風琴動畫(JS WAAPI 展開收合;JS 缺席=原生 details 照常) —— */
.faq-list .faq-body { overflow: hidden; }

/* —— 墨暈 ripple(按鈕點擊) —— */
.btn-pai, .spine-cta, .hero-cine .btn-pai { position: relative; overflow: hidden; }
.ink-blot { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 163, 92, 0.32) 0%,
    rgba(201, 163, 92, 0.10) 45%, transparent 70%);
  transform: translate(-50%, -50%) scale(0); opacity: 1;
  animation: inkBlot 650ms var(--ease-out, ease-out) forwards; }
@keyframes inkBlot { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* —— 磁吸元素(JS transform;此處只保 will-change) —— */
.magnetic { will-change: transform; }

/* —— reduced-motion:動效層全關(fx-on 永不加上;再加保險) —— */
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none; }
  .hero-media video { display: none; }
  .scroll-cue i::after { animation: none; }
  .pre-seal { animation: none; }
  #pillar-cards.pillars-pending .pillar { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
  .cine-head { letter-spacing: 0.05em; }
  .hero-cine { min-height: 480px; }
}