/* ==========================================================================
   臺鐵軌道資產的華麗轉身 - 主樣式表
   ========================================================================== */

/* 臺鐵軌道資產 CSS Variables */
:root {
  /* 主色調 - 台鐵深藍 */
  --primary-blue: #003D79;
  --primary-blue-light: #0052A3;
  --primary-blue-dark: #002850;

  /* 輔助色 - 金色（強調用） */
  --accent-gold: #D4AF37;
  --accent-gold-light: #E6C966;
  --accent-gold-dark: #B8962E;

  /* 點綴色 - 橘色（次要強調） */
  --accent-orange: #E87A3E;
  --accent-orange-light: #F09860;
  --accent-orange-dark: #D06830;

  /* 中性色 - 黑白灰 */
  --background-light: #F8F8F8;
  --background-white: #FFFFFF;
  --background-dark: #1a1a1a;
  --background-black: #000000;
  --grid-line: #E5E5E5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #999999;

  /* 功能色 */
  --success-green: #4CAF50;
  --info-blue: #2196F3;
  --warning-orange: #FF9800;
}

html {
  scroll-padding-top: 5rem;
  overflow-x: hidden;
}

/* 全站焦點指示器 */
:focus-visible {
  outline: 3px solid var(--primary-blue);
  outline-offset: 2px;
}

/* 深色背景上的焦點指示器 */
.bg-tra-navy :focus-visible,
.bg-slate-900 :focus-visible {
  outline-color: var(--accent-gold);
}

body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
}


/* ========================================
   工程藍圖背景系統 - 混合策略
   ======================================== */

/* 方案 A：經典工程藍圖（大格 100px + 細分 20px）*/
.blueprint-engineering {
  background-image:
    /* 主格線 - 粗、明顯 */
    linear-gradient(rgba(0, 61, 121, 0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 61, 121, 0.1) 2px, transparent 2px),
    /* 次格線 - 細、淡 */
    linear-gradient(rgba(0, 61, 121, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 61, 121, 0.03) 1px, transparent 1px);
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px;
}

/* 方案 B：鐵軌意象背景 */
.blueprint-railway {
  position: relative;
}
.blueprint-railway::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* 枕木 - 橫向線 */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 56px,
      rgba(212, 175, 55, 0.08) 56px,
      rgba(212, 175, 55, 0.08) 60px
    ),
    /* 左軌道 */
    linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(50% - 100px),
      rgba(212, 175, 55, 0.15) calc(50% - 100px),
      rgba(212, 175, 55, 0.15) calc(50% - 96px),
      transparent calc(50% - 96px)
    ),
    /* 右軌道 */
    linear-gradient(
      90deg,
      transparent calc(50% + 96px),
      rgba(212, 175, 55, 0.15) calc(50% + 96px),
      rgba(212, 175, 55, 0.15) calc(50% + 100px),
      transparent calc(50% + 100px),
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}
.blueprint-railway > * {
  position: relative;
  z-index: 1;
}

/* 方案 C：技術點陣背景 */
.blueprint-dots {
  background-image: radial-gradient(
    circle,
    rgba(0, 61, 121, 0.12) 1.5px,
    transparent 1.5px
  );
  background-size: 40px 40px;
}

.blueprint-dots-subtle {
  background-image: radial-gradient(
    circle,
    rgba(0, 61, 121, 0.06) 1px,
    transparent 1px
  );
  background-size: 48px 48px;
}

.blueprint-dots-dark {
  background-image: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.15) 1.5px,
    transparent 1.5px
  );
  background-size: 40px 40px;
}

/* 方案 D：透視軌道背景 */
.blueprint-perspective {
  position: relative;
}
.blueprint-perspective::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* 左側透視線 */
    linear-gradient(
      172deg,
      transparent 42%,
      rgba(212, 175, 55, 0.12) 42%,
      rgba(212, 175, 55, 0.12) 42.5%,
      transparent 42.5%
    ),
    /* 右側透視線 */
    linear-gradient(
      188deg,
      transparent 42%,
      rgba(212, 175, 55, 0.12) 42%,
      rgba(212, 175, 55, 0.12) 42.5%,
      transparent 42.5%
    ),
    /* 水平枕木線 */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 100px,
      rgba(212, 175, 55, 0.06) 100px,
      rgba(212, 175, 55, 0.06) 104px
    );
  pointer-events: none;
  z-index: 0;
}
.blueprint-perspective > * {
  position: relative;
  z-index: 1;
}

/* 保留舊 class 作為 fallback */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(0, 61, 121, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 61, 121, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

.blueprint-grid-dark {
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Scroll animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Counter - 使用 tabular-nums 確保數字對齊，避免位移 */
.counter {
  font-variant-numeric: tabular-nums;
  font-family: 'Roboto Mono', 'Roboto', monospace;
  letter-spacing: -0.02em;
  display: inline-block;
  min-width: 1ch;
}

/* Card flip */
.pillar-card { perspective: 1000px; }
.pillar-card-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.pillar-card.flipped .pillar-card-inner { transform: rotateY(180deg); }
.pillar-front, .pillar-back { backface-visibility: hidden; }
.pillar-back { transform: rotateY(180deg); }

/* Navbar scroll */
.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 61, 121, 0.1);
}

/* FAQ 展開收合動畫 */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.faq-content > div {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.faq-content.expanded {
  grid-template-rows: 1fr;
}
.faq-content.expanded > div {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.1s;
}

/* Section divider - 金色漸層分隔線 */
.section-divider {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* Scroll Progress Indicator - 滾動進度指示器 */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
  z-index: 100;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* 電車軌道進度條 - 站點樣式（垂直版） */
/* Hero 輪播圓點 - 擴大觸控區域至 24px */
.hero-dot {
  position: relative;
}
.hero-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 40px;
  min-height: 24px;
}

.train-station {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  min-height: 24px;
  padding: 6px 0;
}
.station-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #cbd5e1;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}
.train-station:hover .station-dot,
.train-station.visited .station-dot {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}
.train-station.active .station-dot {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  box-shadow: 0 0 10px rgba(0, 61, 121, 0.5);
  transform: scale(1.3);
}
.station-label {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.train-station:hover .station-label {
  opacity: 1;
  color: var(--accent-gold);
}
.train-station.active .station-label {
  opacity: 1;
  color: var(--primary-blue);
  font-weight: 600;
}
.train-station.visited .station-label {
  color: var(--accent-gold);
}

/* 火車進場動畫 - 從畫面外左側滑入 */
@keyframes trainEnter {
  0% { transform: translateX(-120%); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translateX(3%); }
  85% { transform: translateX(-1%); }
  100% { transform: translateX(0); opacity: 1; }
}

/* 火車懸浮微動效果 */
@keyframes trainFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(0.3deg); }
  75% { transform: translateY(4px) rotate(-0.2deg); }
}

/* 火車光暈脈動 */
@keyframes trainGlow {
  0%, 100% { filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.4)); }
  50% { filter: drop-shadow(0 0 60px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }
}

.train-animate {
  animation: trainEnter 1.2s ease-out forwards;
}

/* Hero 火車組合動畫 */
.hero-train {
  animation:
    trainEnter 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    trainFloat 8s ease-in-out 2.8s infinite;
  filter: drop-shadow(0 0 80px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 30px rgba(212, 175, 55, 0.4));
  transform-origin: center center;
}

/* SVG 線條繪製效果 */
@keyframes strokeDraw {
  to { stroke-dashoffset: 0; }
}

.hero-train svg path,
.hero-train svg line,
.hero-train svg polyline,
.hero-train svg polygon,
.hero-train svg circle,
.hero-train svg ellipse,
.hero-train svg rect {
  animation: strokeDraw 1.5s ease-out forwards;
}

/* 手機版縮放調整 */
@media (max-width: 1024px) {
  .hero-train {
    animation:
      trainEnter 2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
      trainFloat 8s ease-in-out 2.3s infinite;
  }
}

/* 滾動提示動畫 */
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-hint-animate {
  animation: scrollHint 2s ease-in-out infinite;
}

/* Tab active 狀態 */
.tab-btn.active {
  background-color: var(--primary-blue);
  color: white;
}

/* 圓餅圖動畫 */
@keyframes drawPie {
  from { stroke-dashoffset: 942; }
  to { stroke-dashoffset: 0; }
}

.pie-animate {
  animation: drawPie 1.5s ease-in-out forwards;
}

/* 數據卡片 hover 效果 */
.data-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.data-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 61, 121, 0.15);
}

/* 圖片 Placeholder 樣式 */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 3px dashed var(--primary-blue);
  position: relative;
  overflow: hidden;
}

.image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(0, 61, 121, 0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 61, 121, 0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 61, 121, 0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 61, 121, 0.03) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.image-placeholder-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: var(--accent-gold);
}

.image-placeholder-dark::before {
  background-image:
    linear-gradient(45deg, rgba(212, 175, 55, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(212, 175, 55, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(212, 175, 55, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(212, 175, 55, 0.05) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.image-placeholder-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem;
}

.image-placeholder-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  opacity: 0.6;
}

.image-placeholder-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.image-placeholder-dark .image-placeholder-title {
  color: var(--accent-gold);
}

.image-placeholder-desc {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 280px;
}

.image-placeholder-dark .image-placeholder-desc {
  color: #94a3b8;
}

.image-placeholder-size {
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 0.5rem;
  font-family: 'Roboto Mono', monospace;
}

.image-placeholder-dark .image-placeholder-size {
  color: #64748b;
}

/* ========================================
   微互動效果 2: Tax 護盾堆疊滑入
   ======================================== */
.shield-enter {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.shield-enter.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   微互動效果 3: Debt 卡片 hover 傾斜 + peek
   ======================================== */
.debt-asset-card {
  perspective: 600px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.debt-asset-card:hover,
.debt-asset-card:focus-within {
  transform: rotateX(-2deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.debt-asset-peek {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
}
.debt-asset-card:hover .debt-asset-peek,
.debt-asset-card:focus-within .debt-asset-peek {
  max-height: 60px;
  opacity: 1;
  margin-top: 8px;
}

/* ========================================
   微互動效果 4: Empower 進度條填充
   ======================================== */
.stat-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gold);
  border-radius: 2px;
  transition: width 1.2s ease-out;
}
.stat-bar-fill.revealed {
  width: var(--fill);
}

/* ========================================
   微互動效果 5: FAQ-Footer 過渡帶
   ======================================== */
.faq-footer-transition {
  height: 80px;
  background: linear-gradient(165deg, #ffffff 40%, #0f172a 40.5%);
  position: relative;
}
.faq-footer-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, transparent 39.5%, rgba(212, 175, 55, 0.6) 40%, rgba(212, 175, 55, 0.6) 40.5%, transparent 41%);
  pointer-events: none;
}

/* 微互動 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shield-enter {
    opacity: 1 !important;
    transform: none !important;
  }
  .stat-bar-fill {
    width: var(--fill) !important;
  }
  .debt-asset-card {
    transition: none !important;
  }
}

/* ========================================
   Lightbox Card Hover
   ======================================== */
[data-lightbox-src] img {
  transition: transform 0.4s ease, filter 0.4s ease;
}
[data-lightbox-src]:hover img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* ========================================
   Lightbox
   ======================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.active {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 85vh;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.lightbox.active .lightbox-img {
  transform: scale(1);
}
.lightbox-caption {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 1rem;
  text-align: center;
}
.lightbox-counter {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.7;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
}
.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2.5rem;
  line-height: 1;
}
.lightbox-close:hover {
  transform: scale(1.1);
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%);
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

@media (max-width: 768px) {
  .lightbox-prev,
  .lightbox-next {
    font-size: 1.75rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .lightbox-prev { left: 0.75rem; }
  .lightbox-next { right: 0.75rem; }
  .lightbox-close { top: 1rem; right: 1rem; font-size: 2rem; }
}