/* ==========================================================================
   动画与加载态
   ========================================================================== */

/* ---------- 页面切换过渡 ----------
 *
 * 由 app.js 的两个 class 驱动：
 *   .page-leaving   旧内容淡出（用户点了导航，新内容还在准备）
 *   .page-entering  新内容的起始态（紧接着被移除，触发进入动画）
 *
 * 为什么用 class 而不是直接设 animation：
 *   直接设 animation 需要「清掉 → 强制重排 → 重设」三步，
 *   而且退出动画没地方放。用 class 更干净，样式也集中在 CSS 里。
 */

#contentRoot {
  /* 透明度/位移都要能过渡，否则退出动画会瞬变 */
  transition: opacity .14s ease-in, transform .14s ease-in;
}

/* 退出：淡出 + 轻微上移，暗示"让位给新页面" */
#contentRoot.page-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* 进入的起始态 */
#contentRoot.page-entering {
  opacity: 0;
  transform: translateY(10px);
}

/* 移除 .page-entering 时回到常态，transition 会补间 */
#contentRoot:not(.page-entering):not(.page-leaving) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .26s cubic-bezier(.22,.61,.36,1),
              transform .26s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 页面内部元素错峰进入 ---------- */

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.fade-in { animation: fadeIn .4s ease-out; }

/* ---------- 骨架屏 ---------- */

.skeleton-wrap {
  /* 和 .card-list 保持一致的网格，避免加载完成时布局跳动 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.skeleton-card,
.skeleton-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* 卡片骨架：贴近真实卡片的高度 */
.skeleton-card {
  padding: 14px 16px;
  min-height: 108px;
  border-radius: var(--radius-sm);
}

@media (max-width: 620px) {
  .skeleton-wrap { grid-template-columns: 1fr; }
}

.skeleton-row { padding: 16px 18px; }

@keyframes skeletonPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

.sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  margin-bottom: 10px;
}
.sk-line:last-child { margin-bottom: 0; }

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.sk-title { width: 38%; height: 20px; margin-bottom: 12px; }
.sk-sub   { width: 55%; height: 11px; }
.sk-body  { width: 100%; }
.sk-body.short { width: 65%; }

/* 卡片内的小加载提示 */
.sk-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mute);
  padding: 12px 0;
}

/* ---------- 统计条 ---------- */

.stat-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 0 18px;
}

.stat-num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--neon-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ---------- 域名卡片悬停 ---------- */
/* 注意：.card-list 的布局在 cards.css 里（两列网格），不要在这里重复定义 */

.nft-card {
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.nft-card:hover {
  border-color: rgba(124, 58, 237, .35);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

/* ---------- 可点击元素反馈 ---------- */

.btn,
.nav-item,
.tab,
.wallet-btn {
  transition: all .16s cubic-bezier(.22,.61,.36,1);
}
.btn:active:not(:disabled) { transform: scale(.98); }

/* ---------- 侧边栏导航项进入 ---------- */

@keyframes navIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.nav-item {
  animation: navIn .3s cubic-bezier(.22,.61,.36,1) backwards;
}
.nav-item:nth-child(1) { animation-delay: 0ms; }
.nav-item:nth-child(2) { animation-delay: 45ms; }
.nav-item:nth-child(3) { animation-delay: 90ms; }
.nav-item:nth-child(4) { animation-delay: 135ms; }
.nav-item:nth-child(5) { animation-delay: 180ms; }

/* ---------- 域名行（注册页可用性检查）---------- */

.domain-row,
.status {
  animation: fadeUp .3s cubic-bezier(.22,.61,.36,1) backwards;
}
.status.ok, .status.err, .status.warn { animation: none; }

/* 检查结果依次出现 */
#status > .status:nth-child(1) { animation-delay: 0ms; }
#status > .status:nth-child(2) { animation-delay: 70ms; }
#status > .status:nth-child(3) { animation-delay: 140ms; }

/* ---------- toast 更顺滑 ---------- */

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---------- 按钮 loading 时的呼吸 ---------- */

@keyframes breathe {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.btn:disabled .spinner { animation: spin .7s linear infinite, breathe 1.6s ease-in-out infinite; }

/* ---------- 空状态 ---------- */

.empty {
  animation: fadeUp .42s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 无障碍：尊重系统设置 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .skeleton-card, .skeleton-row, .sk-line { animation: none; }
}