/* ============================================================
 * state.css — 数据加载三态样式（骨架屏 / 错误 / 空数据）
 * 项目：304am永利集团 官网 V5
 * 对应开发说明书 4.1.7，供新闻列表/详情、案例详情等 API 驱动子页面使用。
 * 依赖 tokens.css 变量：--paper / --r-md / --sp-4 / --sp-8 / --text-3 / --fs-sm / --brand-500
 * ============================================================ */

/* ---------- 加载中：骨架屏 ---------- */
.skeleton-loading {
  min-height: 8em;
}

.skeleton-line {
  height: 1em;
  margin: var(--sp-4) 0;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 尊重「减少动效」偏好：骨架不做脉冲，仅保留占位灰条 */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

/* ---------- 错误态 ---------- */
.error-state {
  text-align: center;
  padding: var(--sp-8);
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.error-state__retry {
  margin-top: var(--sp-4);
  padding: 0.5em 1.5em;
  font: inherit;
  color: var(--brand-500);
  background: transparent;
  border: 1px solid var(--brand-500);
  border-radius: var(--r-md);
  cursor: pointer;
}

.error-state__retry:hover { opacity: 0.85; }

/* ---------- 空数据态 ---------- */
.empty-state {
  text-align: center;
  padding: var(--sp-8);
  color: var(--text-3);
  font-size: var(--fs-sm);
}