/* 组件样式 - 各类组件的样式定义 */

/**
 * 社交媒体图标组件
 */
.social-media-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.social-media-icon:hover {
  transform: scale(1.1);
}

/**
 * 案例卡片组件
 */
.case-card {
  overflow: hidden;
  transition: all 0.3s ease;
}

.case-card-image {
  overflow: hidden;
}

.case-card-image img {
  transition: transform 0.5s ease;
}

.case-card:hover .case-card-image img {
  transform: scale(1.05);
}

/**
 * 时间线组件动画
 */
.timeline-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.animated {
  opacity: 1;
  transform: translateY(0);
}

.fadeInUp {
  animation: fadeInUp 0.8s forwards;
}

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

/**
 * 相关案例卡片
 */
.related-case {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.related-case img {
  transition: transform 0.5s ease;
}

.related-case-content {
  transition: background 0.3s ease;
}