/* 引入优雅的无衬线字体，支持中文与西文 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500&display=swap');

/* 自定义变量 */
:root {
  --color-charcoal: #2c2c2c;      /* 炭黑 */
  --color-ivory: #fdfbf7;         /* 象牙白背景 */
  --color-sand: #e6e2d3;          /* 砂岩灰 */
  --font-main: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

/* 基础重置与排版 */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* 实用工具：隐藏滚动条但允许滚动 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 动画关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* 动画类应用 */
.animate-fade-in {
  animation: fadeIn 1.5s ease-out forwards;
}

.animate-slide-up {
  opacity: 0; /* 初始状态隐藏 */
  animation: slideUpFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 动画延迟辅助类 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }

/* 交互效果：图片容器 */
.group-image {
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0; /* 图片加载前的占位色 */
}

.group-image img {
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
  will-change: transform;
}

.group-image:hover img {
  transform: scale(1.03); /* 极简微放大 */
}

/* 导航链接动效 */
.nav-link {
  position: relative;
  display: inline-block;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 文本选择颜色 */
::selection {
  background-color: #e3dac9; /* 燕麦色背景 */
  color: #000;
}