/**
 * 全頁面背景效果 - Full Page Background Effects
 * 為整個應用程式提供統一的背景圖片和景深效果
 * 支援多主題動態切換和響應式設計
 */

/* ===== 全頁面背景容器 ===== */
.full-page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  /* 背景圖片設定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  /* 景深效果 */
  filter: blur(1px) brightness(0.7);
  
  /* 輕微放大避免邊緣露白 */
  transform: scale(1.05);
  
  /* 平滑過渡效果 */
  transition: all 0.5s ease-in-out;
  
  /* 性能優化 */
  will-change: filter, transform;
  contain: layout style paint;
}

/* ===== 漸層遮罩層 ===== */
.full-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  
  /* 漸層遮罩增強可讀性 */
  background: linear-gradient(
    180deg, 
    rgba(0,0,0,0.3) 0%, 
    rgba(0,0,0,0.1) 50%, 
    rgba(0,0,0,0.4) 100%
  );
  
  /* 性能優化 */
  contain: layout style paint;
}

/* ===== Banner毛玻璃效果 ===== */
.banner-glassmorphism {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari 支援 */

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* 平滑過渡 */
  transition: all 0.3s ease;
}

.banner-glassmorphism:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== 清晰內容區域 ===== */
.clear-content-container {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* 平滑過渡 */
  transition: all 0.3s ease;
}

.clear-content-container:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ===== Banner 與毛玻璃過渡邊緣效果 ===== */
.banner-glass-transition {
  position: relative;
  overflow: visible;
}

.banner-glass-transition::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  
  /* 玻璃邊緣效果 - 從清晰到模糊的過渡 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%
  );
  
  /* 銳利的玻璃邊緣 */
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 邊緣光澤效果 */
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  
  /* 微弱的模糊效果，營造過渡感 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  
  z-index: 5;
}

/* Banner 容器應用過渡效果 */
.unified-banner-container {
  position: relative;
}

/* 霧面黑灰漸層邊緣效果 - 仿圖片中的設計 */
.unified-banner-container::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  
  /* ========== 霧面邊緣調整區域 ========== */
  height: 12px; /* 霧面邊緣厚度 */
  
  /* 增強霧面黑灰漸層 - 頂部白邊，底部自然融入 */
  background: linear-gradient(
    180deg,
    /* 頂部：白色邊緣線 (玻璃反光效果) */
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 5%,
    /* 上部：增強深灰黑霧面邊緣 */
    rgba(10, 10, 15, 0.6) 10%,
    rgba(25, 25, 30, 0.5) 20%,
    rgba(45, 45, 50, 0.4) 35%,
    /* 中間：增強淺灰霧面過渡 */
    rgba(70, 70, 75, 0.3) 55%,
    rgba(90, 90, 95, 0.2) 75%,
    /* 底部：自然漸隱 (不要白線) */
    rgba(110, 110, 115, 0.08) 90%,
    transparent 100%
  );
  
  /* 增強霧面質感濾鏡 */
  backdrop-filter: blur(3px) saturate(0.6) contrast(1.2);
  -webkit-backdrop-filter: blur(3px) saturate(0.6) contrast(1.2);
  
  /* 使用系統成熟的陰影 - 跟語言選擇器一樣自然 */
  box-shadow: var(--theme-shadow-md);
  
  /* 霧面不透明度 */
  opacity: 0.9;
  
  z-index: 10;
  
  /* ========== 霧面邊緣調整說明 ========== */
  /* height: 控制霧面邊緣厚度 */
  /* rgba 灰階值: 20→140 營造深到淺的霧面層次 */
  /* backdrop-filter blur: 霧面模糊強度 */
  /* saturate: 降低飽和度營造霧面感 */
}

/* ===== Footer 毛玻璃效果 ===== */
.glassmorphism-footer {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  
  box-shadow: 
    0 -4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ===== 響應式設計 ===== */

/* 手機端優化 */
@media (max-width: 767px) {
  .full-page-background {
    /* 減少模糊效果以提升性能 */
    filter: blur(0.5px) brightness(0.75);
    background-attachment: scroll; /* 避免iOS滾動問題 */
  }
  
  .glassmorphism-container {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: 10px;
    border-radius: 16px;
  }
  
  .glassmorphism-footer {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin: 10px 10px 0 10px;
    border-radius: 16px 16px 0 0;
  }
}

/* 平板端 */
@media (min-width: 768px) and (max-width: 1023px) {
  .full-page-background {
    filter: blur(1px) brightness(0.7);
  }
  
  .glassmorphism-container {
    margin: 15px;
    border-radius: 18px;
  }
  
  .glassmorphism-footer {
    margin: 15px 15px 0 15px;
    border-radius: 18px 18px 0 0;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .full-page-background {
    /* 完整景深效果 */
    filter: blur(2px) brightness(0.65);
  }
  
  .glassmorphism-container {
    margin: 20px;
    border-radius: 20px;
  }
  
  .glassmorphism-footer {
    margin: 20px 20px 0 20px;
    border-radius: 20px 20px 0 0;
  }
}

/* ===== 高性能設備優化 ===== */
@media (min-resolution: 2dppx) {
  .full-page-background {
    /* 高解析度設備使用更強的效果 */
    filter: blur(1.5px) brightness(0.68);
  }
}

/* ===== 無障礙優化 ===== */
@media (prefers-reduced-motion: reduce) {
  .full-page-background,
  .glassmorphism-container,
  .glassmorphism-footer {
    transition: none;
  }
}

/* 高對比度模式 */
@media (prefers-contrast: high) {
  .glassmorphism-container {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.8);
  }
  
  .glassmorphism-footer {
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid rgba(255, 255, 255, 0.8);
  }
}

/* ===== 載入狀態 ===== */
.full-page-background.loading {
  filter: blur(3px) brightness(0.5);
  opacity: 0.7;
}

.glassmorphism-container.loading {
  opacity: 0.8;
  pointer-events: none;
}

/* ===== 主題切換動畫 ===== */
.theme-transition {
  transition: 
    background-image 0.5s ease-in-out,
    filter 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

/* ===== 錯誤狀態 ===== */
.full-page-background.error {
  background: linear-gradient(
    135deg,
    var(--primary-color, #ff6b35),
    var(--secondary-color, #f7931e)
  );
  filter: blur(1px) brightness(0.6);
}

/* ===== 深色主題適配 ===== */
@media (prefers-color-scheme: dark) {
  .full-page-overlay {
    background: linear-gradient(
      180deg, 
      rgba(0,0,0,0.4) 0%, 
      rgba(0,0,0,0.2) 50%, 
      rgba(0,0,0,0.5) 100%
    );
  }
}

/* ===== 觸控設備優化 ===== */
@media (hover: none) and (pointer: coarse) {
  .glassmorphism-container:hover {
    /* 移除懸停效果 */
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* ===== 性能優化 ===== */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform, filter, opacity;
}

/* 減少重繪 */
.contain-paint {
  contain: layout style paint;
}