/* 基础动画 */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 滚动平滑效果 */
html {
  scroll-behavior: smooth;
}

/* 加载动画 */
.loader {
  border-top-color: #165DFF;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* 元素进入视口动画 */
.article-card, .category-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.article-card.visible, .category-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 页面初始加载过渡 */
body {
  transition: opacity 0.5s ease-out;
}
    
/* 文章展开样式 */
.article-full-content {
  line-height: 1.6;
}

.article-content {
  line-height: 1.6;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hidden {
  display: none;
}

/* 模态框样式 */
.modal-open {
  overflow: hidden;
}

#article-modal {
  animation: fadeIn 0.3s ease-out;
}

#article-modal .modal-content {
  line-height: 1.6;
}

#article-modal .modal-content p {
  margin-bottom: 1rem;
}

#article-modal .modal-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
}

#article-modal .modal-content ul,
#article-modal .modal-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

#article-modal .modal-content li {
  margin-bottom: 0.5rem;
}