/* 引入现代无衬线字体与衬线字体搭配 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* 全局基础设置 */
:root {
  --transition-base: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --color-primary: #1a1a1a;
  --color-secondary: #f5f5f5;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-primary);
  background-color: #ffffff;
  overflow-x: hidden;
}

/* 标题字体 */
h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* 极简滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4d4d4;
}

/* 实用工具类：图片容器 */
.img-container {
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0; /* 占位色 */
}

/* 实用工具类：图片悬停缩放效果 */
.hover-zoom img {
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}

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

/* 淡入动画关键帧 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 磁性吸附效果容器 */
.snap-scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.snap-section {
  scroll-snap-align: start;
}

/* 隐藏移动端点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 文本选择颜色 */
::selection {
  background: #f3f3f3;
  color: #000;
}

/* 导航栏模糊背景 */
.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 针对不支持 aspect-ratio 的浏览器的降级处理 (Tailwind aspect-* 通常能处理，这里做兜底) */
@supports not (aspect-ratio: 1/1) {
  .aspect-square {
    position: relative;
    padding-bottom: 100%;
  }
  .aspect-square > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}