/* 
 * 全局样式定义 
 * 遵循极简主义设计原则 
 * 配合 Tailwind CSS 使用
 */

/* 字体系统：优先使用无衬线字体与现代中文字体 */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  color: #1a1a1a;
  overflow-x: hidden;
}

/* 页面淡入过渡动画 */
.fade-in {
  animation: pageFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

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

/* 图片容器：用于裁剪溢出部分 */
.img-container {
  overflow: hidden;
  position: relative;
}

/* 图片悬停微动效：优雅的放大效果 */
.hover-zoom {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hover-zoom:hover {
  transform: scale(1.03);
}

/* 极简导航链接动画 */
.nav-item {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.nav-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 50%;
  background-color: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-item:hover::after {
  width: 100%;
}

/* 骨架屏加载动画 */
.skeleton {
  background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* 隐藏滚动条但保留功能 (适用于画廊容器) */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 文本选中样式 */
::selection {
  background: #e5e7eb;
  color: #000;
}