/* app.css — 補充樣式（非 Tailwind 編譯產物，可手動微調）。
   主題色變數由 PHP 從 config/theme.json 注入，這裡只放動畫等補強。 */

html { scroll-behavior: smooth; }

/* Hero 輪播淡入 */
.hero-slide { opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; }

/* 卡片 hover 微浮起 */
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(10,31,61,.12); }

/* 進場淡入（由 main.js 觸發） */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Hero 右側裝飾元素：整體上下浮動 */
.th-hero-art { animation: heroFloat 6s ease-in-out infinite; will-change: transform; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { .th-hero-art { animation: none; } }

/* ============================================================
   導覽列依背後區塊深淺自動變色（.nav-dark 由 main.js 切換）
   ============================================================ */
[data-header] { transition: background-color .3s ease, border-color .3s ease; }
[data-header].nav-dark {
  background-color: rgba(6, 21, 48, .95) !important;   /* 深藍（不透明度高，避免頂端透出白底變淺）*/
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}
[data-header].nav-dark .th-brand-zh { color: #fff !important; }
[data-header].nav-dark .th-brand-en { color: rgba(255, 255, 255, .6) !important; }
[data-header].nav-dark .th-navlink { color: #fff !important; }
[data-header].nav-dark .th-navlink:hover { color: #86A6EB !important; }
[data-header].nav-dark .th-navlink.is-active { color: #86A6EB !important; }
[data-header].nav-dark .th-en { color: rgba(255, 255, 255, .55) !important; }
[data-header].nav-dark .th-underline { background-color: #86A6EB !important; }
[data-header].nav-dark .th-toggle { color: #fff !important; }

/* ============================================================
   應用場景 — 環狀 hub + 衛星節點（滑入觸發動畫）
   ============================================================ */
.orbit-section { position: relative; overflow: hidden; }

/* 背景巨型淡字 */
.orbit-ghost {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-weight: 800; letter-spacing: .12em;
  font-size: clamp(46px, 12vw, 150px); line-height: 1;
  color: var(--ink); opacity: .045; white-space: nowrap;
  pointer-events: none; user-select: none;
}

.orbit-stage { position: relative; width: 100%; max-width: 860px; margin: 0 auto; aspect-ratio: 1 / 1; }

/* 軌道虛線環 */
.orbit-rings { position: absolute; inset: 0; pointer-events: none; }
.orbit-rings .ring { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 9; transform-origin: 50% 50%; }
.orbit-rings .ring-2 { stroke: var(--blue); opacity: .35; stroke-dasharray: 1 12; }
.orbit-rings .ring-spin { animation: orbit-spin 70s linear infinite; transform-origin: 50% 50%; }
.orbit-rings .ring-spin-rev { animation: orbit-spin 90s linear infinite reverse; transform-origin: 50% 50%; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* 中央 hub */
.orbit-hub {
  position: absolute; left: 50%; top: 50%; width: 47%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.84); opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  border-radius: 9999px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 9%;
  background: radial-gradient(circle at 32% 26%, var(--ink-soft) 0%, var(--ink) 52%, var(--ink-deep) 100%);
  color: #fff; box-shadow: 0 26px 64px rgba(10,31,61,.38);
}
.orbit-hub::after {
  content: ""; position: absolute; inset: 9px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;   /* 裝飾層不擋滑鼠，讓底下按鈕能被 hover/點擊 */
}
.orbit.is-visible .orbit-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 衛星節點 */
.orbit-node {
  position: absolute; width: 124px;
  transform: translate(-50%, -50%) scale(.4); opacity: 0;
  transition: opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * .09s);
}
.orbit.is-visible .orbit-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.orbit-node-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 124px; height: 124px; border-radius: 9999px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(10,31,61,.10);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.orbit-node:hover .orbit-node-inner { transform: translateY(-5px); border-color: var(--blue); box-shadow: 0 16px 38px rgba(37,99,235,.22); }
.orbit-node .icon { color: var(--blue); }
.orbit-node .name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; padding: 0 10px; }
.orbit-node .no { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; color: var(--muted); }

/* 手機版：環狀改為置中網格（hub 在最上、節點自動換行） */
@media (max-width: 1023px) {
  .orbit-stage { aspect-ratio: auto; max-width: 560px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .orbit-rings { display: none; }
  .orbit-hub {
    position: static !important; transform: none !important; opacity: 1 !important; order: -1;
    width: 100%; max-width: 300px; aspect-ratio: 1 / 1; margin: 0 auto 8px;
  }
  .orbit-node {
    position: static !important; transform: none !important; opacity: 1 !important;
    width: auto; transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-rings .ring-spin, .orbit-rings .ring-spin-rev { animation: none; }
  .orbit-hub, .orbit-node { transition: none; opacity: 1; }
  .orbit-hub { transform: translate(-50%, -50%); }
}