/* =============================================================
   首頁 V5 —「旅程儀表 Dashboard Journey」
   全頁左緣旅程進度線 · 儀表卡 · Three.js 點陣地球（深）
   · 宣言逐字顯影 · 登機票券 CTA · 終點站 footer
   ============================================================= */

body.home-v5 { background: #f5f6f8; }

/* ---------- 全頁旅程線（桌機） ---------- */
.jr-rail {
  position: fixed; left: 26px; top: 0; bottom: 0; z-index: 90;
  width: 2px; background: rgba(16, 22, 30, .1);
  pointer-events: none;
}
.jr-rail .fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ent), var(--ckpt), var(--safe));
  transform: scaleY(var(--p, 0)); transform-origin: top;
}
.jr-rail .stop {
  position: absolute; left: 50%; translate: -50% -50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: #cdd4dc; border: 2px solid #f5f6f8;
  transition: background .4s, box-shadow .4s;
}
.jr-rail .stop.on { background: rgb(var(--j-rgb, var(--ckpt-rgb))); box-shadow: 0 0 0 5px rgba(var(--j-rgb, var(--ckpt-rgb)), .18); }
.jr-rail .stop i {
  position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: .2em;
  color: rgba(16, 22, 30, .45); white-space: nowrap;
  opacity: 0; transition: opacity .4s;
}
.jr-rail .stop.on i { opacity: 1; }
/* 深色區間僅反白軌道本身；圓點與標籤維持亮色版外觀 */
body.jr-dark .jr-rail { background: rgba(255, 255, 255, .14); }
body.jr-dark .jr-rail .stop i { color: rgba(226, 236, 248, .8); }
@media (max-width: 1200px) { .jr-rail { display: none; } }

/* ---------- 02 儀表卡（亮） ---------- */
.gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(44px, 7vh, 72px); }
.gcard {
  --g-rgb: var(--ckpt-rgb);
  border-radius: 20px; overflow: hidden;
  background: #fff; border: 1px solid rgba(16, 22, 30, .08);
  box-shadow: 0 16px 44px rgba(16, 22, 30, .08);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.gcard:hover { transform: translateY(-6px); box-shadow: 0 30px 66px rgba(16, 22, 30, .14); }
.gcard .viz {
  position: relative; aspect-ratio: 16 / 10;
  background: #0d1218;
  display: grid; place-items: center;
  overflow: hidden;
}
.gcard .gc-body { padding: 16px 18px 20px; }
.gcard h4 { margin: 0; font-size: 16.5px; font-weight: 800; color: #10161e; display: flex; gap: 9px; align-items: center; }
.gcard h4 i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--g-rgb)); }
.gcard p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: rgba(16, 22, 30, .56); }

/* 儀表 1：雷達 sweep */
.viz-radar { width: 78%; aspect-ratio: 1; position: relative; }
.viz-radar .ring { position: absolute; inset: 0; border: 1px solid rgba(56, 189, 248, .3); border-radius: 50%; }
.viz-radar .ring:nth-child(2) { inset: 22%; }
.viz-radar .ring:nth-child(3) { inset: 42%; }
.viz-radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(56, 189, 248, .5), transparent 24%);
  animation: v5-sweep 3.2s linear infinite;
}
@keyframes v5-sweep { to { transform: rotate(360deg); } }
.viz-radar .blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ckpt); animation: lc-twinkle 3.2s ease-in-out infinite; }

/* 儀表 2：終端打字機 */
.viz-term { width: 84%; font-family: var(--font-mono); font-size: 10.5px; line-height: 2; color: rgba(240, 111, 167, .9); }
.viz-term .ln { overflow: hidden; white-space: nowrap; width: 0; animation: v5-type 5.6s steps(28) infinite; }
.viz-term .ln:nth-child(2) { animation-delay: 1.2s; color: rgba(230, 240, 250, .75); }
.viz-term .ln:nth-child(3) { animation-delay: 2.4s; color: rgba(52, 211, 153, .9); }
.viz-term .ln:nth-child(4) { animation-delay: 3.6s; color: rgba(230, 240, 250, .55); }
@keyframes v5-type {
  0% { width: 0; } 40% { width: 100%; } 85% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; }
}

/* 儀表 3：示波器 */
.viz-scope { width: 88%; }
.viz-scope svg { width: 100%; display: block; }
.viz-scope .wave {
  fill: none; stroke: var(--safe); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 8 6;
  animation: lc-bflow 1.1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, .5));
}
.viz-scope .grid-ln { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }

/* 儀表 4：齒輪 */
.viz-gears { position: relative; width: 70%; aspect-ratio: 16 / 10; }
.viz-gears svg { position: absolute; }
.viz-gears .g1 { width: 54%; left: 6%; top: 12%; animation: v5-rot 9s linear infinite; }
.viz-gears .g2 { width: 38%; right: 8%; bottom: 8%; animation: v5-rot 6.4s linear infinite reverse; }
@keyframes v5-rot { to { transform: rotate(360deg); } }
.viz-gears path { fill: none; stroke: rgba(139, 200, 245, .85); stroke-width: 2; }
@media (max-width: 900px) { .gauge-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .gauge-grid { grid-template-columns: 1fr; } }

/* ---------- 03 Three.js 點陣地球（深） ---------- */
.globe3d-sec {
  position: relative; background: #070b12; overflow: hidden;
}
/* 星空 */
.globe3d-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.4px 1.4px at 12% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 55% 15%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 60%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.45), transparent 60%);
}
.globe3d-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: .9fr 1.1fr; align-items: center;
  gap: clamp(20px, 3vw, 56px);
  max-width: 1500px; margin-inline: auto;
}
.globe3d-sec .sec-h { color: #eef3fa; }
.globe3d-sec .sec-no { color: rgba(226, 236, 248, .4); }
.globe3d-sec .sec-no::after { background: rgba(255, 255, 255, .12); }
.globe3d-sec .sec-sub { color: rgba(216, 228, 244, .58); }
.globe3d-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 34px; }
.globe3d-stat .gs { border-left: 2px solid rgba(var(--s-rgb, var(--ckpt-rgb)), .7); padding-left: 14px; }
.globe3d-stat .gs b { display: block; font-size: 24px; font-weight: 900; color: #eef3fa; }
.globe3d-stat .gs span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: rgba(216, 228, 244, .45); text-transform: uppercase; }
.globe3d-wrap { position: relative; aspect-ratio: 1; max-height: 72svh; justify-self: center; width: min(100%, 640px); cursor: grab; }
.globe3d-wrap:active { cursor: grabbing; }
.globe3d-wrap canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 900px) {
  .globe3d-grid { grid-template-columns: 1fr; }
  .globe3d-wrap { width: min(100%, 420px); }
}

/* 深色區客戶帶 */
.globe3d-sec .clients-belt { border-color: rgba(255, 255, 255, .08); background: transparent; margin-top: clamp(40px, 6vh, 70px); }
.globe3d-sec .clients-track img { background: #fff; padding: 9px 15px; border-radius: 11px; height: 52px; object-fit: contain; filter: none; opacity: .88; }
.globe3d-sec .clients-track img:hover { opacity: 1; }

/* ---------- 04 宣言逐字顯影（亮） ---------- */
.manifesto {
  max-width: 1000px; margin-inline: auto;
  font-size: clamp(24px, 3.4vw, 46px); font-weight: 800; line-height: 1.6; letter-spacing: .01em;
}
.manifesto span { color: rgba(16, 22, 30, .14); transition: color .18s linear; }
.manifesto span.lit { color: #10161e; }
.manifesto span.lit.hl-ent { color: var(--ent); }
.manifesto span.lit.hl-ckpt { color: var(--ckpt); }
.manifesto span.lit.hl-safe { color: var(--safe); }

/* ---------- CTA 登機票券（深） ---------- */
.ticket-sec { background: #0b0f15; }
.ticket-sec .sec-h { color: #eef3fa; }
.ticket-sec .sec-no { color: rgba(226, 236, 248, .4); }
.ticket-sec .sec-no::after { background: rgba(255, 255, 255, .12); }
.ticket {
  position: relative;
  max-width: 860px; margin: clamp(40px, 6vh, 64px) auto 0;
  display: grid; grid-template-columns: 1fr auto;
  border-radius: 22px;
  background: #f5f6f8;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  transition: transform .6s var(--ease-out);
}
.ticket:hover { transform: rotate(-1.2deg) translateY(-4px); }
/* 撕票孔 */
.ticket::before, .ticket::after {
  content: ""; position: absolute; right: 218px; width: 26px; height: 13px;
  background: #0b0f15; z-index: 2;
}
.ticket::before { top: 0; border-radius: 0 0 13px 13px; }
.ticket::after { bottom: 0; border-radius: 13px 13px 0 0; }
.ticket .t-main { padding: clamp(24px, 3.5vw, 44px); }
.ticket .t-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: rgba(16, 22, 30, .45); text-transform: uppercase; }
.ticket h3 { margin: 12px 0 0; font-size: clamp(22px, 2.6vw, 36px); font-weight: 900; color: #10161e; }
.ticket .t-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: rgba(16, 22, 30, .55); }
.ticket .t-row b { display: block; font-size: 14px; color: #10161e; letter-spacing: .04em; }
.ticket .t-stub {
  width: 230px;
  border-left: 2px dashed rgba(16, 22, 30, .25);
  display: grid; place-items: center; padding: 26px;
}
@media (max-width: 700px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket::before, .ticket::after { display: none; }
  .ticket .t-stub { width: auto; border-left: 0; border-top: 2px dashed rgba(16, 22, 30, .25); }
}

/* ---------- Footer 終點站（深） ---------- */
.home-v5 .site-footer { background: #0b0f15; border-top: 0; position: relative; }
.term-line {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: clamp(26px, 4vh, 44px) 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .3em;
  color: rgba(216, 228, 244, .45); text-transform: uppercase;
}
.term-line .pulse { position: relative; width: 12px; height: 12px; }
.term-line .pulse::before, .term-line .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ent), var(--ckpt), var(--safe), var(--ent));
}
.term-line .pulse::after { animation: fly-pulse 2s ease-out infinite; }
.home-v5 .footer-brand img { filter: brightness(0) invert(1); }
.home-v5 .footer-brand p { color: rgba(216, 228, 244, .5); }
.home-v5 .footer-col h4 { color: rgba(216, 228, 244, .4); }
.home-v5 .footer-col a { color: rgba(216, 228, 244, .62); }
.home-v5 .footer-col a:hover { color: #fff; }
.home-v5 .footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: rgba(216, 228, 244, .4); }

/* ══ 地球機場代號標籤(2026-07-20) ══ */
.globe-tag {
  position: absolute; z-index: 3;
  transform: translate(-50%, -170%);
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  text-shadow: 0 0 8px rgba(4, 8, 13, .9), 0 1px 2px rgba(4, 8, 13, .8);
  pointer-events: none; user-select: none;
  opacity: 0; transition: opacity .25s linear;
}
.globe-tag.hub { font-size: 12px; letter-spacing: .26em; }