/* 首页样式 */

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/hero-bg.svg') no-repeat center center;
  background-size: cover;
  opacity: 0.1;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card .material-symbols-light--article,
.feature-card .material-symbols-light--bookmark,
.feature-card .material-symbols-light--person {
  transition: all 0.3s ease;
}

.feature-card:hover .material-symbols-light--article,
.feature-card:hover .material-symbols-light--bookmark,
.feature-card:hover .material-symbols-light--person {
  transform: scale(1.1);
}

.stats-section {
  position: relative;
}

.stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/stats-bg.svg') no-repeat center center;
  background-size: cover;
  opacity: 0.05;
  z-index: 0;
}

.stat-item {
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.05);
}

.user-dashboard {
  position: relative;
}

.user-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/dashboard-bg.svg') no-repeat center center;
  background-size: cover;
  opacity: 0.03;
  z-index: 0;
}

.avatar {
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 0;
  }
  
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .user-info {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  .user-actions {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-actions a {
    width: 100%;
    text-align: center;
  }
}