/* ============================================
   #設計系統 //全站顏色、字體、間距都在 :root 統一管理，要改主題色動這裡即可
   ============================================ */
:root {
  --bg: #FAF6F0;          /* #顏色 //全站背景：暖奶油白 */
  --ink: #201B14;         /* #顏色 //主要文字：深咖啡黑 */
  --ink-soft: #6B6157;    /* #顏色 //次要文字：柔和棕灰 */
  --milk: #D8C8B1;        /* #顏色 //品牌奶茶色(與分數計算機 App 背景一致) */
  --milk-deep: #C9B59A;   /* #顏色 //奶茶色加深(漸層用) */
  --orange: #D4722A;      /* #顏色 //強調橘(與 App 運算符號鍵一致) */
  --green: #4A9B6A;       /* #顏色 //輔助綠(與 App 確認鍵一致) */
  --red: #C93A3A;         /* #顏色 //輔助紅(與 App 刪除鍵一致) */
  --gold: #E8B04B;        /* #顏色 //Premium＋ 專用金色 */
  --card: #FFFFFF;        /* #顏色 //卡片底色 */
  --radius: 30px;         /* #圓角 //卡片圓角率，沿用 App 設計原則 30dp */
  --radius-btn: 35px;     /* #圓角 //按鈕圓角率，沿用 App 設計原則 35dp */
  --nav-h: 52px;          /* #尺寸 //頂部導覽列高度，要更高改這裡 */
}

/* #基礎 //重置與全域字體(蘋果系統字體優先) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro TC", "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ============================================
   頂部導覽列 #導覽列 //蘋果式毛玻璃固定列
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 246, 240, 0.72);          /* #導覽列 //半透明底色 */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);       /* #導覽列 //毛玻璃模糊強度(已調低，文字經過時若隱若現)，改 blur() 數值 */
  border-bottom: 1px solid rgba(32, 27, 20, 0.08); /* #導覽列 //底部髮絲線 */
  transition: background 0.4s ease;
}
.nav-inner {
  width: min(980px, 92%);
  display: flex; align-items: center; gap: 28px;   /* #導覽列 //選項之間的間距 */
}
.nav-brand {
  font-weight: 700; font-size: 15px;               /* #導覽列 //左上角品牌字級 */
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  margin-right: auto;                               /* #排版 //品牌靠左，其餘選項推右 */
}
.nav-brand .dango { font-size: 18px; }             /* #導覽列 //品牌前的丸子圖示大小(已不使用 emoji，保留以防舊頁面) */
/* #LOGO //導覽列左上角的圓形小 LOGO(正圓裁切) */
.nav-logo {
  display: block;                                  /* #LOGO //關鍵：避免 inline 行高把圖撐大 */
  width: 28px; height: 28px;                        /* #LOGO //導覽列 LOGO 大小，要更大改這裡 */
  aspect-ratio: 1 / 1;                              /* #LOGO //強制 1:1，確保是正圓不變形 */
  border-radius: 50%; object-fit: cover;            /* #LOGO //正圓形裁切 */
  border: 1px solid rgba(32, 27, 20, 0.10);         /* #LOGO //極淡的描邊，讓淺色圖在淺底上有輪廓 */
}
.nav a.nav-link {
  font-size: 13px; color: var(--ink-soft);          /* #導覽列 //選項字級與顏色 */
  text-decoration: none; position: relative;
  transition: color 0.25s ease;
}
.nav a.nav-link:hover, .nav a.nav-link.active { color: var(--ink); }
/* #動畫 //選項 hover 底線從中間長出來 */
.nav a.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 2px; background: var(--orange);
  border-radius: 2px; transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a.nav-link:hover::after, .nav a.nav-link.active::after { width: 100%; }
/* #響應式 //窄螢幕時縮小導覽列間距與品牌字，避免選項擠出畫面 */
@media (max-width: 560px) {
  .nav-inner { gap: 14px; }
  .nav-brand { font-size: 13px; }
  .nav a.nav-link { font-size: 12px; }
}

/* ============================================
   Hero 區 #首屏 //超大標題＋進場動畫
   ============================================ */
.hero {
  min-height: 86vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 48px) 6% 48px;
  position: relative; overflow: hidden;
}
/* #背景 //首屏底部的奶茶色光暈，柔和不搶戲 */
.hero::before {
  content: ""; position: absolute; inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center, var(--milk) 0%, transparent 65%);
  opacity: 0.55; pointer-events: none;
}
.hero-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--orange); text-transform: uppercase;  /* #首屏 //小眉標字級與顏色 */
  margin-bottom: 20px;
}
/* #簽名元素 //品牌名以「分數」形式堆疊：上中文、中橫線、下英文 */
.frac-title { display: inline-flex; flex-direction: column; align-items: center; }
.frac-title .num {
  font-size: clamp(44px, 8vw, 84px);                /* #首屏 //中文大標題字級(自動縮放) */
  font-weight: 800; letter-spacing: 0.02em; line-height: 1.15;
}
.frac-title .bar {
  width: 100%; height: 5px; border-radius: 3px;
  background: var(--ink); margin: 10px 0;            /* #簽名元素 //分數橫線粗細與間距 */
  transform-origin: center;
}
.frac-title .den {
  font-size: clamp(18px, 3vw, 30px);                 /* #首屏 //英文副標字級 */
  font-weight: 600; color: var(--ink-soft); letter-spacing: 0.18em;
}
.hero-sub {
  margin-top: 26px; max-width: 560px;
  font-size: clamp(16px, 2.2vw, 20px); color: var(--ink-soft); /* #首屏 //說明文字字級 */
}
/* #動畫 //首屏載入時逐項上浮淡入(交錯延遲) */
.rise { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.rise.d1 { animation-delay: 0.05s; }
.rise.d2 { animation-delay: 0.18s; }
.rise.d3 { animation-delay: 0.32s; }
.rise.d4 { animation-delay: 0.46s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
/* #動畫 //分數橫線載入時從中間展開 */
.bar.rise { transform: scaleX(0); animation: barGrow 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes barGrow { to { opacity: 1; transform: scaleX(1); } }

/* ============================================
   語言入口頁 #語言入口 //進站先選語言：大 LOGO＋歡迎標題＋兩顆語言按鈕
   ============================================ */
.gate-logo {
  display: block;                                   /* #LOGO //關鍵：避免 inline 行高把圖撐大 */
  width: clamp(110px, 18vw, 150px); height: clamp(110px, 18vw, 150px); /* #語言入口 //大 LOGO 尺寸(自動縮放) */
  aspect-ratio: 1 / 1;                              /* #LOGO //強制 1:1，確保是正圓不變形 */
  border-radius: 50%; object-fit: cover;            /* #LOGO //正圓形裁切 */
  border: 5px solid #FFFFFF;                        /* #語言入口 //白色描邊厚度 */
  box-shadow: 0 18px 40px -16px rgba(106, 80, 40, 0.35); /* #語言入口 //柔和投影 */
  margin-bottom: 28px;                              /* #語言入口 //LOGO 與標題的距離 */
}
.lang-btns {
  display: flex; gap: 16px; margin-top: 34px;       /* #語言入口 //兩顆語言按鈕的間距與上方留白 */
  flex-wrap: wrap; justify-content: center;
}
.lang-btns .btn { min-width: 160px; text-align: center; } /* #語言入口 //按鈕最小寬度，讓兩顆等寬好看 */

/* #LOGO //首頁 Hero 上方的圓形頭像(比導覽列大、比入口頁小) */
.hero-logo {
  display: block;                                   /* #LOGO //關鍵：避免 inline 行高把圖撐大 */
  width: 92px; height: 92px;                        /* #LOGO //首頁頭像大小，要更大或更小就改這兩個數字 */
  aspect-ratio: 1 / 1;                              /* #LOGO //強制 1:1，確保是正圓不變形 */
  border-radius: 50%; object-fit: cover;
  border: 4px solid #FFFFFF;
  box-shadow: 0 14px 30px -14px rgba(106, 80, 40, 0.3);
  margin-bottom: 22px;
}

/* ============================================
   內容區與卡片 #版面 //置中欄寬＋捲動進場
   ============================================ */
.section { width: min(980px, 92%); margin: 0 auto; padding: 72px 0; } /* #版面 //每個段落的上下留白 */
.section-title {
  font-size: clamp(28px, 4.5vw, 44px); font-weight: 800;  /* #版面 //段落標題字級 */
  letter-spacing: 0.01em; margin-bottom: 14px;
}
.section-sub { color: var(--ink-soft); max-width: 620px; margin-bottom: 40px; }

/* #卡片 //雙欄 App 卡片(手機自動單欄) */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .card-grid { grid-template-columns: 1fr; } }
.app-card {
  background: var(--card); border-radius: var(--radius);
  padding: 36px 32px; text-decoration: none; color: var(--ink);
  border: 1px solid rgba(32, 27, 20, 0.06);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; /* #動畫 //hover 浮起 */
  display: flex; flex-direction: column; gap: 14px;
}
.app-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -20px rgba(106, 80, 40, 0.28); }
.app-card h3 { font-size: 24px; font-weight: 800; }       /* #卡片 //App 名稱字級 */
.app-card p { color: var(--ink-soft); font-size: 15px; }
.app-card .go { color: var(--orange); font-weight: 600; font-size: 14px; margin-top: auto; }

/* #按鈕 //主要操作大按鈕(圓角 35px 沿用 App 原則) */
.btn {
  display: inline-block; padding: 14px 32px;
  border-radius: var(--radius-btn);
  background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;  /* #按鈕 //主按鈕字級 */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.btn:hover { transform: scale(1.04); background: #000; }    /* #動畫 //hover 微放大 */
.btn.orange { background: var(--orange); }
.btn.orange:hover { background: #BE6322; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(32,27,20,0.25); }
.btn.ghost:hover { border-color: var(--ink); background: rgba(32,27,20,0.04); }
.btn.outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); } /* #按鈕 //黑色實線、無填充(迷因計算機切換鈕) */
.btn.outline:hover { background: rgba(32,27,20,0.06); }

/* #狀態光環 //設計原則6：維持狀態的按鈕，選中時外圍浮現白色環繞圈(與按鈕保持一點距離) */
.state-btn { position: relative; }
.state-btn::after {
  content: ""; position: absolute; inset: -6px;       /* #狀態光環 //-6px=光環與按鈕的距離，想更遠改大 */
  border-radius: 41px;                                 /* #狀態光環 //按鈕圓角35px+6px距離=41px */
  border: 2.5px solid #FFFFFF;                         /* #狀態光環 //白色環圈(原則6-3)，粗細2.5px */
  box-shadow: 0 2px 12px rgba(32, 27, 20, 0.15);       /* #狀態光環 //淡影：讓白環在奶油色底上看得見 */
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;                       /* #狀態光環 //取消選中：0.2秒淡出(原則6-2) */
}
.state-btn.selected::after {
  opacity: 1;
  transition: opacity 0.5s ease;                       /* #狀態光環 //選中：0.5秒淡入(原則6-2) */
}

/* #隱私分頁動畫 //內容切換：舊內容0.2秒淡出→新內容0.5秒淡入上浮(不硬切) */
.legal-pane { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.legal-pane.hiding { opacity: 0; transition: opacity 0.2s ease; }      /* #隱私分頁動畫 //淡出0.2秒 */
.legal-pane.entering { opacity: 0; transform: translateY(12px); transition: none; } /* #隱私分頁動畫 //淡入起點 */

/* #動畫 //捲動進場：JS 偵測進入畫面後加上 .in 觸發上浮淡入 */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================
   特色列表 #特色 //圖＋文交錯排版(蘋果產品頁式)
   ============================================ */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; padding: 56px 0;
}
.feature.flip .art { order: 2; }                            /* #排版 //奇偶交錯：圖在右 */
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } .feature.flip .art { order: 0; } }
.feature h3 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin-bottom: 12px; }
.feature p { color: var(--ink-soft); font-size: 16px; }
.feature .art {
  background: linear-gradient(160deg, var(--milk) 0%, var(--milk-deep) 100%);  /* #插圖 //插圖底板奶茶漸層 */
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 40px; min-height: 280px;
}
.feature .art svg { width: 100%; max-width: 320px; height: auto; }

/* ============================================
   Premium＋ 區塊 #Premium //深咖啡大卡片＋金色點綴＋權益格
   ============================================ */
.premium-card {
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 64px);                  /* #Premium //卡片內距(自動縮放) */
  position: relative; overflow: hidden;
}
/* #背景 //右上角的金色光暈，呼應 Premium 質感 */
.premium-card::before {
  content: ""; position: absolute; top: -30%; right: -15%;
  width: 50%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(232, 176, 75, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.premium-card .p-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold); text-transform: uppercase;    /* #Premium //金色小眉標 */
  margin-bottom: 14px;
}
.premium-card h2 {
  font-size: clamp(26px, 4vw, 40px); font-weight: 800;  /* #Premium //標題字級 */
  margin-bottom: 12px;
}
.premium-card > p { color: rgba(250, 246, 240, 0.72); max-width: 560px; }

/* #Premium //權益格：桌機三欄、手機單欄 */
.perk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;  /* #Premium //權益卡之間的間距 */
  margin-top: 36px;
}
@media (max-width: 760px) { .perk-grid { grid-template-columns: 1fr; } }
.perk {
  background: rgba(250, 246, 240, 0.07);            /* #Premium //權益卡半透明底 */
  border: 1px solid rgba(250, 246, 240, 0.10);
  border-radius: 20px;                               /* #Premium //權益卡圓角 */
  padding: 22px 20px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.perk:hover { background: rgba(250, 246, 240, 0.12); transform: translateY(-4px); } /* #動畫 //hover 微浮起 */
.perk .icon { font-size: 26px; margin-bottom: 10px; }  /* #Premium //權益圖示大小 */
.perk h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.perk p { font-size: 14px; color: rgba(250, 246, 240, 0.65); line-height: 1.55; }

/* #Premium //底部價格列：一次買斷標語＋金色價格 */
.price-row {
  margin-top: 36px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.price-row .price { font-size: clamp(30px, 5vw, 44px); font-weight: 800; color: var(--gold); } /* #Premium //價格字級與金色 */
.price-row .note { font-size: 14px; color: rgba(250, 246, 240, 0.6); }

/* ============================================
   隱私權政策內文 #長文 //沿用 App 文字原則：標題粗體、內文正常
   ============================================ */
.legal { max-width: 760px; }
.legal h2 { font-size: 20px; font-weight: 800; margin: 40px 0 12px; }  /* #長文 //條文標題(粗體) */
.legal p, .legal li { font-size: 15px; color: #3D362E; margin-bottom: 10px; }
.legal ul, .legal ol { padding-left: 22px; margin-bottom: 14px; }
.legal .updated { color: var(--ink-soft); font-size: 13px; }
.legal .notice {
  background: var(--card); border-radius: 20px; padding: 18px 22px;
  border: 1px solid rgba(32,27,20,0.08); font-size: 14px; color: var(--ink-soft);
}

/* ============================================
   頁尾 #頁尾
   ============================================ */
.footer {
  border-top: 1px solid rgba(32, 27, 20, 0.08);
  margin-top: 64px; padding: 40px 6%;
  text-align: center; color: var(--ink-soft); font-size: 12px;  /* #頁尾 //權利宣告 12px 淺灰，沿用 App 原則 */
}
.footer a { color: var(--ink-soft); }

/* ============================================
   手機漢堡選單 #手機選單 //窄螢幕收合為三條線，點擊展開全螢幕選單
   ============================================ */
.nav-burger {
  display: none;                                    /* #手機選單 //桌機隱藏，窄螢幕才顯示 */
  margin-left: 4px;
  width: 40px; height: 40px;                        /* #手機選單 //漢堡按鈕點擊範圍 */
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  z-index: 110;                                     /* #層級 //蓋在全螢幕選單之上，開啟後仍可點擊關閉 */
}
.nav-burger span {
  display: block; width: 22px; height: 2px;         /* #手機選單 //三條線的長度與粗細 */
  background: var(--ink); border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; /* #動畫 //三條線變叉叉的回彈感 */
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }  /* #動畫 //上線轉成叉叉 */
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }                                /* #動畫 //中線淡出 */
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }/* #動畫 //下線轉成叉叉 */

/* #手機選單 //全螢幕選單：依 App 原則「從何處來回何處去」——從右上角漢堡位置長出來 */
.nav-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(250, 246, 240, 0.94);            /* #手機選單 //底色(半透明奶油白) */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* #手機選單 //毛玻璃模糊強度 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  opacity: 0; pointer-events: none;
  transform: scale(0.9); transform-origin: top right; /* #動畫 //縮放原點＝右上角漢堡位置 */
  transition: opacity 0.22s ease, transform 0.22s ease; /* #動畫 //收合速度(快) */
}
body.menu-open .nav-menu {
  opacity: 1; pointer-events: auto; transform: scale(1);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* #動畫 //展開帶 Q 彈回彈 */
}
.nav-menu a {
  font-size: 26px; font-weight: 800;                 /* #手機選單 //選項字級 */
  color: var(--ink); text-decoration: none; padding: 10px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .nav-menu a { opacity: 1; transform: none; }
/* #動畫 //選項交錯進場：一個接一個浮上來 */
body.menu-open .nav-menu a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .nav-menu a:nth-child(2) { transition-delay: 0.11s; }
body.menu-open .nav-menu a:nth-child(3) { transition-delay: 0.16s; }
body.menu-open .nav-menu a:nth-child(4) { transition-delay: 0.21s; }
body.menu-open .nav-menu a:nth-child(5) { transition-delay: 0.26s; }
body.menu-open .nav-menu a:nth-child(6) { transition-delay: 0.31s; }
body.menu-open .nav-menu a:nth-child(7) { transition-delay: 0.36s; }
.nav-menu a.menu-lang { color: var(--orange); font-size: 20px; margin-top: 10px; } /* #手機選單 //語言切換選項：橘色、略小 */
body.menu-open { overflow: hidden; }                 /* #手機選單 //選單開啟時鎖住背景捲動 */
/* #響應式 //760px 以下：隱藏橫排選項、顯示漢堡 */
@media (max-width: 760px) {
  .nav-inner .nav-link { display: none; }
  .nav-burger { display: flex; }
}

/* ============================================
   插圖動畫系統 #動畫 //捲動到該區塊(.reveal.in)後才開始播放，循環演示
   ============================================ */
/* #動畫基礎 //SVG 內的動畫元素：以自身為縮放原點 */
.art svg [class*="an-"], .art svg [class*="fx"], .app-card svg [class*="hm-"] {
  transform-box: fill-box; transform-origin: center;
}
/* #動畫基礎 //預設隱藏的特效元素(漣漪、打勾等)，動畫開始才出現 */
.fx2-rip, .fx2-rip2, .fx2-c2, .fx6-chk, .an-tap, .an-txtl { opacity: 0; }

/* ---- 首頁作品卡：6 先彈出、7 再浮現(進場播一次) #首頁動畫 ---- */
@keyframes hmPop  { 0% { opacity: 0; transform: scale(0.4); } 55% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hmBar  { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes hmRise { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
.reveal.in .hm-six   { animation: hmPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } /* #首頁動畫 //橘色6彈出 */
.reveal.in .hm-bar   { animation: hmBar 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }     /* #首頁動畫 //分數線展開 */
.reveal.in .hm-seven { animation: hmRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both; }    /* #首頁動畫 //7浮現 */

/* ---- 分數頁：三形式選單(點擊→黑選單從按鈕長出→換勾→收回，照 App 邏輯) #選單動畫 ---- */
@keyframes fxRipple  { 0%, 5% { opacity: 0; transform: scale(0.3); } 7% { opacity: 0.5; transform: scale(0.7); } 13% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes fxRipple2 { 0%, 42% { opacity: 0; transform: scale(0.3); } 44% { opacity: 0.45; transform: scale(0.7); } 50% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes fxMenu {
  0%, 8%   { opacity: 0; transform: scale(0.01); }   /* #選單動畫 //收合待機 */
  9%       { opacity: 1; }
  13%      { transform: scale(1.07); }                /* #選單動畫 //彈開過頭(Q彈) */
  16%      { transform: scale(0.97); }                /* #選單動畫 //回彈 */
  18%      { transform: scale(1); }
  80%      { opacity: 1; transform: scale(1); }
  84%, 100%{ opacity: 0; transform: scale(0.01); }    /* #選單動畫 //快速收回原點 */
}
@keyframes fxChk1 { 0%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes fxChk2 { 0%, 49% { opacity: 0; transform: scale(0.4); } 52% { opacity: 1; transform: scale(1.2); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
.reveal.in .fx2-rip  { animation: fxRipple 7s linear infinite; }
.reveal.in .fx2-rip2 { animation: fxRipple2 7s linear infinite; }
.reveal.in .fx2-menu { animation: fxMenu 7s cubic-bezier(0.22, 1, 0.36, 1) infinite; transform-box: view-box; transform-origin: 52px 26px; } /* #選單動畫 //原點＝「分數」按鈕中心 */
.reveal.in .fx2-c1   { animation: fxChk1 7s linear infinite; }
.reveal.in .fx2-c2   { animation: fxChk2 7s linear infinite; }

/* ---- 分數頁：三種顯示模式(選取框滑動、數值輪流亮起) #模式動畫 ---- */
@keyframes fxRing { 0%, 26% { transform: translateX(0); } 33%, 59% { transform: translateX(76px); } 66%, 92% { transform: translateX(152px); } 100% { transform: translateX(0); } }
@keyframes fxV1 { 0%, 26% { opacity: 1; } 33%, 92% { opacity: 0.22; } 100% { opacity: 1; } }
@keyframes fxV2 { 0%, 26% { opacity: 0.22; } 33%, 59% { opacity: 1; } 66%, 100% { opacity: 0.22; } }
@keyframes fxV3 { 0%, 59% { opacity: 0.22; } 66%, 92% { opacity: 1; } 100% { opacity: 0.22; } }
.reveal.in .fx3-ring { animation: fxRing 6s ease-in-out infinite; }
.reveal.in .fx3-v1 { animation: fxV1 6s linear infinite; }
.reveal.in .fx3-v2 { animation: fxV2 6s linear infinite; }
.reveal.in .fx3-v3 { animation: fxV3 6s linear infinite; }

/* ---- 共用：按鍵 Q 彈按壓(縮小→回彈，同 App 按鍵手感) #按壓動畫 ---- */
@keyframes fxPress { 0% { transform: scale(1); } 5% { transform: scale(0.85); } 9% { transform: scale(1.06); } 12%, 100% { transform: scale(1); } }
.reveal.in .an-press { animation: fxPress 4.8s ease-out infinite; }
/* #按壓動畫 //交錯延遲：讓多顆按鍵輪流被按 */
.reveal.in .an-d1 { animation-delay: 0.25s; } .reveal.in .an-d2 { animation-delay: 0.9s; }
.reveal.in .an-d3 { animation-delay: 1.55s; } .reveal.in .an-d4 { animation-delay: 2.2s; }
.reveal.in .an-d5 { animation-delay: 2.85s; } .reveal.in .an-d6 { animation-delay: 3.5s; }

/* ---- 分數頁：鋼琴音符飄浮、琴鍵下壓 #鋼琴動畫 ---- */
@keyframes fxNote { 0%, 8% { opacity: 0; transform: translateY(8px); } 16% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translateY(-14px); } 78%, 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes fxKey  { 0%, 4% { transform: translateY(0); } 7% { transform: translateY(4px); } 10%, 100% { transform: translateY(0); } }
.reveal.in .fx5-n1 { animation: fxNote 4s ease-out infinite both; }
.reveal.in .fx5-n2 { animation: fxNote 4s ease-out 2s infinite both; }
.reveal.in .fx5-k1 { animation: fxKey 4s ease-out infinite; }
.reveal.in .fx5-k2 { animation: fxKey 4s ease-out 2s infinite; }

/* ---- 分數頁：歷史紀錄複製鍵按壓＋綠勾彈出 #歷史動畫 ---- */
@keyframes fxChkPop { 0%, 12% { opacity: 0; transform: scale(0.4); } 16% { opacity: 1; transform: scale(1.18); } 19% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 78%, 100% { opacity: 0; } }
.reveal.in .fx6-btn { animation: fxPress 5s ease-out 0.4s infinite; }
.reveal.in .fx6-chk { animation: fxChkPop 5s ease-out infinite; }

/* ---- 分數頁：語言氣泡上下漂浮 #語言動畫 ---- */
@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.reveal.in .fx7-b1 { animation: fxBob 3.2s ease-in-out infinite; }
.reveal.in .fx7-b2 { animation: fxBob 3.8s ease-in-out 0.4s infinite; }
.reveal.in .fx7-b3 { animation: fxBob 3.4s ease-in-out 0.8s infinite; }
.reveal.in .fx7-b4 { animation: fxBob 4s ease-in-out 0.2s infinite; }

/* ---- 通用動畫庫：設計哲學頁與專案能力頁共用 #通用動畫 ---- */
@keyframes aSpin   { to { transform: rotate(360deg); } }
@keyframes aSpinR  { to { transform: rotate(-360deg); } }
@keyframes aPulse  { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes aBreath { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }                /* #通用動畫 //呼吸光環(App 設計原則) */
@keyframes aFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14px, -10px) scale(1.15); } }
@keyframes aDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12px, 8px) scale(0.9); } }
@keyframes aMarch  { to { stroke-dashoffset: -48; } }                                  /* #通用動畫 //虛線行進(對齊線) */
@keyframes aGrowY  { 0%, 8% { transform: scaleY(0.06); } 40% { transform: scaleY(1); } 86% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0.06); } }
@keyframes aGrowX  { 0%, 8% { transform: scaleX(0.05); } 45% { transform: scaleX(1); } 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0.05); } }
@keyframes aDraw   { 0%, 8% { stroke-dashoffset: var(--len, 260); } 55% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: var(--len, 260); } }
@keyframes aPopLoop{ 0%, 10% { opacity: 0; transform: translateY(10px); } 22% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes aDotUp  { 0%, 10% { opacity: 0; transform: translateY(0); } 22% { opacity: 1; } 70% { opacity: 1; transform: translateY(-30px); } 85%, 100% { opacity: 0; transform: translateY(-36px); } }
@keyframes aLens   { 0%, 18% { transform: translate(0, 0); } 30%, 48% { transform: translate(58px, 16px); } 60%, 82% { transform: translate(112px, -6px); } 100% { transform: translate(0, 0); } }
@keyframes aTap    { 0%, 10% { opacity: 0; transform: scale(0.3); } 14% { opacity: 0.5; transform: scale(0.8); } 22% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes aBgFlip { 0%, 38% { fill: #FAF6F0; } 52%, 86% { fill: #201B14; } 100% { fill: #FAF6F0; } }    /* #可讀性動畫 //背景淺→深 */
@keyframes aTxtDark { 0%, 38% { opacity: 1; } 52%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aTxtLight{ 0%, 38% { opacity: 0; } 52%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aJelly  { 0%, 10% { opacity: 0; transform: scale(0.01); } 11% { opacity: 1; } 16% { transform: scale(1.08); } 20% { transform: scale(0.96); } 23% { transform: scale(1); } 74% { opacity: 1; transform: scale(1); } 79%, 100% { opacity: 0; transform: scale(0.01); } } /* #空間溯源 //果凍彈出又縮回原點 */
@keyframes aRocket { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aFlame  { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } }
@keyframes aGlow   { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }                /* #光暈動畫 //計算結果邊緣光 */
@keyframes aToggle { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(26px); } 100% { transform: translateX(0); } }
@keyframes aPanelA { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0.2; } 100% { opacity: 1; } }
@keyframes aPanelB { 0%, 40% { opacity: 0.2; } 50%, 90% { opacity: 1; } 100% { opacity: 0.2; } }
/* #通用動畫 //對應類別(都在進入畫面後才播放) */
.reveal.in .an-spin   { animation: aSpin 7s linear infinite; }
.reveal.in .an-spin-r { animation: aSpinR 8s linear infinite; }
.reveal.in .an-pulse  { animation: aPulse 2.6s ease-in-out infinite; }
.reveal.in .an-breath { animation: aBreath 3.2s ease-in-out infinite; }
.reveal.in .an-float  { animation: aFloat 3.4s ease-in-out infinite; }
.reveal.in .an-drift1 { animation: aDrift1 7s ease-in-out infinite; }
.reveal.in .an-drift2 { animation: aDrift2 8s ease-in-out infinite; }
.reveal.in .an-march  { animation: aMarch 1.8s linear infinite; }
.reveal.in .an-growy  { animation: aGrowY 5s ease-out infinite; transform-origin: center bottom; }
.reveal.in .an-growx  { animation: aGrowX 5s ease-out infinite; transform-origin: left center; }
.reveal.in .an-draw   { animation: aDraw 5s ease-in-out infinite; }
.reveal.in .an-pop    { animation: aPopLoop 5s ease-out infinite; }
.reveal.in .an-dotup  { animation: aDotUp 3.6s ease-out infinite; }
.reveal.in .an-lens   { animation: aLens 7s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.reveal.in .an-tap    { animation: aTap 4s linear infinite; }
.reveal.in .an-bgflip { animation: aBgFlip 5s ease-in-out infinite; }
.reveal.in .an-txtd   { animation: aTxtDark 5s linear infinite; }
.reveal.in .an-txtl   { animation: aTxtLight 5s linear infinite; }
.reveal.in .an-jelly  { animation: aJelly 6.5s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.reveal.in .an-rocket { animation: aRocket 3s ease-in-out infinite; }
.reveal.in .an-flame  { animation: aFlame 0.5s ease-in-out infinite; }
.reveal.in .an-glow   { animation: aGlow 2.8s ease-in-out infinite; }
.reveal.in .an-toggle { animation: aToggle 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.reveal.in .an-pa     { animation: aPanelA 6s linear infinite; }
.reveal.in .an-pb     { animation: aPanelB 6s linear infinite; }

/* ============================================
   Premium＋ 補強 #Premium //金色包邊與手繪圖示
   ============================================ */
.premium-card { border: 2px solid var(--gold); }     /* #Premium //黃色包邊(同 App Premium 金色色票 #E8B04B) */
.perk .icon { width: 30px; height: 30px; margin-bottom: 12px; } /* #Premium //圖示大小 */
.perk .icon svg { width: 100%; height: 100%; display: block; }

/* #結尾大字 //「即將登錄 Google Play」 */
.coming-line {
  text-align: center;
  font-size: clamp(30px, 5.5vw, 54px);               /* #結尾大字 //字級(自動縮放) */
  font-weight: 800; letter-spacing: 0.02em;
  padding: 24px 0 8px;
}

/* #無障礙 //使用者系統設定「減少動態」時關閉所有動畫 */
@media (prefers-reduced-motion: reduce) {
  .rise, .bar.rise { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal.in [class*="an-"], .reveal.in [class*="fx"], .reveal.in [class*="hm-"] { animation: none !important; } /* #無障礙 //插圖動畫全部停用 */
  .nav-menu, .nav-menu a, .nav-burger span { transition: none !important; }  /* #無障礙 //選單轉場停用 */
  html { scroll-behavior: auto; }
}

/* ============================================
   #頁面轉場 //原生 View Transitions：點連結換頁時，舊頁與新頁同時交叉淡化
   進設計哲學頁(深色)時，會從亮底「漸變」成暗底而非硬切；離開時反向淡回。
   需全站頁面都載入此 style.css 才會雙向生效(本站皆有)；不支援的舊瀏覽器自動退回即時切換，不會出現怪動畫
   ============================================ */
@view-transition { navigation: auto; }            /* #頁面轉場 //開啟跨頁交叉淡化的總開關 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;                       /* #頁面轉場 //淡化時間，想更慢改大、更快改小(秒) */
  animation-timing-function: ease;                 /* #頁面轉場 //淡化節奏曲線 */
}
/* #無障礙 //系統開啟「減少動態」時，轉場幾乎瞬間完成 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01s; }
}


/* ============================================
   #選單光暈 //手機全螢幕選單開啟時，背景浮現漂移的彩色光暈(與首頁封面同款氛圍)。桌機選單隱藏、不受影響。光暈 DOM 由 script.js 注入到 .nav-menu 內
   ============================================ */
@property --menu-glow-color { syntax: '<color>'; inherits: true; initial-value: #E8B04B; }
.nav-menu .menu-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nav-menu .menu-glow .m-blob { position: absolute; border-radius: 50%; filter: blur(66px); background: radial-gradient(circle, var(--menu-glow-color) 0%, transparent 70%); will-change: transform; animation-play-state: paused; }
.nav-menu .menu-glow .mb1 { width: 74vw; height: 74vw; left: -20vw; top: -10vh;  opacity: 0.72; animation: mGlowFlow1 13s ease-in-out infinite, mGlowColor 26s linear infinite; }
.nav-menu .menu-glow .mb2 { width: 60vw; height: 60vw; right: -18vw; top: 22vh;  opacity: 0.62; animation: mGlowFlow2 16s ease-in-out infinite, mGlowColor 26s linear infinite; }
.nav-menu .menu-glow .mb3 { width: 66vw; height: 66vw; left: 8vw;  bottom: -28vh; opacity: 0.66; animation: mGlowFlow3 11s ease-in-out infinite, mGlowColor 26s linear infinite; }
body.menu-open .nav-menu .menu-glow .m-blob { animation-play-state: running; }
.nav-menu a { position: relative; z-index: 1; }
@keyframes mGlowFlow1 { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(11vw,-9vh) scale(1.25); } 66% { transform: translate(-5vw,7vh) scale(0.9); } 100% { transform: translate(0,0) scale(1); } }
@keyframes mGlowFlow2 { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(-12vw,8vh) scale(0.78); } 66% { transform: translate(6vw,-10vh) scale(1.15); } 100% { transform: translate(0,0) scale(1); } }
@keyframes mGlowFlow3 { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(9vw,-11vh) scale(1.22); } 66% { transform: translate(-7vw,6vh) scale(0.85); } 100% { transform: translate(0,0) scale(1); } }
@keyframes mGlowColor { 0% { --menu-glow-color: #ADD8E6; } 38.462% { --menu-glow-color: #ADD8E6; } 44.231% { --menu-glow-color: #B4C9AB; } 50% { --menu-glow-color: #E8B04B; } 88.462% { --menu-glow-color: #E8B04B; } 94.231% { --menu-glow-color: #B4C9AB; } 100% { --menu-glow-color: #ADD8E6; } }
@media (prefers-reduced-motion: reduce) { .nav-menu .menu-glow { display: none; } }