@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Montserrat:wght@300;500&display=swap');

:root {
  --sand-white: #F5F3F0;
  --basalt-black: #2A2B2C;
  --tungsten-gray: #6C7079;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Serif SC', serif;
  background-color: var(--sand-white);
  color: var(--basalt-black);
  line-height: 1.6;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* 导航栏智能隐藏 */
.nav-header {
  transition: transform 0.3s ease-in-out;
}

.nav-header.hidden {
  transform: translateY(-100%);
}

/* 图片悬停材质标签 */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-label {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(42, 43, 44, 0.9);
  color: var(--sand-white);
  padding: 0.5rem;
  transition: bottom 0.3s ease;
  font-size: 0.875rem;
}

.image-container:hover .image-label {
  bottom: 0;
}

/* 滚动动画 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 水波纹动态背景 */
.water-wave {
  position: relative;
  overflow: hidden;
}

.water-wave::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(108, 112, 121, 0.1), transparent);
  animation: wave 3s linear infinite;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 720°旋转展示 */
.rotate-3d {
  perspective: 1000px;
}

.rotate-item {
  transition: transform 0.6s;
}

.rotate-item:hover {
  transform: rotateY(360deg);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .mobile-menu.active {
    transform: translateX(0);
  }
  
  .mobile-nav-icon {
    display: block;
  }
  
  .desktop-nav {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-nav-icon {
    display: none;
  }
  
  .desktop-nav {
    display: flex;
  }
}

/* 平板端双栏布局 */
@media (min-width: 768px) and (max-width: 1024px) {
  .grid-cols-2-md {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 色彩渐变效果 */
.color-gradient {
  background: linear-gradient(90deg, 
    var(--sand-white) 0%, 
    var(--tungsten-gray) 50%, 
    var(--basalt-black) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 加载动画 */
.loading-spinner {
  border: 3px solid var(--sand-white);
  border-top: 3px solid var(--basalt-black);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 细节聚焦特效 */
.detail-focus {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.detail-focus:hover {
  filter: grayscale(0%);
}

/* 隐藏滚动条但保持功能 */
.custom-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 黄金分割点定位 */
.golden-ratio {
  width: 61.8%;
  margin: 0 auto;
}

/* 负空间运用 */
.negative-space {
  padding: 5rem 2rem;
}

/* 触摸优化 */
@media (hover: none) {
  .image-label {
    bottom: 0;
  }
}