/* Performance Optimizations */

/* 懶載入圖片樣式 */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* 載入狀態指示器 */
.loading-indicator {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 錯誤狀態樣式 */
.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* 改進的 i18n 載入樣式 */
.i18n-loading [data-i18n]:empty {
  min-height: 1.2em;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 4px;
}

/* 防止內容閃爍 */
[data-i18n] {
  transition: opacity 0.2s ease-in-out;
}

.i18n-loading [data-i18n] {
  opacity: 0;
}

/* 組件載入樣式 */
#aboutContainer:empty,
#featureContainer:empty,
#serviceContainer:empty,
#faqContainer:empty,
#footer:empty {
  min-height: 200px;
  background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 8px;
  margin: 20px 0;
}

@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 優化的 spinner */
#spinner .spinner-grow {
  animation-duration: 1s;
}

/* 改進的按鈕觸控區域 */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav-link {
    padding: 12px 16px !important;
  }
}

/* 預載入關鍵資源 */
.preload-image {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}