/**
 * 页面切换动画样式
 * 用于在不同页面之间提供平滑的过渡效果
 */

/* 页面切换基础样式 */
html.page-transition {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 页面进入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 页面离开动画 */
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* 应用于主容器的动画 */
.container, .login-container, .article-container {
  animation: fadeIn 0.5s ease-out;
}

/* 链接悬停效果 */
a {
  transition: color 0.2s ease, transform 0.2s ease;
}

a:hover {
  transform: translateY(-1px);
}

/* 按钮过渡效果 */
button, .btn, .github-login, .login-btn, .back-link {
  transition: all 0.3s ease;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}