/* ============================================================
   animations.css — 所有关键帧动效
   ============================================================ */

/* 骨架屏脉冲 */
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: var(--card-radius);
}

/* 加载旋转圆环 */
.loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* Toast 滑入/滑出 */
.toast-enter {
  animation: toast-in 0.3s ease-out forwards;
}
.toast-leave {
  animation: toast-out 0.3s ease-in forwards;
}
@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* 页面渐入 */
.page-fade-in {
  animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 骨架屏细化（500ms 后页面的加载状态） */
.loading-slow [id^="page-"]::after {
  content: '';
  display: block;
  height: 200px;
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: var(--card-radius);
  margin: 16px 0;
}