/**
 * Home Page 捆绑CSS文件
 * 包含home页面特定的所有样式
 */

/* 导入核心CSS */
@import '/assets/css/core.css';

/* Home页面特定样式 */
/* 以下样式从pages/home.css和其他相关文件合并而来 */

/* 特性项卡片 */
.feature-item {
  background-color: rgba(12, 37, 89, 0.5);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  margin-bottom: 0.75rem;
  cursor: pointer;
}

.feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 渐变边框效果 */
.gradient-border {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(226, 200, 125, 0.3), rgba(226, 200, 125, 0.1));
}

/* 触摸效果 */
.touch-effect {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.touch-effect:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.touch-effect:active {
  transform: translateY(0) scale(0.98);
}

/* 高级淡入动画 */
.fancy-fade-in {
  opacity: 0;
  animation: fancyFadeIn 0.8s forwards;
  animation-delay: calc(var(--order, 0) * 0.2s);
}

@keyframes fancyFadeIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 主页特定布局 */
.home-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 992px) {
  .home-layout {
    grid-template-columns: 1fr 1fr;
  }
}