/**
 * YunTech SA - Utility Classes & Animations
 *
 * 最後修改：2026-02-12 | 修改者：kaicat
 * 建立時間：2026-02-12
 * 檔案功能：補充 Bootstrap 5 不足的工具類別、過渡動畫及特殊效果
 * 依賴：variables.css
 */

/* ==========================================
   品牌色相關 Utilities
   ========================================== */
.text-brand-primary { color: var(--sa-primary) !important; }
.text-brand-secondary { color: var(--sa-secondary) !important; }
.text-brand-accent { color: var(--sa-accent) !important; }
.bg-brand-primary { background-color: var(--sa-primary) !important; }
.bg-brand-secondary { background-color: var(--sa-secondary) !important; }
.bg-brand-accent { background-color: var(--sa-accent) !important; }
.bg-sa-dark { background-color: var(--sa-dark) !important; }
.border-brand-primary { border-color: var(--sa-primary) !important; }

/* 品牌色淡化背景 */
.bg-primary-subtle { background-color: var(--sa-primary-50) !important; }
.bg-success-subtle { background-color: #ecfdf5 !important; }
.bg-danger-subtle { background-color: #fef2f2 !important; }
.bg-warning-subtle { background-color: #fffbeb !important; }
.bg-info-subtle { background-color: #eff6ff !important; }

/* ==========================================
   陰影 Utilities
   ========================================== */
.shadow-premium { box-shadow: var(--sa-shadow-premium) !important; }
.shadow-brand { box-shadow: var(--sa-shadow-brand) !important; }
.shadow-xl { box-shadow: var(--sa-shadow-xl) !important; }

/* ==========================================
   圓角 Utilities (擴充 Bootstrap)
   ========================================== */
.rounded-xl { border-radius: var(--sa-radius-xl) !important; }
.rounded-2xl { border-radius: var(--sa-radius-2xl) !important; }

/* ==========================================
   字重 Utilities (擴充 Bootstrap)
   ========================================== */
.fw-extrabold { font-weight: var(--sa-fw-extrabold) !important; }
.fw-black { font-weight: var(--sa-fw-black) !important; }

/* ==========================================
   字距 Utilities
   ========================================== */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* ==========================================
   玻璃擬態 (Glassmorphism)
   ========================================== */
.glass-effect {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ==========================================
   覆疊 & 漸層
   ========================================== */
.overlay-dark {
  background: rgba(15, 23, 42, 0.5);
}

.gradient-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
}

.gradient-overlay-strong {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
}

/* ==========================================
   卡片懸停效果
   ========================================== */
.card-hover {
  transition: transform var(--sa-transition-base), box-shadow var(--sa-transition-base);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow-premium);
}

/* ==========================================
   圖標容器
   ========================================== */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sa-radius-lg);
  transition: all var(--sa-transition-base);
}

.icon-box-sm { width: 2rem; height: 2rem; font-size: 0.875rem; }
.icon-box-md { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.icon-box-lg { width: 3rem; height: 3rem; font-size: 1.25rem; }
.icon-box-xl { width: 4rem; height: 4rem; font-size: 1.5rem; }

/* ==========================================
   社群連結圓形按鈕
   ========================================== */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: all var(--sa-transition-base);
}

.social-link:hover {
  background: var(--sa-primary);
  color: #fff;
  transform: scale(1.1);
}

/* ==========================================
   多行截斷
   ========================================== */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ==========================================
   分隔裝飾線
   ========================================== */
.divider-brand {
  display: inline-block;
  width: 0.25rem;
  height: 2rem;
  background-color: var(--sa-primary);
  border-radius: var(--sa-radius-pill);
}

/* ==========================================
   Keyframe 動畫
   ========================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 動畫 Utility Classes */
.animate-fade-in {
  animation: fadeIn var(--sa-transition-base) ease both;
}

.animate-slide-up {
  animation: slideUp var(--sa-transition-base) ease both;
}

.animate-slide-down {
  animation: slideDown var(--sa-transition-base) ease both;
}

.animate-scale-in {
  animation: scaleIn var(--sa-transition-base) ease both;
}

/* 延遲 modifiers */
.animate-delay-1 { animation-delay: 100ms; }
.animate-delay-2 { animation-delay: 200ms; }
.animate-delay-3 { animation-delay: 300ms; }
.animate-delay-4 { animation-delay: 400ms; }

/* ==========================================
   Scrollbar 美化
   ========================================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ==========================================
   Hover 互動效果
   ========================================== */
.hover-lift {
  transition: transform var(--sa-transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--sa-transition-base);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale:active {
  transform: scale(0.95);
}

/* ==========================================
   間距擴充 (Bootstrap 不足部分)
   ========================================== */
.gap-6 { gap: 2rem !important; }
.gap-8 { gap: 3rem !important; }
.gap-10 { gap: 4rem !important; }
.mb-6 { margin-bottom: 2rem !important; }
.mb-8 { margin-bottom: 3rem !important; }
.mt-6 { margin-top: 2rem !important; }
.mt-8 { margin-top: 3rem !important; }
.py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-8 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.px-6 { padding-left: 2rem !important; padding-right: 2rem !important; }