/* ===================================
   專案管理課程投影片網站樣式表
   使用 Tailwind CSS 4.0 + 自訂樣式
   =================================== */

/* 引入思源黑體（Noto Sans TC） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* Universal Selector 重設 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

/* 投影片容器效能優化（改為按需啟用，由 JS 控制） */
#slides-container {
  /* will-change 改由 JavaScript 動態控制 */
}

/* 平滑捲動行為（如果需要） */
html {
  scroll-behavior: smooth;
}

/* 確保 body 不會有多餘的捲動 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

/* 進度指示點動畫優化 */
.dot {
  transition: all 0.3s ease;
  will-change: transform, background-color;
}

/* 為偏好減少動畫的使用者提供無障礙支援 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #slides-container {
    transition: none !important;
  }
}

/* 確保焦點環清晰可見 */
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 按鈕 disabled 狀態樣式（取代 JavaScript 內聯樣式） */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

button:disabled:hover {
  transform: none; /* 禁用時取消 hover 縮放效果 */
}

/* ===================================
   深色模式專業動畫系統
   =================================== */

/* 卡片懸浮效果 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.3);
}

/* 關鍵數字脈動 */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.pulse-number {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* 進度條填充動畫 */
@keyframes fill-progress {
  from { width: 0%; }
  to { width: var(--progress-width); }
}

.progress-bar {
  animation: fill-progress 1.5s ease-out forwards;
}

/* 圖表線條繪製動畫 */
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.chart-line {
  animation: draw-line 2s ease-out forwards;
}

/* 淡入效果（用於投影片內容） */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fade-in 0.5s ease-out forwards;
}

/* 標題發光效果 */
.text-glow-blue {
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
}

.text-glow-green {
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 0 0 40px rgba(34, 197, 94, 0.3);
}

.text-glow-purple {
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.5), 0 0 40px rgba(168, 85, 247, 0.3);
}

.text-glow-orange {
  text-shadow: 0 0 20px rgba(249, 115, 22, 0.5), 0 0 40px rgba(249, 115, 22, 0.3);
}

.text-glow-red {
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 0 40px rgba(239, 68, 68, 0.3);
}

/* 投影片內容可選取（方便複製） */
.slide {
  user-select: text;
}

/* 自訂捲動條樣式（選配） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 列印友善樣式（選配） */
@media print {
  body {
    overflow: visible;
  }

  #slides-container {
    display: block !important;
    transform: none !important;
  }

  .slide {
    page-break-after: always;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* 隱藏導航元件 */
  #prev-btn,
  #next-btn,
  #dots-container,
  #slide-counter {
    display: none !important;
  }
}