/* 性能优化CSS */

/* 图片延迟加载时的淡入效果 */
img.loaded {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 优化移动设备上的图片占位符 */
img:not([src]):not([srcset]) {
  visibility: hidden;
}

/* 确保移动设备上的媒体元素不会溢出容器 */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* 移动设备上的性能优化 */
@media (max-width: 768px) {
  /* 减少动画和过渡效果 */
  *, *::before, *::after {
    transition-duration: 0.2s !important;
    animation-duration: 0.2s !important;
  }
  
  /* 禁用不必要的背景效果 */
  .card::before,
  .glassmorphism-card::before,
  .glassmorphism-card::after {
    display: none !important;
  }
  
  /* 简化阴影效果 */
  .card, 
  .glassmorphism-card,
  .book-card,
  .cta-button {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* 减少滤镜效果的使用 */
  .hero-background video {
    filter: brightness(0.5) !important;
  }
  
  /* 降低不透明度动画的成本 */
  .card:hover::before,
  .glassmorphism-card:hover::before {
    opacity: 0 !important;
  }
  
  /* 禁用移动设备上的3D变换 */
  .card:hover,
  .glassmorphism-card:hover,
  .skandha-card:hover {
    transform: translateY(-5px) !important;
  }
  
  /* 降低背景噪点的复杂度 */
  body::before {
    opacity: 0.01 !important;
    animation: none !important;
  }
  
  /* 简化模糊效果 */
  #main-header,
  .card,
  .glassmorphism-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* 加载视频按钮样式 */
  .load-video-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    cursor: pointer;
  }
  
  /* 降低滚动性能影响 */
  main {
    scroll-snap-type: none;
  }
  
  /* 简化英文版大标题在移动设备上的显示 */
  html[lang="en-US"] h1,
  html[lang="en-US"] h2 {
    font-size: 85% !important;
    word-break: break-word;
    hyphens: auto;
  }
  
  /* 修正英文版移动端标题大小问题 */
  html[lang="en-US"] h1 {
    font-size: clamp(2.2rem, 6vw, 3rem) !important;
    line-height: 1.2;
  }
  
  html[lang="en-US"] h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.2;
  }
  
  html[lang="en-US"] h3 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
  }
  
  html[lang="en-US"] .hero p.lead {
    font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
    line-height: 1.4;
  }
  
  /* 为特定区域的标题增加额外样式 */
  html[lang="en-US"] #hero h1 {
    margin-bottom: 15px;
  }
  
  html[lang="en-US"] #project-overview h2 {
    margin-bottom: 25px;
  }
  
  html[lang="en-US"] #why-greenland h2 {
    padding-bottom: 10px;
  }
  
  /* 增加英文版标题的可读性 */
  html[lang="en-US"] .hero h1,
  html[lang="en-US"] .hero p.lead {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 5px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 专门针对hero区域的标题 */
  html[lang="en-US"] #hero h1 {
    background: none !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    max-width: 90%;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* hero区域的副标题 */
  html[lang="en-US"] #hero p.lead {
    max-width: 90%;
    font-weight: 500;
  }
  
  /* 修复英文版标题背景渐变在移动端的显示 */
  html[lang="en-US"] h1 {
    background: linear-gradient(45deg, #EAF1FF, var(--accent1) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  /* 英文版内容区标题样式修复 */
  html[lang="en-US"] section h1,
  html[lang="en-US"] section h2 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
  }
  
  /* 为"Why Greenland"和其他内容区标题添加底边装饰 */
  html[lang="en-US"] #why-greenland h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent1);
    margin: 15px auto 0;
  }
  
  /* 为内容区域的英文标题增加间距 */
  html[lang="en-US"] section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  /* 英文版hero区域内容布局优化 */
  html[lang="en-US"] .hero .content-layer {
    width: 100%;
    padding: 15px;
  }
}

/* 重要内容优先加载 */
.hero, #main-header, .content-layer {
  content-visibility: auto;
}

/* 减少布局变化 */
.hero-background,
.book-card img,
.gallery-item img {
  aspect-ratio: attr(width) / attr(height);
}

/* 滚动优化 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 预加载字体以避免布局偏移 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter Regular'), url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}

/* 帮助浏览器预加载关键资源 */
.preload-hero-image {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}