/* ============================================================
   animated.css — 動畫強化版的設計層
   在 style.css 之後載入，只有前台頁面載入它（後台維持原樣式）。
   規則：只改「外觀與動態」，不改任何文字內容。
   ============================================================ */

:root {
  --brand:      #0a5c78;
  --brand-lit:  #14919b;
  --amber:      #f4a261;
  --coral:      #e76f51;

  --ink:        #0a2833;
  --ink-soft:   #46626e;
  --ink-faint:  #7d949e;
  --ground:     #f4fafc;
  --surface:    #ffffff;
  --surface-2:  #e9f4f9;
  --line:       #d3e6ee;
  --deep:       #06222e;

  --glow-a: rgba(20,145,155,.34);
  --glow-b: rgba(244,162,97,.30);
  --glow-c: rgba(10,92,120,.26);

  --shadow-sm: 0 2px 10px rgba(6,34,46,.07);
  --shadow-md: 0 12px 34px rgba(6,34,46,.11);
  --shadow-lg: 0 30px 70px rgba(6,34,46,.18);

  --font-ui: "Sora", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

/* 這一版刻意只做淺色主題。
   style.css 裡有 38 條寫死的淺色規則（白底、#444 文字等），後台頁面也共用同一份，
   要支援深色就得逐條覆寫、而且日後改 style.css 很容易再破一次。
   客戶確認的方向本來就是「亮色科技感」，所以這裡直接鎖定淺色，
   用 color-scheme: light 明確宣告，系統設深色時也不會被瀏覽器反轉。 */

/* ---------- 基礎排版 ---------- */
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--ground);
  background-attachment: scroll;
  overflow-x: hidden;
}

/* 全站環境光：兩顆極慢漂移的模糊色球，取代原本的固定漸層底 */
body::before {
  content: "";
  position: fixed; inset: -20vh -20vw;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%,  var(--glow-a), transparent 62%),
    radial-gradient(34vw 34vw at 88% 22%, var(--glow-b), transparent 62%),
    radial-gradient(44vw 44vw at 62% 92%, var(--glow-c), transparent 64%);
  animation: ambient 34s ease-in-out infinite;
}
@keyframes ambient {
  0%, 100% { transform: none; }
  50%      { transform: translate3d(3vw, -2vh, 0) scale(1.1); }
}

h1, h2, h3 { font-family: var(--font-ui); letter-spacing: -.015em; text-wrap: balance; }

main h1 {
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
  position: relative;
  font-weight: 800;
}
/* 標題底線改成會自己長出來的漸層 */
main h1::after {
  content: "";
  display: block; height: 4px; margin-top: .5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-lit), var(--amber), var(--coral));
  transform: scaleX(0); transform-origin: 0 50%;
  animation: rule-in .9s var(--ease) .25s forwards;
}
@keyframes rule-in { to { transform: scaleX(1); } }

h2 { color: var(--brand); }
.hint-text { color: var(--ink-soft); }

/* 內容主容器改為玻璃卡 */
main {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  animation: main-in .7s var(--ease) both;
}
@keyframes main-in {
  from { opacity: 0; transform: translateY(18px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
/* style.css 在手機版把 main 的圓角從 20px 收到 14px（窄容器配大圓角會很笨重）。
   這裡放大成 26px 也要跟著收，否則手機版會留下不成比例的大圓角。 */
@media (max-width: 640px) {
  main { border-radius: 18px; }
}

/* ---------- 導覽列 ---------- */
/* 導覽列維持原本的藍綠漸層＋白字（style.css 裡的子元素都是白字，
   改成淺色玻璃會讓「返回首頁／選單／管理者登入」整排看不見），
   這裡只加上毛玻璃質感與捲動後的收縮陰影。 */
.nav-bar {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #0a5c78 88%, transparent) 0%,
      color-mix(in srgb, #14919b 88%, transparent) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 4px 15px rgba(10, 92, 120, .18);
  transition: padding .35s var(--ease), box-shadow .35s ease;
}
body.nav-stuck .nav-bar {
  padding-block: .65rem;
  box-shadow: 0 10px 30px rgba(10, 92, 120, .34);
}

.nav-logo { transition: transform .4s var(--ease); }
.nav-brand:hover .nav-logo { transform: rotate(-4deg) scale(1.06); }

.nav-links a,
.nav-home,
.nav-toggle,
.nav-auth-btn {
  border-radius: 999px;
  transition: background .3s ease, transform .25s var(--ease), box-shadow .3s ease;
}
.nav-links a:hover,
.nav-home:hover,
.nav-toggle:hover,
.nav-auth-btn:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}

/* 頂端捲動進度條 */
#scroll-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 100%; z-index: 120;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-lit), var(--amber), var(--coral));
  pointer-events: none;
}

/* 游標指示環（僅滑鼠裝置）
   原本是 420px 的大片模糊光暈，反而看不出游標在哪；改成貼著游標的小光環，
   位置一目了然。系統原本的游標不隱藏，這一圈只是加強標示。 */
#cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand-lit) 78%, transparent);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--brand-lit) 20%, transparent) 0%, transparent 70%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand-lit) 42%, transparent);
  pointer-events: none; z-index: 128; opacity: 0;
  transition: opacity .3s ease, width .22s var(--ease), height .22s var(--ease),
              margin .22s var(--ease), border-color .22s ease,
              background .22s ease, box-shadow .22s ease;
}
body.pointer-live #cursor-glow { opacity: 1; }

/* 移到可點的東西上時放大並轉成橘色，讓「這個可以按」更明顯 */
body.cursor-hot #cursor-glow {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: color-mix(in srgb, var(--coral) 85%, transparent);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--amber) 26%, transparent) 0%, transparent 72%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--coral) 50%, transparent);
}

@media (pointer: coarse) { #cursor-glow { display: none; } }

/* 換頁簾幕 */
#page-curtain {
  position: fixed; inset: 0; z-index: 130; pointer-events: none;
  transform: scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(160deg, var(--brand) 0%, var(--deep) 60%, var(--coral) 165%);
}
#page-curtain.in  { transform: scaleY(1); transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.7,0,.3,1); }
#page-curtain.out { transform: scaleY(0); transform-origin: 50% 0;    transition: transform .45s cubic-bezier(.7,0,.3,1); }

/* ============================================================
   進場動畫：animate.js 自動替元素加上 .reveal，捲到才顯示
   只有 html.anim（JS 已啟動）時才預先隱藏，JS 沒跑內容照樣看得到
   ============================================================ */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s ease; }
html.anim .reveal      { opacity: 0; transform: translateY(28px); filter: blur(5px); }
html.anim .reveal.zoom { transform: scale(.93); }
html.anim .reveal.tilt { transform: perspective(1100px) rotateX(12deg) translateY(38px); }
html.anim .reveal.in   { opacity: 1; transform: none; filter: none; }

/* ============================================================
   卡片類：首頁功能卡／據點卡／消息卡／鄉鎮按鈕
   ============================================================ */
.directory-card,
.venue-card,
.post-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .38s var(--ease), box-shadow .38s ease, border-color .38s ease;
}

/* 卡內光暈跟著游標跑 */
.directory-card::before,
.venue-card::before,
.post-card::before {
  content: "";
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--brand-lit) 16%, transparent), transparent 62%);
  transition: opacity .35s ease;
  pointer-events: none;
}
/* 漸層邊框掃過 */
.directory-card::after,
.venue-card::after,
.post-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, var(--brand-lit), var(--amber), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.directory-card:hover,
.venue-card:hover,
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--brand-lit) 40%, var(--line));
}
.directory-card:hover::before, .directory-card:hover::after,
.venue-card:hover::before,    .venue-card:hover::after,
.post-card:hover::before,     .post-card:hover::after { opacity: 1; }

.directory-card > *, .venue-card > *, .post-card > * { position: relative; z-index: 1; }

.directory-card h3, .venue-card h3, .post-card h3 { color: var(--brand); }
.directory-card p, .venue-card p, .post-card p { color: var(--ink-soft); }

/* 圖示放大 + 更多內容箭頭滑出 */
.directory-icon { transition: transform .4s var(--ease); display: inline-block; }
.directory-card:hover .directory-icon { transform: scale(1.18) rotate(-6deg); }
.directory-more { color: var(--coral); transition: transform .3s var(--ease); display: inline-block; }
.directory-card:hover .directory-more { transform: translateX(6px); }

/* ---------- 按鈕 ---------- */
.primary-button,
.hero-cta,
.map-cta-buttons a {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--amber), var(--coral));
  border: 0; color: #fff;
  box-shadow: 0 10px 30px rgba(231,111,81,.34);
  transition: transform .22s var(--ease), box-shadow .3s ease;
}
.primary-button::after,
.hero-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: sheen 3.6s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes sheen { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.primary-button:hover,
.hero-cta:hover,
.map-cta-buttons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(231,111,81,.46);
}

.secondary-button {
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--brand);
  border-radius: 999px;
  transition: transform .25s var(--ease), border-color .25s ease, background .25s ease;
}
.secondary-button:hover {
  transform: translateY(-2px);
  border-color: var(--brand-lit);
  background: var(--surface);
}

/* 返回鍵：style.css 特地把它從按鈕群組拿掉，設成 display:block + padding:0 + border:none
   的純文字連結。只補邊框而不改這三項，就會變成一條橫跨整個版面、裡面空空的膠囊。
   這裡讓它縮回內容寬度、補上內距，做成跟其他按鈕同一套語彙的小膠囊；
   hover 時整顆往左滑，用動作把「返回」講出來（箭頭是文字的一部分，不另外拆開處理）。 */
.back-button {
  /* flex（區塊層級）＋ fit-content：自己佔一行，寬度仍只包住文字。
     不能用 inline-flex —— style.css 的 h1 是 inline-block，
     兩個都是行內層級就會擠在同一行。 */
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 0;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--brand);
  font-size: .98rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), border-color .25s ease,
              background .25s ease, box-shadow .25s ease, color .25s ease;
}
.back-button:hover {
  transform: translateX(-4px);
  border-color: var(--brand-lit);
  background: var(--surface);
  color: var(--brand-lit);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ---------- 頁籤 ---------- */
.page-tab {
  border-radius: 999px;
  transition: color .3s ease, background .3s ease, transform .25s var(--ease);
}
.page-tab:hover { transform: translateY(-2px); }
.page-tab.active {
  background: linear-gradient(120deg, var(--brand), var(--brand-lit));
  color: #fff;
  box-shadow: 0 8px 22px rgba(10,92,120,.3);
}

/* ---------- 狀態標籤 ---------- */
.status-badge, .activity-type-tag, .venue-type {
  border-radius: 999px;
  letter-spacing: .02em;
}
.status-badge { animation: badge-pop .5s var(--ease) both; }
@keyframes badge-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- 篩選區 ---------- */
.search-filters {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.search-filters select,
.search-filters input {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.search-filters select:focus,
.search-filters input:focus {
  border-color: var(--brand-lit);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-lit) 18%, transparent);
  outline: none;
}

/* ---------- 字體大小控制 ---------- */
.font-size-controls button {
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  transition: transform .2s var(--ease), border-color .25s ease, color .25s ease;
}
.font-size-controls button:hover {
  transform: translateY(-2px);
  border-color: var(--brand-lit);
  color: var(--brand);
}

/* ---------- 相簿 ---------- */
.gallery-thumb {
  border-radius: 14px; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .4s ease;
}
.gallery-thumb:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.gallery-thumb img { transition: transform .8s var(--ease); }
.gallery-thumb:hover img { transform: scale(1.09); }

/* ============================================================
   開場頁（index.html）
   ============================================================ */
body.hero-page { background: var(--deep); }
body.hero-page::before { display: none; }

.hero-section { isolation: isolate; }

/* 極光層：三顆慢速漂移的模糊色球 */
.hero-aurora {
  position: absolute; inset: -20%; z-index: 0;
  filter: blur(90px); opacity: .55; pointer-events: none;
}
.hero-aurora i { position: absolute; display: block; border-radius: 50%; }
.hero-aurora i:nth-child(1) { width: 52vw; aspect-ratio: 1; left: -6%;  top: -6%;     background: rgba(20,145,155,.55); animation: drift-a 24s ease-in-out infinite; }
.hero-aurora i:nth-child(2) { width: 46vw; aspect-ratio: 1; right: -8%; top: 10%;     background: rgba(244,162,97,.45); animation: drift-b 29s ease-in-out infinite; }
.hero-aurora i:nth-child(3) { width: 58vw; aspect-ratio: 1; left: 20%;  bottom: -24%; background: rgba(10,92,120,.55);  animation: drift-c 33s ease-in-out infinite; }
@keyframes drift-a { 0%,100% { transform: none; } 50% { transform: translate(15vw, 8vh) scale(1.18); } }
@keyframes drift-b { 0%,100% { transform: none; } 50% { transform: translate(-13vw,12vh) scale(.85); } }
@keyframes drift-c { 0%,100% { transform: none; } 50% { transform: translate(8vw,-11vh) scale(1.12); } }

.hero-content { z-index: 2; }

/* logo 外圈旋轉漸層。
   圓環是 position:absolute，logo 一定也要是 positioned 且 z-index 更高，
   否則不管 DOM 順序，圓環都會蓋在 logo 上面變成一整個色盤。 */
.hero-logo {
  position: relative;
  z-index: 2;
  animation: mark-in 1.2s var(--ease) both;
  border: 5px solid rgba(255,255,255,.14);
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(.74) translateY(24px); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* 光圈組：一個容器疊在 logo 上，裡面放四層效果
   （柔光暈 → 模糊光環 → 銳利旋轉光環 → 向外擴散的脈衝圈） */
.hero-halo {
  position: absolute; z-index: 1;
  border-radius: 50%; pointer-events: none;
}
.hero-halo > span {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: block;
}

/* 1. 底層柔光暈：慢慢呼吸 */
.hero-halo .aura {
  inset: -26%;
  background: radial-gradient(circle,
              rgba(20,145,155,.55) 0%,
              rgba(244,162,97,.28) 42%,
              transparent 68%);
  filter: blur(34px);
  animation: aura-breathe 6s ease-in-out infinite;
}
@keyframes aura-breathe {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.13); opacity: 1; }
}

/* 2 & 3. 旋轉光環：一層模糊當光暈、一層銳利當邊 */
.hero-halo .ring {
  inset: -10px;
  background: conic-gradient(from 0deg,
              #14919b, #7fe3ea, #f4a261, #e76f51, #0a5c78, #14919b);
  animation: spin 9s linear infinite;
}
.hero-halo .ring.soft {
  inset: -22px;
  filter: blur(26px);
  opacity: .7;
  animation-duration: 14s;
  animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 4. 脈衝圈：從 logo 邊緣一圈圈盪開 */
.hero-halo .pulse {
  inset: -6px;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 22px rgba(127,227,234,.6);
  opacity: 0;
  animation: halo-pulse 4.5s cubic-bezier(.2,.6,.3,1) infinite;
}
.hero-halo .pulse:nth-of-type(2) { animation-delay: 1.5s; }
.hero-halo .pulse:nth-of-type(3) { animation-delay: 3s; }
@keyframes halo-pulse {
  0%   { transform: scale(1);    opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* 主標逐字揭開（只把既有文字拆成字元，內容完全不變） */
.hero-content h1 .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(4deg);
  filter: blur(9px);
  animation: ch-in .8s cubic-bezier(.16,.9,.24,1) forwards;
}
@keyframes ch-in { to { opacity: 1; transform: none; filter: none; } }

.hero-content p { animation: rise 1s var(--ease) 1.1s both; }
.hero-cta       { animation: rise 1s var(--ease) 1.35s both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 捲動提示線 */
.hero-cue {
  position: absolute; bottom: 1.8rem; left: 50%; translate: -50% 0; z-index: 2;
  width: 1px; height: 46px;
  background: linear-gradient(rgba(255,255,255,.85), transparent);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   地圖
   ============================================================ */
.map-wrap, .map-container { position: relative; }

.township-shape {
  transition: fill .35s ease, filter .35s ease, transform .45s var(--ease);
  transform-box: fill-box; transform-origin: 50% 50%;
}
.township-hit-area:hover + .township-shape,
.township-shape:hover {
  filter: drop-shadow(0 0 12px rgba(244,162,97,.75));
  transform: scale(1.03);
}

/* 圖釘落下 + 呼吸光暈 */
.map-marker {
  animation: pin-drop .6s cubic-bezier(.3,1.5,.5,1) both;
  transform-box: fill-box; transform-origin: 50% 100%;
}
@keyframes pin-drop {
  from { opacity: 0; transform: translateY(-22px) scale(.4); }
  to   { opacity: 1; transform: none; }
}
.map-marker-hit { cursor: pointer; }
.marker-tooltip { animation: tip-in .28s var(--ease) both; }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* 鄉鎮按鈕：每顆的底色是該鄉鎮在地圖上的代表色（sports-map 用 --tb-color 帶進來），
   原本就是深色底配白字，所以絕對不能套上面那組「白底卡片」樣式，
   否則會變成白字白底整排看不見。這裡只加光澤與 hover 發光，配色完全沿用。 */
.township-button {
  position: relative;
  overflow: hidden;
  animation: none; /* 進場交給 animate.js 的 .reveal，避免和 style.css 的動畫打架 */
  transition: transform .3s var(--ease), box-shadow .3s ease, filter .3s ease;
}
.township-button::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.4) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .65s var(--ease);
  pointer-events: none;
}
.township-button:hover::after { transform: translateX(130%); }
.township-button:hover,
.township-button.highlight {
  transform: translateY(-4px);
  filter: saturate(1.15) brightness(1.07);
  box-shadow: 0 12px 26px rgba(10, 92, 120, .42);
}

.map-inset {
  transition: transform .4s var(--ease), box-shadow .35s ease;
}
.map-inset:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-md); }

/* ============================================================
   表格（參與課程結果）
   ============================================================ */
.course-results-table tbody tr {
  transition: background .3s ease, transform .3s var(--ease);
}
.course-results-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-lit) 9%, transparent);
}
.table-link-button {
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .3s ease;
}
.table-link-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ============================================================
   動態總開關（右下角）
   ============================================================ */
/* 疊在「回到頂端」按鈕上方，不要蓋住它
   （style.css 的 .back-to-top 是 right/bottom 1.2rem、52px） */
#motion-toggle {
  position: fixed; right: 1.2rem; bottom: 5rem; z-index: 125;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
#motion-toggle i {
  width: 32px; height: 18px; border-radius: 999px; flex-shrink: 0;
  background: var(--brand-lit); position: relative;
  transition: background .3s ease;
}
#motion-toggle i::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transform: translateX(14px);
  transition: transform .3s cubic-bezier(.4,1.4,.5,1);
}
html[data-motion="off"] #motion-toggle i { background: var(--ink-faint); }
html[data-motion="off"] #motion-toggle i::after { transform: none; }

/* 手機版收成 44px 的圓形按鈕（維持可點的觸控尺寸），
   否則整條膠囊會壓在頁面右下角的表單欄位上擋住操作 */
@media (max-width: 640px) {
  #motion-toggle {
    right: 1.2rem; bottom: 4.8rem;
    width: 44px; height: 44px; padding: 0;
    justify-content: center;
  }
  #motion-toggle #motion-label { display: none; }
}

/* ============================================================
   關閉動態：所有動畫與轉場停止，內容維持完整可讀
   ============================================================ */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
html[data-motion="off"] #cursor-glow,
html[data-motion="off"] .hero-aurora { display: none !important; }
html[data-motion="off"] main h1::after { transform: scaleX(1); }
html[data-motion="off"] .hero-content h1 .ch { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1; transform: none; filter: none; }
  main h1::after { transform: scaleX(1); }
  .hero-content h1 .ch { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   課程效益：五大效益環狀圖
   注意 .benefit-orbit-item 是用 transform: translate(-50%,-50%) 定位的，
   任何 transform 動畫都必須把這組位移帶進去，否則球會飛走。
   手機版（<=640px）整張圖會攤平成一般清單、position 變 static，
   所以所有位移類效果都只在桌機尺寸啟用。
   ============================================================ */
@media (min-width: 641px) {
  /* 背後一圈緩慢旋轉的虛線軌道，把五顆球串起來 */
  .benefit-orbit::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--brand-lit) 34%, transparent);
    animation: orbit-spin 46s linear infinite;
    pointer-events: none;
  }
  @keyframes orbit-spin { to { transform: rotate(360deg); } }

  /* 五顆球各自輕輕浮動，錯開時間才不會整齊劃一像在抖 */
  .benefit-orbit-item {
    animation: orbit-float 5.5s ease-in-out infinite;
    transition: filter .3s ease, box-shadow .3s ease;
  }
  @keyframes orbit-float {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 9px)); }
  }
  .benefit-orbit-item:nth-of-type(2) { animation-delay: -1.1s; }
  .benefit-orbit-item:nth-of-type(3) { animation-delay: -2.2s; }
  .benefit-orbit-item:nth-of-type(4) { animation-delay: -3.3s; }
  .benefit-orbit-item:nth-of-type(5) { animation-delay: -4.4s; }
  .benefit-orbit-item:nth-of-type(6) { animation-delay: -0.6s; }

  /* hover 只改 filter 與陰影，不碰 transform —— 碰了會跟浮動動畫打架 */
  .benefit-orbit-item:hover {
    animation-play-state: paused;
    filter: brightness(1.1) saturate(1.2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3),
                0 0 0 6px color-mix(in srgb, var(--orbit-color) 28%, transparent);
  }
}

/* 中心圓：呼吸式光暈。
   只加 animation，絕對不要碰 position —— 桌機版 style.css 是
   position:absolute + top/left:50%，手機版才改回 static 把它攤平進清單。
   這裡若寫 position:relative，手機版的 static 會被蓋掉，top/left:50%
   就會重新生效，整個中心圓被推出畫面右下角。光暈用 box-shadow 做，本來就不需要定位。 */
.benefit-orbit-center {
  animation: orbit-core 4.5s ease-in-out infinite;
}
@keyframes orbit-core {
  0%, 100% { box-shadow: 0 6px 20px rgba(10, 92, 120, .35),
                         0 0 0 0 color-mix(in srgb, var(--brand-lit) 40%, transparent); }
  50%      { box-shadow: 0 10px 30px rgba(10, 92, 120, .45),
                         0 0 0 16px color-mix(in srgb, var(--brand-lit) 0%, transparent); }
}

/* 圖示輕微晃動，讓整張圖不會太安靜 */
.benefit-orbit-icon {
  display: inline-block;
  animation: orbit-icon 3.4s ease-in-out infinite;
}
@keyframes orbit-icon {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.12); }
}

html[data-motion="off"] .benefit-orbit::before { animation: none; }