/* 來源:AboutSeeder content 內嵌 <style>,兩者需保持一致 */
/* 內文字距放寬 */
main { letter-spacing: 0.05em; }

/* 漸層文字與卡片邊框 */
.color-text-gradient-1 {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.color-text-gradient-2 {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.color-text-gradient-3 {
  background: linear-gradient(135deg, #C5A059, #b45309);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* 微調卡片互動 */
.dept-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dept-card:hover {
  transform: translateY(-8px);
}

/* 圖示容器懸停效果 */
.svg-icon-container {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 三大部門圖示的 hover 動畫(圖示由 .stamp-ring::before 插入,見下方) */
@keyframes compass-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
}
@keyframes doc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes plane-fly {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4px, -4px) scale(1.05); }
}
.journey-stop:nth-child(1):hover .stamp-ring::before { animation: compass-wiggle 1.5s ease-in-out infinite; }
.journey-stop:nth-child(2):hover .stamp-ring::before { animation: doc-float 2s ease-in-out infinite; }
.journey-stop:nth-child(3):hover .stamp-ring::before { animation: plane-fly 2s ease-in-out infinite; }

/* 歷史脊樑 Spine Line (預設 100% 呈現) */
.legacy-spine-line {
  transform: scaleY(1) !important;
  transform-origin: top center;
}


/* ===== 一條龍服務:護照印章節點 + 飛行航線 ===== */
/* 桌機走水平航線、手機走垂直航線。原本靠 Tailwind 的 hidden/md:block 切換,
   但 Tailwind 是 Play CDN,沒正常運作時兩條航線會同時出現(桌機就會看到那架朝下的垂直飛機)。
   改用 media query 直接控制,與 Tailwind 的 md 斷點 768px 一致。 */
@media (min-width: 768px) {
  .journey-route { display: block !important; }
  .journey-route-v { display: none !important; }
}
@media (max-width: 767px) {
  .journey-route { display: none !important; }
  .journey-route-v { display: block !important; }
}
.journey-route { position: absolute; top: 56px; left: 16.666%; right: 16.666%; height: 2px; z-index: 0; }
.journey-line { position: absolute; inset: 0; background: repeating-linear-gradient(to right, #C5A059 0 7px, transparent 7px 15px); transform: scaleX(1) !important; transform-origin: left center; }
.journey-plane { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; color: #b45309; opacity: 1; font-size: 0; line-height: 26px; text-align: center; animation: fly-route 3.5s cubic-bezier(0.5,0,0.5,1) 0.5s infinite; }
@keyframes fly-route { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.journey-route-v { position: absolute; top: 56px; bottom: 56px; left: 50%; width: 2px; transform: translateX(-50%); z-index: 0; }
.journey-line-v { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, #C5A059 0 7px, transparent 7px 15px); transform: scaleY(1) !important; transform-origin: top center; }
.journey-plane-v { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; color: #b45309; opacity: 1; font-size: 0; line-height: 24px; text-align: center; transform: rotate(90deg); animation: fly-route-v 3.5s cubic-bezier(0.5,0,0.5,1) 0.5s infinite; }
@keyframes fly-route-v { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.journey-stop { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stamp { position: relative; width: 112px; height: 112px; margin-bottom: 22px; }
.stamp-ring { width: 100%; height: 100%; border-radius: 9999px; border: 2px solid #C5A059; background: #fff; color: #b45309; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(197,160,89,.18); transform: rotate(-6deg); transition: transform .5s cubic-bezier(0.16,1,0.3,1), background .5s, color .5s, box-shadow .5s; }
.stamp-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 9999px; border: 1px dashed rgba(197,160,89,.55); pointer-events: none; }
/* 圖示一律由 CSS 插入:這段 content 存在資料庫,只要有人從後台儲存「關於我們」,
   富文本編輯器就會清掉內嵌的 inline SVG 與 i 標籤並留下 &nbsp;。放在 CSS 才動不到。
   font-size:0 讓編輯器殘留的 &nbsp; 不佔寬度,圖示尺寸由 ::before 自己給。 */
.stamp-ring { font-size: 0; }
.stamp-ring::before,
.journey-plane::before,
.journey-plane-v::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }
.stamp-ring::before { font-size: 40px; }
.journey-stop:nth-child(1) .stamp-ring::before { content: "\f14e"; }
.journey-stop:nth-child(2) .stamp-ring::before { content: "\e5a0"; }
.journey-stop:nth-child(3) .stamp-ring::before { content: "\f072"; }
.journey-plane::before { content: "\f072"; font-size: 22px; }
.journey-plane-v::before { content: "\f072"; font-size: 20px; }
.journey-stop:hover .stamp-ring { transform: rotate(0) scale(1.06); background: linear-gradient(135deg, #C5A059, #b45309); color: #fff; box-shadow: 0 18px 38px rgba(197,160,89,.42); }

@keyframes svc-orbit { to { transform: rotate(360deg); } }
@keyframes svc-orbit-rev { to { transform: rotate(-360deg); } }
#about-services .svc-orbit { position: relative; width: 300px; height: 300px; margin: 0 auto; --r: 110px; --flag: 54px; --dur: 30s; }
@media (min-width: 768px) { #about-services .svc-orbit { width: 460px; height: 460px; --r: 185px; --flag: 74px; } }
#about-services .svc-path { position: absolute; inset: 0; border-radius: 9999px; border: 1px dashed rgba(0,43,91,.16); }
#about-services .svc-path::after { content: ""; position: absolute; inset: 15%; border-radius: 9999px; border: 1px dashed rgba(197,160,89,.28); }
#about-services .svc-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 112px; height: 112px; border-radius: 9999px; background: radial-gradient(circle at 32% 26%, #0a4d92, #002b5b 72%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 18px 44px rgba(0,43,91,.4); z-index: 2; }
@media (min-width: 768px) { #about-services .svc-hub { width: 150px; height: 150px; } }
#about-services .svc-hub b { font-size: 30px; line-height: 1; font-weight: 700; }
@media (min-width: 768px) { #about-services .svc-hub b { font-size: 40px; } }
#about-services .svc-hub span { font-size: 11px; letter-spacing: .2em; margin-top: 6px; opacity: .85; }
#about-services .svc-ring { position: absolute; inset: 0; animation: svc-orbit var(--dur) linear infinite; z-index: 1; }
#about-services .svc-item { position: absolute; top: 50%; left: 50%; width: var(--flag); height: var(--flag); margin: calc(var(--flag) / -2); transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
#about-services .svc-flag { position: relative; width: 100%; height: 100%; animation: svc-orbit-rev var(--dur) linear infinite; }
#about-services .svc-fimg { width: 100%; height: 100%; border-radius: 9999px; overflow: hidden; background: #fff; border: 2px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; transition: transform .3s, box-shadow .3s, border-color .3s; }
#about-services .svc-fimg img { width: 100%; height: 100%; object-fit: cover; }
#about-services .svc-flag:hover .svc-fimg { transform: scale(1.14); border-color: #C5A059; box-shadow: 0 10px 26px rgba(197,160,89,.55); }
#about-services .svc-name { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: #002b5b; white-space: nowrap; pointer-events: none; }
#about-services .svc-orbit:hover .svc-ring, #about-services .svc-orbit:hover .svc-flag { animation-play-state: paused; }