/* 深灰主色调与金属质感自定义样式 */

/* 色彩系统 */
:root {
  --primary-gray: #2a2a2a;
  --light-gray: #f5f5f5;
  --sandstone: #e8e8e8;
  --metallic: #c0c0c0;
  --text-dark: #1a1a1a;
  --text-light: #666666;
}

/* 悬停动效 */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* 视差滚动效果 */
.parallax {
  transition: transform 0.5s ease-out;
}

/* 材质标签样式 */
.material-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(42, 42, 42, 0.9);
  color: white;
  padding: 8px 12px;
  font-size: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.image-container:hover .material-tag {
  transform: translateY(0);
}

/* 工艺注解样式 */
.craft-tooltip {
  position: relative;
  cursor: help;
}

.craft-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-gray);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.craft-tooltip:hover::after {
  opacity: 1;
}

/* 图片容器 */
.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* 页脚装饰线 */
.footer-line {
  width: 60px;
  height: 1px;
  background: var(--metallic);
  margin: 20px auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .material-tag {
    font-size: 11px;
    padding: 6px 10px;
  }
  
  .craft-tooltip::after {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* 首屏视觉区特殊布局 */
.hero-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 4rem 2rem;
}

/* 工艺展示区全屏效果 */
.craft-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 细节三联图布局 */
.detail-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}