/* ══════════════════════════════════════════════════════════════════════════
   Fate Atlas · 面相分析樣式（face-styles.css）
   ---------------------------------------------------------------------------
   全部沿用 index.html :root 既有 CSS 變數（--gold-primary / --surface-1 /
   --border-soft / --tx1 …），不另建任何色票或設計系統。此檔只補上面相流程
   專屬的排版（上傳區、拍攝提示、重拍卡片、可信度條、特質標籤），
   視覺語彙與八字／紫微報告一致。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 面相頁通用容器 ── */
.face-flow{max-width:820px;margin:0 auto;padding:64px 40px 100px;}
.face-flow-head{text-align:center;margin-bottom:40px;}
.face-eyebrow{font-size:10px;letter-spacing:5px;color:var(--gold-primary);text-transform:uppercase;font-weight:600;margin-bottom:14px;}
.face-flow-title{font-family:var(--serif);font-size:clamp(28px,4vw,40px);color:var(--gold3);letter-spacing:3px;margin-bottom:12px;}
.face-flow-sub{font-size:14px;color:var(--tx2);line-height:1.9;max-width:600px;margin:0 auto;}

/* ── Step 1：拍攝提示 ── */
.face-tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0 8px;}
.face-tip{display:flex;gap:12px;align-items:flex-start;padding:18px 18px;background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r);}
.face-tip-mark{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;}
.face-tip-mark.ok{background:rgba(117,169,135,.16);color:var(--success);}
.face-tip-mark.no{background:rgba(182,106,106,.16);color:var(--danger);}
.face-tip-text{font-size:13px;line-height:1.7;color:var(--tx1);}
.face-tip-text strong{color:var(--gold2);font-weight:500;}
.face-tips-note{font-size:11.5px;color:var(--tx3);line-height:1.8;text-align:center;margin-top:16px;}
.face-cta-center{text-align:center;margin-top:32px;}

/* ── Step 2：上傳 dropzone ── */
.face-dropzone{margin:8px auto 0;max-width:520px;padding:44px 28px;border:1.5px dashed var(--border-gold);border-radius:var(--r2);background:radial-gradient(circle at 50% 30%,rgba(201,149,42,.06),transparent 60%),var(--surface-1);text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;}
.face-dropzone:hover,.face-dropzone.is-drag{border-color:var(--gold-primary);background:rgba(201,149,42,.07);transform:translateY(-2px);}
.face-dropzone-glyph{font-family:var(--serif);font-size:46px;color:var(--gold2);display:block;margin-bottom:14px;line-height:1;}
.face-dropzone-title{font-family:var(--serif);font-size:17px;color:var(--gold3);letter-spacing:2px;margin-bottom:8px;}
.face-dropzone-sub{font-size:12px;color:var(--tx3);letter-spacing:1px;}
.face-upload-status{min-height:18px;margin-top:16px;font-size:12px;color:var(--tx2);text-align:center;letter-spacing:1px;}

/* ── Step 3：預覽 / 重拍 ── */
.face-review-wrap{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;}
.face-preview-frame{border:1px solid var(--border-gold);border-radius:var(--r2);overflow:hidden;background:var(--surface-2);aspect-ratio:3/4;display:grid;place-items:center;}
.face-preview-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.face-review-heading{font-family:var(--serif);font-size:20px;color:var(--gold3);letter-spacing:2px;margin-bottom:16px;}
.face-name-field{margin:0 0 20px;}
.face-issue-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.face-issue-card{padding:14px 16px;border:1px solid var(--border-soft);border-left:2px solid var(--warning);border-radius:0 var(--r) var(--r) 0;background:rgba(197,141,88,.06);}
.face-issue-title{font-size:13.5px;color:var(--gold2);font-weight:500;margin-bottom:5px;letter-spacing:.5px;}
.face-issue-advice{font-size:12.5px;color:var(--tx1);line-height:1.8;}
.face-review-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ── Step 4：分析動畫（沿用命盤生成動畫，另加柔和粒子底） ── */
.face-analyzing{position:relative;text-align:center;padding:40px 20px 20px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.face-analyzing-caption{margin-top:8px;font-family:var(--serif);font-size:14px;letter-spacing:3px;color:var(--gold3);min-height:22px;}
.face-analyzing-hint{margin-top:14px;font-size:12px;color:var(--tx3);letter-spacing:1px;}
.face-particles{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,rgba(233,205,143,.12) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(233,205,143,.07) 0 1px,transparent 1.5px);background-size:120px 130px,180px 170px;animation:faceDrift 26s ease-in-out infinite alternate;}
@keyframes faceDrift{from{transform:translate3d(-6px,-4px,0)}to{transform:translate3d(10px,8px,0)}}
.face-analyzing>*{position:relative;z-index:1;}

/* ── Step 5：報告頁專屬補充（骨架沿用 report-hero / report-body / metric-card） ── */
.face-retake-note{margin:0 clamp(20px,6vw,80px) 20px;padding:14px 18px;border:1px solid var(--border-soft);border-left:2px solid var(--warning);border-radius:0 var(--r) var(--r) 0;background:rgba(197,141,88,.06);font-size:12.5px;line-height:1.9;color:var(--tx1);}
.face-retake-note strong{color:var(--gold2);font-weight:500;}
.face-conf-track{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;margin:8px 0 12px;}
.face-conf-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1);}
.face-trait-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.face-trait-tag{font-size:10.5px;padding:4px 11px;border-radius:99px;background:rgba(201,149,42,.1);border:.5px solid var(--border-gold);color:var(--gold2);letter-spacing:.5px;font-weight:500;}
.face-trait-tag.lg{font-size:12px;padding:7px 15px;}
.face-traits-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.face-holistic-body{font-size:15px;line-height:2.2;color:var(--tx1);}
#face-rpt-features.zw-star-grid{margin-top:4px;}

/* ── 響應式 ── */
@media(max-width:860px){
  .face-flow{padding:44px 20px 90px;}
  .face-tips-grid{grid-template-columns:1fr;}
  .face-review-wrap{grid-template-columns:1fr;gap:20px;}
  .face-preview-frame{max-width:220px;margin:0 auto;}
}

/* ══════════════════════════════════════════════════════════════════════════
   面相分析動畫遮罩（face-loader.js 專用）
   深藍黑底、柔和金線、臉部輪廓掃描、命盤聚合。全部沿用品牌色票。
   ══════════════════════════════════════════════════════════════════════════ */
.face-loader{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;
  min-height:100vh;min-height:100dvh;}
.face-loader.is-open{opacity:1;visibility:visible;}
.face-loader.is-hiding{opacity:0;visibility:hidden;}
.fl-scrim{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(9,13,22,.86),rgba(5,7,13,.95) 70%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.fl-panel{position:relative;width:min(440px,100%);max-height:calc(100dvh - 40px);overflow:auto;-webkit-overflow-scrolling:touch;
  padding:34px 30px 28px;text-align:center;border-radius:var(--r2);
  background:linear-gradient(180deg,rgba(19,27,41,.82),rgba(9,13,22,.86));
  border:1px solid var(--border-gold);box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(233,205,143,.08);}
.fl-title{font-family:var(--serif);font-size:19px;letter-spacing:5px;color:var(--gold3);margin-bottom:8px;}
.fl-sub{font-size:13px;letter-spacing:2px;color:var(--tx2);min-height:20px;transition:color .3s ease;}

/* 臉部輪廓掃描 SVG */
.fl-stage{position:relative;width:220px;height:236px;margin:18px auto 8px;}
.fl-svg{width:100%;height:100%;overflow:visible;}
.fl-svg circle,.fl-svg ellipse,.fl-svg path,.fl-svg line{fill:none;vector-effect:non-scaling-stroke;}
.fl-ring{stroke:rgba(200,163,91,.16);stroke-width:1;}
.fl-ring-b{stroke-dasharray:5 12;stroke:rgba(200,163,91,.22);transform-origin:120px 128px;animation:flPlate 40s linear infinite;}
.fl-oval{stroke:var(--gold-primary);stroke-width:1.4;opacity:.9;filter:drop-shadow(0 0 6px rgba(200,163,91,.25));}
.fl-court{stroke:rgba(200,163,91,.28);stroke-width:1;stroke-dasharray:3 6;}
.fl-court-mid{stroke:rgba(200,163,91,.16);}
.fl-dots circle{fill:var(--gold-light);stroke:none;opacity:.25;animation:flDot 2.6s ease-in-out infinite;animation-delay:var(--d);}
.fl-scan{transform:translateY(50px);animation:flScan 2.5s cubic-bezier(.45,0,.25,1) infinite;}
.fl-scan-line{stroke:rgba(233,205,143,.75);stroke-width:1.2;filter:drop-shadow(0 0 5px rgba(233,205,143,.55));}
/* 完成聚合：命盤星圖 + 金勾（預設隱藏） */
.fl-seal{opacity:0;transform:scale(.6);transform-origin:120px 128px;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.25,1);}
.fl-seal-ring{stroke:rgba(200,163,91,.5);stroke-width:1;}
.fl-seal-star{stroke:var(--gold-light);stroke-width:1.2;filter:drop-shadow(0 0 6px rgba(233,205,143,.4));}
.fl-seal-cross{stroke:rgba(200,163,91,.5);stroke-width:1;}
.fl-check{opacity:0;transition:opacity .4s ease .15s;}
.fl-check-ring{stroke:var(--gold-primary);stroke-width:1.4;}
.fl-check-path{stroke:var(--gold-light);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:46;stroke-dashoffset:46;}
.face-loader.is-complete .fl-face,.face-loader.is-complete .fl-scan{opacity:0;transition:opacity .45s ease;}
.face-loader.is-complete .fl-seal{opacity:1;transform:scale(1);}
.face-loader.is-complete .fl-check{opacity:1;}
.face-loader.is-complete .fl-check-path{animation:flDraw .55s ease .2s forwards;}

/* 進度條 + 百分比 */
.fl-progress{height:4px;margin:14px 6px 10px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;}
.fl-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--gold-primary),var(--gold-light));
  box-shadow:0 0 8px rgba(233,205,143,.35);transition:width .18s linear;}
.fl-meta{position:relative;height:18px;margin-bottom:14px;}
.fl-pct{font-family:var(--mono,'Space Grotesk');font-size:12px;letter-spacing:2px;color:var(--gold2);}
.fl-done-text{position:absolute;left:0;right:0;top:0;font-size:12px;letter-spacing:4px;color:var(--gold3);opacity:0;transition:opacity .3s ease;}
.face-loader.is-done .fl-pct{opacity:0;transition:opacity .3s ease;}
.face-loader.is-done .fl-done-text{opacity:1;}

/* 逐項完成清單 */
.fl-check-list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;max-width:320px;text-align:left;}
.fl-item{display:flex;align-items:center;gap:9px;opacity:.5;transition:opacity .4s ease;}
.fl-item.done{opacity:1;}
.fl-mark{flex:0 0 20px;width:20px;height:20px;}
.fl-mark svg{width:20px;height:20px;}
.fl-mark-ring{fill:none;stroke:rgba(200,163,91,.4);stroke-width:1.4;}
.fl-mark-check{fill:none;stroke:var(--gold-light);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;}
.fl-item.done .fl-mark-ring{stroke:var(--gold-primary);}
.fl-item.done .fl-mark-check{animation:flDraw .4s ease forwards;}
.fl-item-label{font-size:12.5px;letter-spacing:1px;color:var(--tx2);transition:color .4s ease;}
.fl-item.done .fl-item-label{color:var(--text-primary);}
.fl-hint{margin-top:16px;font-size:11px;letter-spacing:1.5px;color:var(--tx3);}

/* 動畫關鍵影格 */
@keyframes flScan{0%{transform:translateY(-34px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(130px);opacity:0}}
@keyframes flDot{0%,100%{opacity:.2}50%{opacity:.85}}
@keyframes flPlate{to{transform:rotate(360deg)}}
@keyframes flDraw{to{stroke-dashoffset:0}}

/* 報告由下向上輕微淡入（完成動畫後） */
#page-face-report.face-report-enter{animation:faceReportIn .55s cubic-bezier(.2,.7,.25,1) both;}
@keyframes faceReportIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* 手機版 */
@media(max-width:520px){
  .fl-panel{padding:26px 18px 22px;}
  .fl-stage{width:190px;height:206px;margin:12px auto 6px;}
  .fl-check-list{gap:7px 12px;max-width:100%;}
  .fl-title{font-size:17px;letter-spacing:4px;}
}

/* 尊重減少動態：關閉掃描與脈動，改為簡潔淡入 + 進度提示 */
@media(prefers-reduced-motion: reduce){
  .fl-scan,.fl-dots circle,.fl-ring-b{animation:none;}
  .fl-scan{opacity:0;}
  .fl-dots circle{opacity:.5;}
  .fl-seal,.fl-check{transition:opacity .25s ease;}
  .fl-check-path,.fl-item.done .fl-mark-check{animation:none;stroke-dashoffset:0;}
  .face-loader{transition:opacity .2s ease,visibility .2s ease;}
  #page-face-report.face-report-enter{animation:none;}
  .fl-bar{transition:width .3s linear;}
}
.face-loader.is-reduced .fl-scan{opacity:0;}
.face-loader.is-reduced .fl-dots circle{animation:none;opacity:.5;}