/**
 * CSS性能优化
 * 包含：字体优化、CSS动画性能、无用样式隔离
 */

/* ==================== 字体优化 ==================== */
@font-face {
  font-family: 'System Font Stack';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial"), local("sans-serif");
}

@font-face {
  font-family: 'System Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("SF Mono"), local("Consolas"), local("monospace");
}

/* 字体预加载提示类 */
.font-preload-hint {
  font-display: optional;
}

/* ==================== 关键渲染优化 ==================== */
/* 避免布局抖动 */
img, video {
  max-width: 100%;
  height: auto;
}

/* 内容可见时再渲染 */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded,
.lazy-image.lazy-loaded {
  opacity: 1;
}

/* 占位符骨架屏 */
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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

/* ==================== CSS动画性能优化 ==================== */
/* 使用transform和opacity进行动画，避免触发重排 */
.performance-friendly-transform {
  will-change: transform;
}

.performance-friendly-opacity {
  will-change: opacity;
}

/* 滚动优化 */
.scroll-smooth {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 减少重绘区域 */
.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* ==================== 图片加载状态 ==================== */
.img-loading {
  background-color: #f5f5f5;
  position: relative;
}

.img-loading::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid #e0e0e0;
  border-top-color: #666;
  border-radius: 50%;
  animation: img-loading-spin 0.8s linear infinite;
}

@keyframes img-loading-spin {
  to { transform: rotate(360deg); }
}

/* ==================== 延迟加载容器 ==================== */
.lazy-container {
  min-height: 100px;
}

/* ==================== 预加载动画 ==================== */
.preload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.preload-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.preload-overlay.hidden {
  display: none;
}

/* ==================== Critical CSS 内联提示 ==================== */
/* 标记关键CSS类 - 这些样式应该内联到HTML中 */
.critical-inline {
  /* 标记需要内联的样式 */
}

/* ==================== 服务工作线程缓存优化 ==================== */
/* 标记可缓存资源 */
.cacheable-media {
  /* 图片、视频等静态资源 */
}

.cacheable-fonts {
  /* 字体文件 */
}

.cacheable-static {
  /* CSS、JS等静态文件 */
}