/* ================================
   页面过渡动画
   消除切换时的闪烁
   ================================ */

/* 页面淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* 主内容区域淡入 */
main {
  animation: fadeIn 0.3s ease-out;
}

/* 博客卡片滚动渐现 - 使用 transition + Observer */
.blog-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 进入视口后显示 */
.blog-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 移除旧的延迟设置（现在由 Observer 控制） */

/* 博客详情页滑入动画 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

#blogDetail {
  animation: slideInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#blogDetail.closing {
  animation: slideOutDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 团体信息卡片 */
.stat-card {
  animation: fadeInUp 0.4s ease-out backwards;
}

.stat-card:nth-child(1) { animation-delay: 0s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }

/* 成员网格淡入 */
.member-grid {
  animation: fadeIn 0.4s ease-out;
}

.member-item {
  animation: fadeInUp 0.3s ease-out backwards;
}

/* 标签切换动画 */
.tab-item {
  transition: all 0.2s ease;
}

.tab-item.active {
  transition: all 0.3s ease;
}

/* 平滑的内容切换 - 页面导航过渡 */
.content-transition {
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-transition.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

.content-transition.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* 页面内容容器过渡 */
main {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

main.page-transitioning {
  opacity: 0;
}

/* 图片加载动画 - 仅在加载中显示 */
.blog-card-image.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.gallery-image {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 图片淡入 - 延长时间 */
.blog-card-image img,
.gallery-image.loaded {
  animation: fadeIn 0.7s ease-out;
}

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

/* 减少首次加载的闪烁 */
body.page-loaded {
  animation: fadeIn 0.2s ease-out;
}

/* Header固定时的平滑效果 */
header {
  transition: box-shadow 0.2s ease;
}

header.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 筛选器下拉菜单 */
#memberSelect,
#searchInput {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#memberSelect:focus,
#searchInput:focus {
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* 加载状态 */
.loading-state {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 翻页按钮动画 */
#paginationContainer button {
  transition: all 0.2s ease;
}

#paginationContainer button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#paginationContainer button:active:not(:disabled) {
  transform: translateY(0);
}

/* 移动端优化 */
@media (max-width: 768px) {
  /* 移动端减少动画，提升性能 */
  .blog-card {
    animation-duration: 0.3s;
  }
  
  .blog-card:nth-child(n+5) {
    animation-delay: 0.15s;
  }
  
  /* 移动端菜单动画 */
  .mobile-sidebar {
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .mobile-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

/* 防止动画导致的布局偏移 */
.blog-card,
.stat-card,
.member-item {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 优化重绘性能 */
.blog-card:hover,
.member-item:hover,
.tab-item:hover {
  will-change: transform, box-shadow;
}

/* Hover后移除will-change */
.blog-card:not(:hover),
.member-item:not(:hover),
.tab-item:not(:hover) {
  will-change: auto;
}